/* remote.css: additions for the assembled site's phone remote (pairing, play-on buttons). */
.linkline { margin: 0; padding: 0 var(--s4) var(--s4); font-size: var(--t-small); color: var(--ink-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pairsteps { margin: 0 0 var(--s4); padding-left: 1.2em; color: var(--ink-2); }
.pairsteps li { margin: 4px 0; }
.pairform { display: grid; gap: var(--s3); }
.pairform input { text-transform: none; }
#paircode { text-transform: uppercase; letter-spacing: .2em; }
.castopt { cursor: default; }
.po { display: inline-flex; gap: 8px; align-items: center; }
.po-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line, rgba(127,127,127,.4)); background: var(--surface-2, transparent); color: var(--ink); display: grid; place-items: center; padding: 0; cursor: pointer; }
.po-btn svg { width: 20px; height: 20px; }
.po-btn[hidden] { display: none; }
.po-btn.live { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.po-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.po-status { margin: 6px 0 0; font-size: var(--t-small); color: var(--ink-2); }
.po-status:empty { display: none; }
/* fix carried over from museum-phone: the visually-hidden label inside the channel rail is absolutely positioned; without
   a positioned rail it escaped the rail's own scroller and widened the page to 1,311 px at 390 px. */
.rail { position: relative; }