/* The masthead, typography, and colors come from the Vault's main stylesheet. */
.stream-page nav [aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.stream-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding: 2.75rem 0 2.25rem; }
.stream-intro h1 { margin-bottom: .75rem; overflow-wrap: anywhere; }
.stream-description { max-width: 660px; color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; }
.stream-intro > a { flex-shrink: 0; margin-bottom: .15rem; }
.stream-intro > a span { margin: 0 .3rem 0 0; }
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 2.5rem; align-items: start; }
.player-column { min-width: 0; }
.player-shell { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #494b45; border-top: 2px solid var(--accent); background: #101313; }
.player-shell video { display: block; width: 100%; height: 100%; object-fit: contain; background: #101313; }
.player-placeholder, .player-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; background: #1b211f; }
.player-placeholder[hidden], .player-loading[hidden] { display: none; }
.standby-symbol { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 1.4rem; color: var(--accent); border: 1px solid #4b5549; border-radius: 50%; }
.standby-symbol svg { width: 35px; height: 35px; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.player-placeholder h2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); line-height: 1.2; letter-spacing: -.025em; margin-bottom: .7rem; }
.player-placeholder p { max-width: 340px; font-size: .85rem; color: var(--muted); line-height: 1.65; }
.player-placeholder .stream-button { margin-top: 1.4rem; }
.player-loading { background: #1b211f; }
.player-loading strong { font-weight: 400; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 3vw, 1.85rem); }
.player-loading p { margin-top: .5rem; color: var(--muted); font-size: .82rem; }
.loading-spinner { width: 30px; height: 30px; margin-bottom: 1.4rem; border: 2px solid #4b5549; border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stream-button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 40px; padding: .5rem .8rem; background: transparent; color: var(--ink); border: 1px solid #55564d; border-radius: 3px; font-size: .78rem; line-height: 1.4; cursor: pointer; }
.stream-button:hover { border-color: var(--accent); background: #2b302b; }
.stream-button span { color: var(--accent); }
.stream-button.primary { background: var(--accent); border-color: var(--accent); color: #1b1c19; font-weight: 600; }
.stream-button.primary:hover { background: #dac09e; border-color: #dac09e; }
.stream-button.primary span { color: inherit; }
.player-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid #494b45; border-top: 0; background: var(--panel); }
.player-statuses { min-width: 0; }
.broadcast-label { display: flex; align-items: center; gap: .45rem; }
.broadcast-label strong { font-weight: 600; font-size: .78rem; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.player-statuses.live .state-dot { background: var(--green); }
.player-statuses.live .broadcast-label { color: var(--green); }
.system-card { display: block; margin-top: .2rem; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.action-buttons { display: flex; flex-wrap: wrap; gap: .5rem; flex-shrink: 0; }
.player-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.player-caption p { color: var(--muted); font-size: .78rem; }
.copy-link { padding: .25rem 0; color: var(--accent); background: transparent; border: 0; font-size: .78rem; cursor: pointer; flex-shrink: 0; }
.copy-link:hover { color: var(--ink); text-decoration: underline; }
.copy-link span { margin-left: .4rem; }
.stream-sidebar { padding-top: 1rem; border-top: 1px solid var(--line); }
.sidebar-section + .sidebar-section { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.sidebar-section h2 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .65rem; }
.sidebar-section p { color: var(--muted); font-size: .82rem; line-height: 1.75; }
.sidebar-section .text-link, .sidebar-section .stream-button { margin-top: .85rem; }
.sidebar-section .text-link { font-size: .78rem; }
.stream-page .site-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Keep the video contained on wide and fullscreen displays. */
.player-shell:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
body.theater .topbar, body.theater .stream-intro, body.theater .stream-sidebar, body.theater .player-caption, body.theater .site-footer { display: none; }
body.theater main { width: 100%; }
body.theater .watch-layout { display: block; }
body.theater .player-shell { aspect-ratio: auto; height: calc(100dvh - 88px); border: 0; }
body.theater .player-actions { min-height: 88px; border-inline: 0; padding-inline: max(1rem, calc((100vw - 1120px) / 2)); }

@media (max-width: 1000px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 1.75rem; }
  .player-actions { flex-wrap: wrap; }
  .player-statuses { flex: 1 1 200px; }
  .standby-symbol { width: 48px; height: 48px; margin-bottom: .9rem; }
  .standby-symbol svg { width: 29px; height: 29px; }
}
@media (max-width: 800px) {
  .watch-layout { grid-template-columns: 1fr; gap: 2rem; }
  .stream-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-top: 1.5rem; }
  .sidebar-section + .sidebar-section { border-top: 0; padding-top: 0; margin-top: 0; }
  .sidebar-section:last-child { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--line); }
  .sidebar-section:last-child h2 { font-size: 1.1rem; }
}
@media (max-width: 650px) {
  .stream-intro { align-items: flex-start; flex-direction: column; gap: 1rem; padding-block: 2rem 1.5rem; }
  .stream-intro h1 { font-size: 2.5rem; }
  .stream-description { font-size: .9rem; }
  .player-shell { aspect-ratio: auto; height: auto; min-height: 300px; }
  .player-shell video { aspect-ratio: 16 / 9; min-height: 300px; }
  .player-shell:fullscreen video { height: 100%; min-height: 0; }
  .player-placeholder { padding: 1.25rem; }
  .player-placeholder p { max-width: 270px; font-size: .8rem; }
  .player-placeholder h2 { font-size: 1.9rem; }
  .player-placeholder .stream-button { margin-top: 1rem; }
  .player-actions { padding: .85rem; gap: .8rem; }
  .player-statuses { flex-basis: 100%; }
  .action-buttons { width: 100%; }
  .action-buttons button { flex: 1; }
  .player-caption { align-items: flex-start; }
  .player-caption p { max-width: 210px; font-size: .74rem; }
  .stream-sidebar { grid-template-columns: 1fr; gap: 1.5rem; }
  .sidebar-section + .sidebar-section { padding-top: 1.25rem; border-top: 1px solid var(--line); }
  body.theater .player-shell { height: calc(100dvh - 140px); min-height: 220px; }
  body.theater .player-shell video { height: 100%; min-height: 0; }
  body.theater .player-actions { min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-spinner { animation: none; }
}

.stream-button[hidden] { display: none; }
.replay-list { list-style: none; margin: .8rem 0 0; padding: 0; max-height: 440px; overflow-y: auto; }
.replay-list li + li { margin-top: .65rem; }
.replay-button { display: block; width: 100%; padding: .8rem; text-align: left; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.replay-button:hover, .replay-button[aria-pressed="true"] { border-color: var(--accent); }
.replay-button strong, .replay-button span { display: block; overflow-wrap: anywhere; }
.replay-button strong { font-size: .82rem; line-height: 1.5; }
.replay-button span { margin-top: .35rem; color: var(--muted); font-size: .7rem; line-height: 1.6; }