/* Token-only styling for the page-shell player. Every color, radius, font,
   and motion value comes from var(--token) — see core/brand/tokens.js for
   the complete 15-token palette. test/tokens-only.test.mjs enforces this. */

.player {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem;
  background: var(--surface-base);
  color: var(--ink);
  font-family: var(--font-body);
  border-radius: var(--radius);
  transition: background var(--motion-calm) var(--ease-settle);
}

.player__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.player__logo {
  max-height: 40px;
  max-width: 160px;
  object-fit: contain;
}

/* Text stand-in when the logo 404s — never an empty box. */
.player__logo--text {
  max-height: none;
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 1.1rem;
}

.player__scene-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0;
}

.player__status {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: 0.85rem;
  min-height: 1.2em;
}

.player__transport {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Interactive elements are identified by FILL and TEXT contrast, never by
   --line alone: --line is a decorative hairline (~1.28:1 by default) and is
   deliberately excluded from the runtime's enforced WCAG pairs. An
   outline-only control would fail WCAG 1.4.11. */
.player__play {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius);
  padding: 0.6rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: opacity var(--motion-quick) var(--ease-settle);
}

.player__play:hover { opacity: 0.9; }
.player__play:disabled { opacity: 0.5; cursor: not-allowed; }

.player__volume {
  flex: 1;
  accent-color: var(--accent);
}

.player__scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Default state: filled surface + full-contrast text, not just a --line
   border, so the control reads as interactive even with the hairline gone. */
.player__scene-btn {
  background: var(--surface-raised);
  color: var(--ink);
  border: none;
  border-radius: var(--radius);
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-settle);
}

.player__scene-btn:hover { background: var(--surface-sunken); }

/* Active state: swaps to the accent fill + accent-ink text — a second,
   independent fill/text pair, not merely a border toggle. */
.player__scene-btn[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-ink);
}

.player-fallback {
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem;
  background: var(--surface-base);
  color: var(--ink);
  font-family: var(--font-body);
  border-radius: var(--radius);
}

.player-fallback__title {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
}

.player-fallback__message {
  color: var(--ink-muted);
  margin: 0;
}

/* Demo-host tenant picker — same panel, an added list of tenant links. */
.player-fallback__tenants {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.player-fallback__tenant-link {
  display: block;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  font-family: var(--font-body);
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-settle);
}

.player-fallback__tenant-link:hover { background: var(--surface-sunken); }

@media (prefers-reduced-motion: reduce) {
  .player,
  .player__play,
  .player__scene-btn,
  .player-fallback__tenant-link {
    transition: none;
  }
}