/* Док-панель StreamManager в OBS (obs-bridge.html). Док обычно узкий,
   300–400 px, поэтому всё в одну колонку и мелким кеглем. Токены — из styles.css. */

body.bridge {
  margin: 0;
  padding: var(--s-3);
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--fg);
  font-size: var(--t-sm);
  line-height: 1.45;
  overflow-y: auto;
}

.bridge__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: var(--t-md);
}

.bridge__tag {
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-size: var(--t-xs);
}

.bridge__card {
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.bridge__card h2 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-md);
}

.bridge__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.bridge__row h2 {
  margin: 0;
}

.bridge__form {
  display: grid;
  gap: var(--s-2);
}

.bridge__form label {
  display: grid;
  gap: var(--s-1);
  color: var(--fg-muted);
}

.bridge__form input[type="number"],
.bridge__form input[type="password"] {
  padding: 6px var(--s-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-deep);
  color: var(--fg);
  font: inherit;
}

.bridge__check,
.bridge__form .bridge__check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  color: var(--fg-muted);
}

.bridge__status {
  margin: var(--s-2) 0 0;
  color: var(--fg-muted);
}

.bridge__status[data-state="ok"] { color: var(--ok); }
.bridge__status[data-state="bad"] { color: var(--danger); }
.bridge__status[data-state="wait"] { color: var(--warn); }

.bridge__hint {
  margin: var(--s-2) 0 0;
  color: var(--fg-subtle);
  font-size: var(--t-xs);
}

.bridge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.bridge__frames {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.bridge__frames figure {
  margin: 0;
}

.bridge__frames img {
  display: block;
  width: 100%;
  border-radius: var(--r-sm);
  background: #000;
}

.bridge__frames figcaption {
  margin-top: var(--s-1);
  color: var(--fg-subtle);
  font-size: var(--t-xs);
}

.bridge__report {
  max-height: 50vh;
  margin: var(--s-2) 0 0;
  padding: var(--s-2);
  overflow: auto;
  border-radius: var(--r-sm);
  background: var(--bg-deep);
  font: 11px/1.4 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Запасное копирование через execCommand: поле должно быть в документе, но не
   на виду. */
.bridge__copy {
  position: fixed;
  left: -9999px;
  top: 0;
}