/* The XM app (xm.html): the Music tab's SiriusXM view with its own header
   and sign-in. Everything else comes from app.css and radio.css. */

/* The header names the app on every width; the portal's hides the word on a
   phone to make room for its tabs, and this one has no tabs. */
body.app-xm header { gap: 12px; padding: 0 16px; }
body.app-xm header .brand { display: flex; }
body.app-xm .brand span { display: inline; font-size: 18px; letter-spacing: 0.02em; }

.xm-install {
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--accent-dim); background: rgb(90 169 255 / .12); color: var(--fg);
  font: inherit; font-size: 14px; font-weight: 620; white-space: nowrap; cursor: pointer;
}
.xm-install[hidden] { display: none; }
@media (pointer: coarse) { .xm-install { min-height: 44px; } }
@media (hover: hover) and (pointer: fine) {
  .xm-install:hover { background: rgb(90 169 255 / .22); }
}

/* Sign-in and connection screens: one centered column. */
.xm-signin {
  max-width: 360px; margin: max(24px, 8vh) auto 0; padding: 0 8px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.xm-signin h3 { margin: 4px 0 0; font-size: 22px; font-weight: 700; }
.xm-signin-icon { display: block; border-radius: 16px; }
.xm-signin-glyph { color: var(--muted); }
.xm-signin-lead { margin: 0; color: var(--muted); font-size: 15px; }
.xm-signin-form { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; text-align: left; }
.xm-signin-label { font-size: 13px; font-weight: 600; color: var(--muted); }
/* 16px or larger, or iOS zooms the page when the field takes focus. */
input.xm-pin {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 16px;
  font-size: 24px; letter-spacing: 0.3em; text-align: center;
}
.xm-signin-go { min-height: 48px; font-size: 16px; }
.xm-signin-note { margin: 0; min-height: 1.45em; font-size: 14px; color: var(--muted); text-align: center; }
.xm-signin-note.bad { color: var(--bad); }

/* Live now sits under the stations (radio.js), on a phone and a tablet in
   portrait. */
body.app-xm .radio-side .radio-live-sec { margin-top: 20px; }

/* Locked, the page is only the sign-in: no mini player under it. */
body.xm-locked #dock { display: none; }