/* relay — owned by the relay work: ProPresenter remote via the church server (live.js «pp», ppconnect.js «ppc») */

/* status line under the top bar: «напрямую» / «через сервер» / «нет связи» */
.pp-st{display:flex;align-items:center;gap:8px;margin:6px 4px 0;min-width:0}
.pp-st small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* «Пульт через сервер» */
.rl .sec .lnk{gap:4px;color:var(--accent-ink)}
.rl-need b{display:block}
.rl-steps{margin:8px 0 0;padding:0 0 0 20px;font-size:14px;line-height:20px;color:var(--label-2)}
.rl-steps li{margin-top:6px;padding-left:2px}
.rl-steps li::marker{color:var(--label);font-weight:600}
.rl-steps b{color:var(--label);font-weight:600}
.sheet .rl-steps{margin-top:14px}
.rl-mono{font-variant-numeric:tabular-nums;word-break:break-all}

.rl-wait{display:flex;align-items:flex-start;gap:12px}
.rl-wait b{display:block;margin-bottom:2px}
.rl-wait.sm{align-items:center;margin-top:14px;padding:0 4px}
.rl-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--warn);margin-top:6px;box-shadow:0 0 0 0 var(--warn-tint);animation:rlPulse 1.6s ease-out infinite}
.rl-wait.sm .rl-dot{margin-top:0;background:var(--accent)}
@keyframes rlPulse{0%{box-shadow:0 0 0 0 var(--warn-tint)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.rl-dev .tag{flex:none}
.rl-dev .rl-x{width:36px;height:36px;margin-right:-8px;color:var(--label-3)}
.rl-req{gap:8px}
.rl-req .btn.sm{flex:none;padding:0 12px}

/* the 6-digit pairing code, read from across the room */
.rl-code{display:flex;align-items:center;justify-content:center;gap:0;margin-top:14px;padding:20px 8px;border-radius:18px;background:var(--card-2);font-size:46px;line-height:52px;font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--label);user-select:all;-webkit-user-select:all}
.rl-code span{display:inline-block;width:.45em}
.rl-code.old{opacity:.35;text-decoration:line-through}
.rl-left{text-align:center;margin-top:8px;font-size:14px;color:var(--label-2);font-variant-numeric:tabular-nums}

.rl-log{max-height:56vh;overflow:auto;background:var(--card-2)}
.rl-log .row{min-height:48px}

@media (max-width:360px){.rl-code{font-size:38px;letter-spacing:.08em}}
@media (prefers-reduced-motion:reduce){.rl-dot{animation:none}}
/* last known slide while there is no connection */
.pp-stale{opacity:.45;transition:opacity .2s}