/* Cadence — Digital Sheet Music Management Platform
 * Copyright © DoubTech. The LICENSE file in the repo root governs use of this file.
 * Device approval layout extending the shared branded sign-in gate. Supports
 * scrollable narrow screens and accessible native scope radios and band checkboxes.
 */
.device-pair-screen { position: relative; min-height: 100dvh; overflow: auto; }
.device-pair-screen .gate-card { margin: auto; }
.device-pair-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.device-pair-page #approvalFields { display: flex; flex-direction: column; gap: 12px; }
.device-pair-page .device-scope { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.device-pair-page legend { margin-bottom: 12px; font-weight: 600; color: var(--c-text-secondary); }
.device-pair-page .device-choice { flex-direction: row; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.device-pair-page .device-choice input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--c-primary); flex-shrink: 0; }
.device-pair-page .device-scope-help { text-align: left; max-width: none; }
.device-pair-page .device-band-list { max-height: 220px; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 6px 12px; }
.device-pair-page .device-band-list[hidden], .device-pair-page .device-sign-in[hidden], .device-pair-page .device-native-return[hidden] { display: none; }
.device-pair-page #code { width: 100%; min-height: var(--control-height); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 0 14px; color: var(--c-text-primary); background: var(--c-surface); font: inherit; text-transform: uppercase; letter-spacing: .12em; }
.device-pair-page #code:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.device-pair-page .device-status { max-width: none; overflow-wrap: anywhere; }
.device-pair-page .device-sign-in, .device-pair-page .device-native-return { text-decoration: none; width: 100%; }
.device-pair-page #approveButton:disabled { opacity: .6; cursor: wait; }
@media (max-width: 460px) {
  .device-pair-screen { padding: 16px; }
  .device-pair-screen .gate-card { padding: 28px 20px; }
}

.device-pair-page .device-sign-in[aria-disabled="true"] { opacity: .6; cursor: wait; }
.device-pair-page #deviceFooter[hidden] { display: none; }