/* The output panel: where the program is going, and whether it is arriving.
 *
 * Paper, not ink — the inverse of the program panel, and deliberately so. These
 * are two different acts: one is performing, the other is checking the pipes.
 * Hairline rows, mono for anything measured, and no accent anywhere except the
 * one state that needs a person's hand. */

.cap-ot { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

.cap-ot-label {
  font-family: var(--sans); font-size: .625rem; font-weight: 600;
  letter-spacing: var(--label-track, .14em); text-transform: var(--label-case, uppercase);
  color: var(--label-ink, var(--ink-2));
}
.cap-ot-label + .cap-ot-list,
.cap-ot-label + .cap-ot-health { margin-top: -4px; }

/* ── destinations ────────────────────────────────────────────────────── */
.cap-ot-list { display: flex; flex-direction: column; }
.cap-ot-empty { color: var(--ink-3); font-size: .78125rem; padding: 6px 0; }

.cap-ot-row {
  display: grid; grid-template-columns: 14px 1fr auto 18px;
  grid-template-areas: "dot name note del" ". url url url";
  align-items: center; gap: 2px 8px;
  padding: 8px 0; border-top: var(--rule) solid var(--hairline);
}
.cap-ot-row:first-child { border-top: none; }
.cap-ot-row .nm { grid-area: name; font-size: .84375rem; color: var(--ink); }
.cap-ot-row .note {
  grid-area: note; font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold, #b98a2e);
}
.cap-ot-row .url {
  grid-area: url; font-family: var(--mono); font-size: .65625rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cap-ot-row.live .note { color: var(--accent); }

/* The enable dot is the control, which is why it is a button: a state you can
   see and cannot change is a readout pretending to be a switch. */
.cap-ot-dot {
  grid-area: dot; width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: var(--rule) solid var(--hairline-2); background: transparent; cursor: pointer;
}
.cap-ot-dot[aria-pressed="true"] { background: var(--green, #6f8f6a); border-color: transparent; }
.cap-ot-row.nokey .cap-ot-dot[aria-pressed="true"] { background: var(--ink-3); }
.cap-ot-row.live .cap-ot-dot[aria-pressed="true"] { background: var(--accent); }

.cap-ot-del {
  grid-area: del; border: 0; background: transparent; cursor: pointer;
  color: var(--ink-3); font-size: .9375rem; line-height: 1; padding: 0;
}
.cap-ot-del:hover { color: var(--accent); }

.cap-ot-actions { display: flex; gap: 8px; }
.cap-ot-add, .cap-ot-more {
  padding: 5px 11px; border-radius: var(--r-pill, 100px); cursor: pointer;
  font: inherit; font-size: .75rem;
  border: var(--rule) solid var(--hairline); background: transparent; color: var(--ink-2);
}
.cap-ot-add:hover, .cap-ot-more:hover { color: var(--ink); border-color: var(--hairline-2); }

.cap-ot-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cap-ot-form[hidden] { display: none; }
.cap-ot-form input {
  padding: 6px 9px; border-radius: var(--r-sm, 8px); font: inherit; font-size: .75rem;
  border: var(--rule) solid var(--hairline); background: var(--card); color: var(--ink);
}
.cap-ot-form [data-ot-f-name] { grid-column: 1 / 3; }
.cap-ot-formfoot { grid-column: 1 / 3; display: flex; gap: 6px; }
.cap-ot-formfoot button {
  padding: 6px 12px; border-radius: var(--r-sm, 8px); cursor: pointer;
  font: inherit; font-size: .75rem;
  border: var(--rule) solid var(--hairline); background: transparent; color: var(--ink-2);
}
.cap-ot-formfoot .solid { background: var(--ink); color: var(--paper); border-color: transparent; }

/* ── health ──────────────────────────────────────────────────────────── */
.cap-ot-health { display: flex; flex-direction: column; }
.cap-ot-hrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0; border-top: var(--rule) solid var(--hairline);
  font-size: .78125rem; color: var(--label-ink, var(--ink-2));
}
.cap-ot-hrow:first-child { border-top: none; }
.cap-ot-hrow b {
  font-family: var(--mono); font-size: .71875rem; font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
/* A session saying "live" while the encoder is dead is the failure that gets
   missed. It is the one thing here that gets a colour. */
.cap-ot.degraded .cap-ot-hrow:first-child b { color: var(--accent); }

.cap-ot-log { display: flex; flex-direction: column; gap: 6px; }
.cap-ot-log pre {
  margin: 0; padding: 7px 9px; border-radius: var(--r-sm, 8px); max-height: 92px;
  overflow: auto; white-space: pre-wrap; word-break: break-all;
  font-family: var(--mono); font-size: .625rem; line-height: 1.5;
  background: var(--paper-2); color: var(--ink-3);
}
.cap-ot-log pre[hidden] { display: none; }