/* ✒️ Jaan · live editing by paragraph (V1-1c, MUST-DO §5 N61): who is here, paragraph locks, the "new changes" notice. Colours per person come from .jp-c0 … .jp-c9 (jaan-pabsa.css); no style attributes (CSP). */
.jl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; font-size: 13px; color: var(--muted, #6b7280); }
.jl-who__t { font-weight: 600; margin-right: 2px; }
.jl-p { display: inline-flex; align-items: center; padding: 2px 11px 2px 9px; border-radius: 999px; color: var(--text, #1a1a1a);
  border: 1px solid color-mix(in srgb, var(--jc, #888) 50%, transparent); background: color-mix(in srgb, var(--jc, #888) 11%, transparent); }
.jl-p--me { font-weight: 600; }
.jl-p small { font-weight: 400; color: var(--muted, #6b7280); }
/* a paragraph somebody else is typing in: their colour bar + name, read-only for you */
.jl-lock { position: relative; margin-left: -10px; padding-left: 6px; border-left: 4px solid var(--jc, #888); background: color-mix(in srgb, var(--jc, #888) 9%, transparent); cursor: not-allowed; }
.jl-lock::after { content: attr(data-who) " ✎"; position: absolute; right: 4px; top: 1px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11px/1.6 system-ui, sans-serif; color: #fff; background: var(--jc, #888); padding: 0 8px; border-radius: 999px; pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jl-lock::after { color: #111; background: color-mix(in srgb, var(--jc, #888) 62%, #fff); } :root:not([data-theme="light"]) .jl-lock { border-left-color: color-mix(in srgb, var(--jc, #888) 62%, #fff); } }
:root[data-theme="dark"] .jl-lock::after { color: #111; background: color-mix(in srgb, var(--jc, #888) 62%, #fff); }
:root[data-theme="dark"] .jl-lock { border-left-color: color-mix(in srgb, var(--jc, #888) 62%, #fff); }
/* read-only visitors */
.jl-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--red, #B11F24); background: var(--red-soft, rgba(177, 31, 36, .08)); color: var(--text, #1a1a1a); font-size: 14.5px; }
.jl-note button { font: inherit; font-size: 14px; border: 1px solid var(--red, #B11F24); background: var(--red, #B11F24); color: #fff; border-radius: 999px; padding: 4px 16px; cursor: pointer; }
@media (max-width: 600px) { .jl-who { font-size: 12.5px; } .jl-lock { margin-left: -6px; } }