/* Lane C "Your devices" (link-devices-v023.js; unwired). Reuses .btn, .hint,
   .field-label, .code-field, .keep-warn, .keep-status and .restore-compare, so
   the Moonlight Couture milky sheet rules apply unchanged. Tokens only. */
.link-devices { display: flex; flex-direction: column; gap: 8px; }
.link-devices .btn { min-height: 48px; width: 100%; }
.link-devices .ld-row { display: flex; gap: 8px; }
.link-devices .ld-row .btn { flex: 1 1 0; }
.link-devices .ld-q { margin: 2px 0 0; font-weight: 600; color: var(--ivory); }
/* 32 characters must stay fully visible down to 360px wide (lane ACC). */
.link-devices .ld-ticket { font-size: min(14px, 3.4vw); letter-spacing: 0; text-align: center; }
.link-devices .ld-quiet { background: transparent; box-shadow: none; }
.link-devices .ld-danger { color: var(--tk-danger); border-color: rgba(var(--tk-danger-rgb, 255, 107, 125), .55); }
#app:not([data-screen="game"]) dialog.sheet .link-devices .ld-danger { color: #b3263d; background: var(--mk-card); }
.link-devices .ld-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.link-devices .ld-dev {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03);
}
#app:not([data-screen="game"]) dialog.sheet .link-devices .ld-dev { background: var(--mk-card); }
.link-devices .ld-dev-name { font-weight: 600; color: var(--ivory); }
.link-devices .ld-dev-meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.link-devices .ld-pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hot);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
.link-devices .ld-banner { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
#app:not([data-screen="game"]) dialog.sheet .link-devices .ld-banner { background: var(--mk-well); }
.link-devices .ld-banner-title { margin: 0 0 4px; font-family: var(--display); font-size: 20px; color: var(--ivory); }
/* The baseline has a milky "ok" status colour but not a milky "bad" one; the
   ink-tuned --danger is too pale on milk, so use the same deep red as .ld-danger. */
#app:not([data-screen="game"]) dialog.sheet .link-devices .keep-status[data-kind="bad"] { color: #b3263d; }
/* Phase 6: "Also unlink all" checkbox and the per-device Unlink button. */
.link-devices .ld-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--ivory); }
.link-devices .ld-check input { width: 22px; height: 22px; accent-color: #b3263d; }
.link-devices .ld-dev .ld-unlink { grid-column: 1 / -1; width: auto; min-height: 40px; justify-self: start; }