/* Browser demo only: the "Get the app" button and window. */
.top-hud .hud-btn.demo-get {
  background: var(--ui-accent); border-color: transparent; color: #fff; font-weight: 700;
  width: auto; padding: 0 14px; gap: 8px;
}
.top-hud .hud-btn.demo-get:hover { filter: brightness(1.12); background: var(--ui-accent); }
.top-hud .hud-btn.demo-get span { display: inline; }
.hud-btn.demo-get .icon { fill: none; }
@media (max-width: 480px) {
  .top-hud .hud-btn.demo-get { padding: 0 10px; font-size: 12.5px; }
}

/* The library window only shows the demo's own contents. */
body.web-demo #plex-modal .plex-dialog > :not(.panel-head):not(.demo-get-body) { display: none !important; }
.demo-get-body { display: flex; flex-direction: column; gap: 12px; }
.demo-get-body p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ui-muted); }
.demo-get-body p strong { color: var(--ui-text); }
.demo-store {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 16px; border-radius: 12px;
  background: var(--ui-raise); border: 1px solid var(--ui-line); color: var(--ui-text); text-decoration: none;
}
.demo-store:hover { background: var(--ui-raise-hover); border-color: rgba(255, 255, 255, 0.2); }
.demo-store small { font-size: 11.5px; color: var(--ui-muted); }
.demo-store strong { font-size: 16px; }
.demo-site { align-self: center; font-size: 13px; color: var(--ui-muted); }
.demo-note { color: var(--ui-text); }

/* Settings that only make sense with a real library. */
body.web-demo #btn-open-rentals { display: none; }

.demo-stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }

/* Phones are the demo's main visitors: the welcome note sits under the top
   bar, clear of the sticks, and the name under the dot stays on one line. */
body.web-demo.touch .welcome-card {
  position: fixed; top: 112px; left: 10px; right: 10px; bottom: auto; max-width: 460px; margin: 0 auto; z-index: 30;
}
@media (max-height: 520px) {
  body.web-demo.touch .welcome-card { top: 62px; }
}
@media (max-width: 760px) {
  body.web-demo.touch #hover-tooltip .meta { display: none; }
}