/* Home Media on a phone.
   The same ground and accent the desktop and the television use, sized for a
   thumb: every row is a target, nothing is a tooltip, and the type stays
   large enough to read one-handed on a train. */

:root {
  --ground: #0C0D14;
  --panel: #17181F;
  --raised: #202230;
  --hairline: #272A38;
  --text: #F2F0F8;
  --muted: #A8A4BA;
  --faint: #7F7A94;
  --accent: #8A6CFF;
  --live: #E0484B;
  --radius: 14px;
  --tap: 60px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* The bar holds the name and the two places there are to be. It stays put so
   switching between them never needs a scroll back to the top. */
.bar {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: max(10px, env(safe-area-inset-top)) 16px 0;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.bar h1 {
  margin: 4px 0 10px;
  font-size: 21px;
  letter-spacing: 0.2px;
}

.tabs { display: flex; gap: 8px; }

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 10px 2px 12px;
  margin-right: 18px;
  border-bottom: 2px solid transparent;
}

.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

main { padding: 12px 12px max(20px, env(safe-area-inset-bottom)); }

.status {
  color: var(--faint);
  font-size: 15px;
  padding: 10px 4px;
  margin: 0;
}

.status[data-tone="bad"] { color: #FF9B9B; }

.list { list-style: none; margin: 0; padding: 0; }

/* One tappable row. The whole thing is the target, not the text inside it. */
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
}

.row:active { background: var(--raised); }

.row .num {
  min-width: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  font-size: 18px;
}

.row img {
  width: 48px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.row .body { min-width: 0; flex: 1; }

.row .name {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row .detail {
  display: block;
  color: var(--faint);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--live);
  color: #fff;
}

/* The player sheet. Full width on a phone, with the video at the top and the
   ways out underneath it. */
dialog#player {
  width: 100%;
  max-width: 640px;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: var(--panel);
  color: var(--text);
}

dialog#player::backdrop { background: rgba(0, 0, 0, 0.72); }

.player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}

.player-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  padding: 6px 2px;
}

dialog#player video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.player-note {
  margin: 0;
  padding: 12px 16px 0;
  color: var(--faint);
  font-size: 14px;
}

.handoff {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
}

.button {
  flex: 1 1 auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.button.quiet {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .row { transition: background-color 120ms ease; }
}