/* Site-only OBS setup. The form has one owner, beside the map veto. */
.obs-connection { margin:0 16px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); scroll-margin-top:24px; }
.obs-connection>summary { display:flex; align-items:center; gap:14px; padding:16px; cursor:pointer; list-style:none; }
.obs-connection>summary::-webkit-details-marker { display:none; }
.obs-connection-title { flex:1; min-width:0; display:grid; gap:5px; }
.obs-connection-title>span:last-child { font-size:15px; font-weight:750; color:var(--ink); }
.obs-connection-state { max-width:260px; color:var(--muted); font-size:11px; line-height:1.5; text-align:right; overflow-wrap:anywhere; }
.obs-connection-state[data-kind=good] { color:var(--success-ink); }
.obs-connection-state[data-kind=bad] { color:var(--red); }
.obs-connection-chevron { color:var(--muted); font-size:20px; transition:transform .15s; }
.obs-connection[open] .obs-connection-chevron { transform:rotate(180deg); }
.obs-connection>form { padding:0 16px 16px; }
.obs-connection-intro { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.7; }
.obs-connection .obs-mode { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.obs-connection .obs-mode legend { margin-bottom:9px; }
.obs-connection .obs-mode .check { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); line-height:1.5; }
.obs-connection .obs-mode .check:has(input:checked) { border-color:var(--red); background:var(--accent-soft); }
.obs-connection .obs-mode .check input { flex:none; margin-top:3px; }
.obs-connection .obs-mode b { display:block; font-size:12px; }
.obs-connection .obs-mode small { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-top:3px; }
.obs-guide { padding:14px 16px; margin-bottom:16px; border:1px solid var(--divider-2); border-radius:6px; background:var(--surface); }
.obs-guide h3 { margin:0 0 10px; color:var(--ink); font-size:13px; font-weight:700; }
.obs-guide ol { margin:0; padding-left:20px; color:var(--sub); font-size:12px; line-height:1.75; }
.obs-guide li+li { margin-top:8px; }
.obs-guide b { font-weight:650; }
.obs-connection .obs-field { display:block; min-width:0; color:var(--ink); font-size:12px; font-weight:600; line-height:1.6; }
.obs-connection input:not([type=radio]) { display:block; width:100%; min-width:0; margin-top:6px; padding:11px; border:1px solid var(--field-line); border-radius:5px; background:var(--field); color:var(--ink); font-size:12px; }
.obs-connection .copy-line { margin-top:6px; min-width:0; }
.obs-connection .copy-line input { flex:1; margin:0; font-size:11px; }
.obs-connection .copy-line button { flex:none; }
.obs-credentials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.obs-field-hint,.obs-code-line,.obs-version-note { color:var(--muted); font-size:11px; line-height:1.7; overflow-wrap:anywhere; }
.obs-field-hint { margin:7px 0 0; }
.obs-code-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; }
.obs-version-note { margin:14px 0 0; }
.obs-version-note a { margin-left:6px; text-underline-offset:3px; }
.obs-connection .obs-test { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.obs-connection-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:12px; }
.obs-connection-actions #closeObs { margin-left:auto; }
.dock-help { color:var(--muted); font-size:11px; line-height:1.7; }
.dock-help summary { cursor:pointer; font-weight:600; }
.dock-help ol { padding-left:18px; margin:10px 0; }
.dock-help li+li { margin-top:7px; }
.dock-field-hint { font-size:10px; font-weight:400; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
@media(max-width:650px) {
  .obs-connection { margin:0 10px 12px; }
  .obs-connection>summary { gap:8px; padding:12px; flex-wrap:wrap; }
  .obs-connection-title { flex-basis:70%; }
  .obs-connection-chevron { margin-left:auto; order:1; }
  .obs-connection-state { flex-basis:100%; max-width:none; order:2; text-align:left; }
  .obs-connection>form { padding:0 12px 12px; }
  .obs-connection .obs-mode,.obs-credentials { grid-template-columns:minmax(0,1fr); }
  .obs-guide { padding:12px; }
  .obs-connection .copy-line { flex-wrap:wrap; }
  .obs-connection .copy-line input { flex-basis:100%; }
  .obs-connection-actions .button { flex:1; }
}
@media(prefers-reduced-motion:reduce) { .obs-connection-chevron { transition:none; } }

.veto-live-status { margin: 10px 0 6px; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.veto-live-status[data-kind="good"] { color: var(--success-ink); }
.veto-live-status[data-kind="bad"] { color: var(--red); }

/* Connection entry remains visible even when the Lobby tab is restored. */
.obs-nav-button { color:var(--ink); font-weight:700; min-height:44px; }
.obs-mobile-guide { margin:0 0 14px; padding:12px; color:var(--sub); background:var(--surface); border:1px solid var(--line); border-radius:6px; font-size:12px; line-height:1.7; }
@media(max-width:680px) {
  .nav-tools .nav-button { min-height:44px; }
  .nav-tools .obs-nav-button { font-size:13px; }
  .obs-connection input:not([type=radio]) { font-size:16px; }
}

/* QR only fills the existing form; all credentials stay editable. */
.obs-qr-reader,.dock-pair { min-width:0; padding:12px; margin:0 0 14px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.obs-qr-reader>summary,.dock-pair>summary { cursor:pointer; font-size:13px; font-weight:700; }
.obs-qr-reader .obs-field-hint { margin:10px 0; }
.obs-qr-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.obs-qr-actions .button { min-height:44px; white-space:normal; }
.obs-qr-video { display:block; width:100%; max-height:300px; object-fit:cover; border-radius:5px; background:var(--surface-2); }
.obs-qr-video[hidden],.obs-qr-actions input[hidden] { display:none; }
.obs-qr-manual { margin-top:12px; font-size:12px; color:var(--muted); }
.obs-qr-manual>summary { cursor:pointer; }
.obs-qr-manual label { display:block; margin:10px 0; line-height:1.6; }
.obs-qr-manual input,.dock-pair input { display:block; box-sizing:border-box; width:100%; min-width:0; padding:10px; margin-top:6px; border:1px solid var(--field-line); border-radius:5px; background:var(--field); color:var(--ink); font-size:16px; }
.obs-qr-status { margin:10px 0 0; font-size:12px; line-height:1.7; overflow-wrap:anywhere; color:var(--sub); }
.obs-qr-status:empty { display:none; }
.obs-qr-status[data-kind=bad] { color:var(--red); }
.obs-pair-canvas { display:block; width:100%; max-width:280px; height:auto; margin:12px auto; image-rendering:pixelated; }
.obs-pair-canvas[hidden] { display:none; }
.dock-pair { margin-top:16px; }
.dock-form input { min-width:0; }
@media(max-width:680px) {
  .obs-qr-actions .button { flex:1 1 130px; }
  .dock-form input { font-size:16px; }
}

/* «На другом компьютере»: what the dock is, then three numbered steps. */
.obs-dock-about { margin:0 0 14px; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--sub); font-size:12px; line-height:1.7; }
.obs-dock-about h3,.obs-steps h3 { margin:0 0 6px; color:var(--ink); font-size:13px; font-weight:700; }
.obs-dock-about p { margin:0; }
.obs-dock-about p+p { margin-top:8px; }
.obs-steps { display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:obs-step; }
.obs-steps>li { position:relative; min-width:0; padding:14px 16px 14px 52px; border:1px solid var(--divider-2); border-radius:6px; background:var(--surface); counter-increment:obs-step; }
.obs-steps>li::before { content:counter(obs-step); position:absolute; left:16px; top:12px; width:24px; height:24px; border-radius:50%; background:var(--red); color:var(--on-accent); font-size:12px; font-weight:750; line-height:24px; text-align:center; }
.obs-steps .obs-field-hint { margin:0 0 10px; }
.obs-bridge-status { margin:0; color:var(--muted); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.obs-bridge-status[data-kind=good] { color:var(--success-ink); }
.obs-bridge-status[data-kind=bad] { color:var(--red); }
.obs-code-entry { margin-top:10px; color:var(--muted); font-size:12px; }
.obs-code-entry>summary { cursor:pointer; font-weight:600; }
.obs-code-entry .obs-field-hint { margin:8px 0; }
@media(max-width:650px) {
  .obs-steps>li { padding:12px 12px 12px 44px; }
  .obs-steps>li::before { left:12px; }
}