/* SV3 · Editor attribution chip (DH #674) — the one identity mark.
   Outline only: transparent fill, palette ring, initials. */

.att-scope{--surf:inherit}

/* ── mark ─────────────────────────────────────────────────────────────── */
.att{--ring:#4FB3B5;position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;background:transparent;border:1px solid var(--ring);color:#D6D5DB;font-family:var(--ui);font-weight:600;letter-spacing:.02em;line-height:1;user-select:none;text-transform:uppercase}
.att.s16{width:16px;height:16px;font-size:7px;letter-spacing:0}
.att.s20{width:20px;height:20px;font-size:8.5px}
.att.s28{width:28px;height:28px;font-size:11px;border-width:1.5px}

/* Structural states: no state introduces a new identity color. */
.att.you{box-shadow:0 0 0 1px var(--surf),0 0 0 2px var(--ring);color:#EEEAF4}
.att.s28.you{box-shadow:0 0 0 1.5px var(--surf),0 0 0 3px var(--ring)}
.att.rcv{border-style:dashed;border-color:#6F6C7F;--ring:#6F6C7F;font-family:var(--mono);font-weight:500;color:#A19FAD}
.att.rcv.s16{font-size:6.5px}.att.rcv.s20{font-size:8px}.att.rcv.s28{font-size:10px;border-width:1px}
.att.unk{border-color:#4A4854;--ring:#4A4854;color:#6F6C7F;font-weight:400}
.att.unk.s16{font-size:9px}.att.unk.s20{font-size:11px}.att.unk.s28{font-size:14px}
.att.auth::after{content:'';position:absolute;inset:2px;border-radius:50%;border:1px solid var(--ring);opacity:.42}
.att.s16.auth::after{inset:1.5px}

/* Interaction. The surface gap is also the focus-halo separator. */
.att-btn{appearance:none;background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;text-align:left;border-radius:2px}
.att-btn:hover .att{border-color:var(--ring-b,var(--ring))}
.att-btn:hover .att-nm{color:#EEEAF4}
.att-btn:focus-visible{outline:none}
.att-btn:focus-visible .att{box-shadow:0 0 0 1px var(--surf),0 0 0 2px #EEEAF4}
.att-btn:focus-visible .att.you{box-shadow:0 0 0 1px var(--surf),0 0 0 2px var(--ring),0 0 0 3px #EEEAF4}
.att.hovd{border-color:var(--ring-b,var(--ring))}
.att.focd{box-shadow:0 0 0 1px var(--surf),0 0 0 2px #EEEAF4}

/* Identity line. Only the name may compress. */
.att-id{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%}
.att-id-vis{display:contents}
.att-id.g6{gap:6px}
.att-nm{font-family:var(--ui);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-nm.ncard{font-size:12.5px;color:#EEEAF4}
.att-nm.nrow{font-size:11px;color:#A19FAD}
.att-nm.strong{color:#D6D4DE}
.att-nm em{font-style:normal;color:#EEEAF4}
.att-nm .dash{color:#6F6C7F}
.att-role{flex-shrink:0;font-family:var(--ui);font-size:10.5px;color:#6F6C7F;white-space:nowrap}
.att-mono{font-family:var(--mono);letter-spacing:.02em}

/* Stacks: leftmost paints on top, four visible plus count. */
.att-stk{display:inline-flex;align-items:center;flex-shrink:0;padding-left:1px}
.att-stk .att{box-shadow:0 0 0 1px var(--surf);position:relative}
.att-stk .att:nth-child(1){z-index:5}.att-stk .att:nth-child(2){z-index:4}.att-stk .att:nth-child(3){z-index:3}.att-stk .att:nth-child(4){z-index:2}.att-stk .att:nth-child(5){z-index:1}
.att-stk .att.you{box-shadow:0 0 0 1px var(--surf),0 0 0 2px var(--ring)}
.att-stk .att+.att{margin-left:-4.5px}
.att-stk.k20 .att+.att{margin-left:-6px}.att-stk.k28 .att+.att{margin-left:-9px}
.att-stk .att.more{border-color:#43444C;--ring:#43444C;font-family:var(--mono);font-weight:500;color:#A19FAD;letter-spacing:0}
.att-stk .att.more.s16{font-size:6.5px}.att-stk .att.more.s20{font-size:8px}

/* Live CueItem mounts own an exact opaque painted-surface token for the doubled
   ring. A translucent token here would composite twice: once for the row and
   again for the mark's gap. */
.ci-row{--surf:var(--bg-app)}
.ci-row.compact{--surf:var(--bg-app)}
.ci-row.compact:hover{--surf:var(--bg-row-hover)}
.ci-row.mini{--surf:var(--bg-app)}
.ci-row.mini.resolved{--surf:var(--bg-app)}
.ci-row.mini.flagged{--surf:var(--bg-app)}
.ci-row.full{--surf:var(--bg-row)}
.ci-row.full:hover{--surf:var(--bg-row-hover)}
.ci-row.full.resolved{--surf:var(--bg-deep)}
.ci-row.full.resolved:hover{--surf:var(--bg-row-hover)}
.ci-row.sel,.ci-row.multi{--surf:var(--ci-selected-card)}
.ci-row.full.sel,.ci-row.full.multi,
.ci-row.full.sel:hover,.ci-row.full.multi:hover{--surf:var(--ci-selected-card)}
.ci-row.mini.sel,.ci-row.mini.multi,
.ci-row.mini.resolved.sel,.ci-row.mini.flagged.sel{--surf:var(--ci-selected-card)}
/* Notes mobile has a deliberately higher-specificity edge-to-edge bed. Mirror
   that real production selector; the generic mini rules above serve other
   CueItem mounts. */
.nsm-list .ci-row.mini,
.nsm-list .ci-row.mini.resolved,
.nsm-list .ci-row.mini.flagged,
.nsm-list .ci-row.mini.sel,
.nsm-list .ci-row.mini.multi{--surf:var(--bg-row)}
.nsm-list .ci-row.mini:active{--surf:var(--bg-row-hover)}
.ci-row.full.flagged{--surf:var(--ci-flag-card)}
.ci-row.full.flagged:hover{--surf:var(--ci-flag-card-hover)}
.ci-row.full.flagged.sel,.ci-row.full.flagged.sel:hover{--surf:var(--ci-selected-card)}
.ci-row.full.resolved.sel,.ci-row.full.resolved.sel:hover{--surf:var(--ci-selected-card)}
.sv2-selection .ns-list .ci-row.full.sel,
.sv2-selection .ns-list .ci-row.full.multi{--surf:color-mix(in srgb,var(--bg-row) 88%,var(--sv2-lime) 12%)}
.ci-row.full .ci-attribution{display:inline-flex;align-items:center;flex-shrink:0}
.hx-attribution{display:inline-flex;align-items:center;width:206px;max-width:206px;flex:0 0 206px;min-width:0}
.nsd-laid-att{--surf:var(--bg-panel)}

@media(max-width:390px){
  .ci-row.full .ci-attribution .att-nm,.ci-row.full .ci-attribution .att-role{display:none}
  .hx-attribution{width:128px;max-width:128px;flex-basis:128px}
  .hx-attribution .att-role{display:none}
}
@media(max-width:320px){
  .ci-row.full .ci-attribution{min-width:16px}
  .ss-history-page .hx-time,.ss-history-page .hx-batch-count{display:none}
}