/*
 * The livestream pages: the overview at /livestream, the event live pages
 * (Defqon.1, Tomorrowland, Lost Lands), the bare popup player and the chat
 * moderator view. Colours come from the tokens in css/app.css and the parts
 * from css/ui.css. This file adds what only these pages need: the player, the
 * stream rows with their stage stripe, the stream chat and the stage
 * timetables that the page scripts render. --stage-color is data: the page
 * scripts set it from the stage or channel.
 */

/* ---------- buttons and tags the page scripts render ---------- */
.site-main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border-radius: 17px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; list-style: none;
}
.site-main .btn::-webkit-details-marker { display: none; }
.site-main .btn-soft, .site-main .btn-secondary { background: var(--chip); color: var(--ink); }
.site-main .btn-soft:hover, .site-main .btn-secondary:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.site-main .btn.is-active, .site-main .btn[aria-pressed="true"] { background: var(--ink); color: var(--app); }
.site-main .btn:disabled { opacity: .5; cursor: default; }
.site-main .btn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.defqon-pill, .tml-pill, .defqon-picked-badge {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  background: var(--chip); color: var(--muted);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; white-space: nowrap;
  vertical-align: 1px;
}
.defqon-pill[data-state="live"], .tml-pill[data-state="live"], .defqon-picked-badge,
.livestream-card .pill.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- the overview at /livestream ---------- */
.livestream-event-panel:not(:has(.livestream-event-card:not([hidden]):not([data-live-card-listed="false"]))) { display: none; }
.livestream-event-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.livestream-event-card { padding: 0; gap: 0; overflow: hidden; }
.livestream-event-card[hidden], .livestream-event-card[data-live-card-listed="false"] { display: none; }
.livestream-event-card-media { display: block; aspect-ratio: 1200 / 630; background: var(--chip); }
.livestream-event-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.livestream-event-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px; }
.livestream-event-card-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.livestream-event-card .card-foot { padding-top: 8px; }

.livestream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 8px; align-items: start; }
.livestream-grid > .empty { grid-column: 1 / -1; }
.livestream-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 12px 15px; border-radius: 14px;
  background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--stage, var(--line-strong)), inset 0 0 0 1px var(--line-strong);
}
.livestream-card[data-live="true"] { --stage: var(--accent); }
.livestream-card-topline { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.livestream-card-topline .pill { margin-left: 0; }
.livestream-stage-name {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase;
}
.livestream-event-name, .livestream-time { margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.livestream-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- an event live page ---------- */
.ls-live [id] { scroll-margin-top: 16px; }
.ls-head { margin-bottom: 18px; }
.ls-head .summary { margin: 14px 0 0; }

/* Phone: jump links to the parts of the page, kept in reach while scrolling. */
.ls-jump { display: none; }
@media (max-width: 820px) {
  .ls-jump {
    position: sticky; top: 8px; z-index: 15;
    display: flex; margin: 0 0 16px; padding: 3px; border-radius: 12px;
    background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .ls-jump a {
    flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: 9px;
    color: inherit; font-size: 12.5px; font-weight: 600; text-align: center; text-decoration: none;
  }
  .ls-jump a:hover { background: var(--chip); }
  .ls-live [id] { scroll-margin-top: 64px; }
}

/* The player: a header row with the tools, then one or more players. */
/* One grid holds the player, the streams and the chat: stacked on a phone,
   the chat beside them on a laptop, and the streams, player and chat side by
   side on a wide screen. */
.ls-stage {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "player" "streams" "chat";
  gap: 28px; align-items: start;
}
.ls-stage > .ls-player { grid-area: player; }
.ls-stage > .ls-selector { grid-area: streams; min-width: 0; }
.ls-stage > .ls-chat { grid-area: chat; }
@media (min-width: 1024px) {
  .ls-stage {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 420px);
    grid-template-areas: "player chat" "streams chat"; gap: 28px 24px;
  }
  .ls-stage > .ls-chat { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1600px) {
  .ls-stage {
    grid-template-columns: clamp(320px, 20vw, 420px) minmax(0, 1fr) clamp(320px, 20vw, 420px);
    grid-template-areas: "streams player chat";
  }
  .ls-stage > .ls-selector {
    position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
    margin-right: -6px; padding-right: 6px;
  }
}
.ls-player { position: relative; min-width: 0; }
.ls-player-head {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px;
  margin-bottom: 12px;
}
.ls-player-head > div:first-child { flex: 1 1 18rem; min-width: 0; }
.ls-player-title {
  margin: 6px 0 2px;
  font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.defqon-player-meta, .tml-player-meta { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ls-player-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tools: a small menu that opens under the player header. */
.ls-tools > summary { list-style: none; }
.ls-tools[open] > summary { background: var(--ink); color: var(--app); }
.ls-tools-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: min(380px, 100%);
  display: flex; flex-direction: column; gap: 0;
  border-radius: 14px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow);
}
.ls-tools-panel > * { margin: 0; padding: 12px 14px; }
.ls-tools-panel > * + * { border-top: 1px solid var(--line-strong); }
.ls-tools-panel > :empty { display: none; }
.defqon-command-actions, .tml-command-actions, .defqon-preset-row, .tml-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-tools-panel select {
  height: 34px; max-width: 100%; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); padding: 0 6px; font: inherit; font-size: 13px;
}
.ls-tools-panel #reminderStatus,
.defqon-command-status, .tml-command-status { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ls-tools-panel > .defqon-reminder-controls + #reminderStatus,
.ls-tools-panel > .tml-reminder-controls + #reminderStatus { padding-top: 0; border-top: 0; }
.ls-tools-panel > #reminderStatus:empty { display: none; }

/* The players. Several streams sit side by side once there is room. */
.ls-frame {
  position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px;
}
.ls-frame[data-empty="true"] { display: block; }
.defqon-player-fallback, .tml-player-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: clamp(160px, 24vw, 260px); padding: 24px 18px;
  color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center;
}
.ls-frame[data-empty="true"] > .defqon-player-fallback,
.ls-frame[data-empty="true"] > .tml-player-fallback { border-radius: 16px; border: 1px dashed var(--line-strong); }
.defqon-player-card, .tml-player-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.defqon-player-card-head, .tml-player-card-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 10px 12px 10px 15px;
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent));
}
.defqon-player-card-head > div:first-child, .tml-player-card-head > div:first-child { flex: 1 1 12rem; min-width: 0; }
.defqon-player-card-head h3, .tml-player-card-head h3 {
  margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.05; text-transform: uppercase;
}
.defqon-player-card-head .defqon-player-meta, .tml-player-card-head .tml-player-meta { font-size: 12px; }
.defqon-player-card-actions, .tml-player-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.defqon-player-card-frame, .tml-player-card-frame {
  position: relative; aspect-ratio: 16 / 9; min-height: 220px; background: var(--chip);
}
.defqon-player-card-frame iframe, .tml-player-card-frame iframe {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0;
}
.defqon-player-card-frame > .defqon-player-fallback,
.tml-player-card-frame > .tml-player-fallback { position: absolute; inset: 0; min-height: 0; }
/* One stream: the stream's own name is already in the header above, so its
   buttons move under the player. */
.ls-frame > .defqon-player-card:only-child .defqon-player-card-head,
.ls-frame > .tml-player-card:only-child .tml-player-card-head { order: 2; justify-content: flex-end; box-shadow: none; padding-left: 12px; }
.ls-frame > .defqon-player-card:only-child .defqon-player-card-head > div:first-child,
.ls-frame > .tml-player-card:only-child .tml-player-card-head > div:first-child { display: none; }

/* Dragging a stream onto the player. */
.ls-player.is-drop-target .ls-frame { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 14px; }
.ls-player.is-drop-target .ls-frame::after {
  content: "Drop stream here";
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center;
  border-radius: 14px; background: color-mix(in srgb, var(--app) 82%, transparent);
  color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 20px; text-transform: uppercase;
  pointer-events: none;
}
body.defqon-stream-dragging .ls-frame iframe,
body.tml-stream-dragging .ls-frame iframe { pointer-events: none; }
.defqon-stream-card.is-dragging, .tml-stream-card.is-dragging { opacity: .55; }

.ls-selector .section-lede { margin-bottom: 12px; }

/* Search, stage filter and time zone. */
.ls-search-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.ls-search-row > .field { flex: 1 1 100%; }
.ls-search-row > .defqon-search-results, .ls-search-row > .tml-search-results { flex: 1 1 100%; }
.ls-search-row .field > span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ls-search-row input[type="search"] { min-height: 42px; }

.defqon-search-results, .tml-search-results { display: flex; flex-direction: column; gap: 6px; }
.defqon-search-result, .tml-search-result {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 10px 9px 13px; border-radius: 12px; background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)), inset 0 0 0 1px var(--line-strong);
}
.defqon-search-result strong, .tml-search-result strong { display: block; font-size: 14px; line-height: 1.2; }
.defqon-search-result span, .tml-search-result span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.defqon-search-more, .tml-search-more { margin: 0; color: var(--muted); font-size: 12.5px; }

.defqon-stage-filter-menu > summary, .tml-stage-filter-menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 17px;
  background: var(--chip); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap;
  cursor: pointer; list-style: none;
}
.defqon-stage-filter-menu > summary::-webkit-details-marker,
.tml-stage-filter-menu > summary::-webkit-details-marker,
.ls-drawer > summary::-webkit-details-marker,
.defqon-timetable-summary::-webkit-details-marker { display: none; }
.defqon-stage-filter-menu[open] > summary, .tml-stage-filter-menu[open] > summary { background: var(--ink); color: var(--app); }
.defqon-stage-filter-count, .tml-stage-filter-menu > summary > span + span { opacity: .75; font-variant-numeric: tabular-nums; }
.defqon-stage-filter-popover, .tml-stage-filter-popover {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 20;
  width: min(340px, 100%); max-height: min(420px, 70vh); overflow: auto;
  border-radius: 14px; background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow);
}
.defqon-stage-filter-actions, .tml-stage-filter-actions { display: flex; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--line-strong); }
.defqon-stage-filter-action, .tml-stage-filter-action { color: var(--accent); font-weight: 600; font-size: 13px; }
.defqon-stage-filter-options, .tml-stage-filter-options { display: flex; flex-direction: column; }
.defqon-stage-filter-option, .tml-stage-filter-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13.5px; cursor: pointer;
}
.defqon-stage-filter-option + .defqon-stage-filter-option,
.tml-stage-filter-option + .tml-stage-filter-option { border-top: 1px solid var(--line-strong); }
.defqon-stage-filter-option input, .tml-stage-filter-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* Day and weekend choice: chips. */
.ls-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ls-filter-row:empty { display: none; }
.ls-filter-row button, .site-main .ls-filter-row .btn {
  min-height: 32px; height: auto; padding: 5px 12px; border-radius: 16px;
  border: 1px solid var(--line-strong); background: none; color: inherit;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ls-filter-row button:hover { background: var(--chip); }
.ls-filter-row button.is-active, .site-main .ls-filter-row .btn.is-active { background: var(--ink); color: var(--app); border-color: var(--ink); }

/* Phone: the stream list folds away under "Browse stages". */
.ls-drawer > summary { display: none; }
@media (max-width: 820px) {
  .ls-drawer > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
    font-weight: 600; cursor: pointer; list-style: none;
  }
  .ls-drawer > summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; }
  .ls-drawer[open] > summary { margin-bottom: 8px; }
  .ls-drawer[open] > summary::after { content: "−"; }
}

/* The stream rows: stage stripe, what plays now and next, and the button. */
.ls-stream-list { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.defqon-stream-card, .tml-stream-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: 12px 12px 12px 15px; border-radius: 14px; background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)), inset 0 0 0 1px var(--line-strong);
}
.defqon-stream-card[draggable="true"], .tml-stream-card[draggable="true"] { cursor: grab; }
.tml-stream-card { grid-template-areas: "top" "now" "act"; }
.tml-stream-card > .tml-card-top { grid-area: top; }
.tml-stream-card > .tml-now-box { grid-area: now; }
.tml-stream-card > .tml-card-actions { grid-area: act; }
@container (min-width: 520px) {
  .defqon-stream-card { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .tml-stream-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top act" "now now"; align-items: start; }
}
.defqon-card-top { display: flex; flex-wrap: wrap; gap: 4px; }
.tml-card-top .tml-pill + .tml-pill { margin-left: 2px; }
.defqon-stage-title, .tml-stage-title {
  margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase;
}
.defqon-card-meta, .tml-card-meta, .tml-stage-note, .defqon-stage-genre, .tml-timetable-meta {
  margin: 2px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45;
}
.tml-stage-note { margin-top: 4px; }
/* The stage description is shown with the stage's timetable further down. */
.defqon-stream-card .defqon-stage-genre { display: none; }
.defqon-card-actions, .tml-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.defqon-card-actions:empty { display: none; }
@container (min-width: 520px) {
  .defqon-card-actions, .tml-card-actions { justify-content: flex-end; }
  .defqon-card-actions { min-width: 144px; }
  .tml-card-actions { flex-direction: column; align-items: stretch; }
}

.defqon-stream-now { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.defqon-stream-now-row,
.defqon-stream-now[data-state="loading"],
.defqon-stream-now[data-state="done"],
.tml-now-box {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "tag what left" "tag when when";
  column-gap: 8px; align-items: baseline;
  padding: 8px 10px; border-radius: 10px; background: var(--chip);
}
.defqon-stream-now-row .defqon-card-top,
.defqon-stream-now[data-state="loading"] > .defqon-card-top,
.defqon-stream-now[data-state="done"] > .defqon-card-top { display: contents; }
.defqon-stream-now .defqon-card-top .defqon-pill {
  grid-area: tag; justify-self: start; padding: 0; background: none; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; line-height: 1.3; white-space: normal;
}
.defqon-stream-now .defqon-card-top .defqon-pill[data-state="live"] { color: var(--accent); }
.defqon-time-pill { grid-area: left; color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.defqon-time-pill[data-state="live"] { color: var(--accent); }
.defqon-stream-now strong, .tml-now-box strong { grid-area: what; min-width: 0; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.defqon-stream-now-meta { grid-area: when; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.defqon-stream-now-meta .defqon-picked-badge { margin-left: 4px; }
.defqon-stream-now-row.is-secondary { background: none; padding-block: 2px; }
.tml-now-box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "what" "when"; }
.tml-now-box .tml-card-meta { grid-area: when; margin: 2px 0 0; font-size: 12px; }

/* ---------- stream chat ---------- */
.ls-chat { margin-bottom: 0; }
.defqon-chat-head, .tml-chat-head { padding: 14px; }
.ls-chat-title { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-transform: uppercase; }
.defqon-chat-head-actions, .tml-chat-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.defqon-chat-status, .tml-chat-status { flex: 1 1 100%; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.defqon-chat-status[data-tone="error"], .tml-chat-status[data-tone="error"] { color: var(--warn); }
.defqon-chat-panel[data-open="false"] :is(.defqon-chat-rules, .defqon-chat-tabs, .defqon-chat-messages, .defqon-chat-form),
.tml-chat-panel[data-open="false"] :is(.tml-chat-rules, .tml-chat-tabs, .tml-chat-messages, .tml-chat-form) { display: none; }
.defqon-chat-rules, .tml-chat-rules { border-top: 1px solid var(--line-strong); }
.defqon-chat-rules summary, .tml-chat-rules summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 14px; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
}
.defqon-chat-rules summary::-webkit-details-marker, .tml-chat-rules summary::-webkit-details-marker { display: none; }
.defqon-chat-rules summary::after, .tml-chat-rules summary::after { content: "+"; color: var(--muted); font-size: 17px; line-height: 1; }
.defqon-chat-rules[open] summary::after, .tml-chat-rules[open] summary::after { content: "−"; }
.defqon-chat-rules ul, .tml-chat-rules ul { margin: 0; padding: 0 14px 12px 32px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.defqon-chat-tabs, .tml-chat-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line-strong);
}
.defqon-chat-tabs:empty, .tml-chat-tabs:empty { display: none; }
.defqon-chat-tabs button, .tml-chat-tabs button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 15px;
  border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 600;
}
.defqon-chat-tabs button::before, .tml-chat-tabs button::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--stage-color, var(--accent)); flex: none;
}
.defqon-chat-tabs button.is-active, .tml-chat-tabs button.is-active { background: var(--ink); color: var(--app); border-color: var(--ink); }
.defqon-chat-messages, .tml-chat-messages {
  display: flex; flex-direction: column;
  height: min(52vh, 380px); overflow: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--line-strong);
}
.defqon-chat-empty, .tml-chat-empty { margin: auto 0; padding: 20px 16px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
.defqon-chat-message, .tml-chat-message { padding: 9px 14px; }
.defqon-chat-message + .defqon-chat-message, .tml-chat-message + .tml-chat-message { border-top: 1px solid var(--line); }
.defqon-chat-message-head, .tml-chat-message-head {
  display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
.defqon-chat-author, .tml-chat-author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-weight: 700; }
.defqon-chat-author > span:last-child, .tml-chat-author > span:last-child { overflow-wrap: anywhere; }
.defqon-chat-dot, .tml-chat-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--chat-user-color, var(--accent)); }
.defqon-chat-message p, .tml-chat-message p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.defqon-chat-mod-actions, .tml-chat-mod-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.defqon-chat-mod-actions button, .tml-chat-mod-actions button { color: var(--accent); font-size: 12px; font-weight: 600; }
.defqon-chat-form, .tml-chat-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
  padding: 10px 14px 14px; border-top: 1px solid var(--line-strong);
}
.defqon-chat-form input, .tml-chat-form input {
  min-width: 0; min-height: 40px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); padding: 0 12px; font: inherit; font-size: 16px;
}
.defqon-chat-form input:disabled, .tml-chat-form input:disabled { opacity: .7; }
.defqon-chat-form .btn, .tml-chat-form .btn { min-height: 40px; border-radius: 12px; }

/* ---------- what is on next, per stage ---------- */
.ls-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.ls-section-head > div:first-child { flex: 1 1 20rem; min-width: 0; }
.ls-section-head .section-lede { margin-bottom: 0; }
.ls-stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; align-items: start; }
.ls-stage-grid > .defqon-empty, .ls-stage-grid > .tml-empty { grid-column: 1 / -1; }
.defqon-timetable-stage, .tml-timetable-stage {
  min-width: 0; border-radius: 14px; background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)), inset 0 0 0 1px var(--line-strong);
}
.tml-timetable-stage { padding: 12px 12px 6px 15px; }
.defqon-timetable-summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 15px; list-style: none; cursor: pointer;
}
.defqon-timetable-summary > .defqon-pill[data-state="stage"] { display: none; }
.defqon-timetable-summary-text { flex: 1; min-width: 0; }
.defqon-timetable-summary h3 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.05; text-transform: uppercase;
}
.defqon-timetable-summary-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.defqon-timetable-stage-body { padding: 0 12px 6px 15px; }
.defqon-timetable-stage-body .defqon-stage-genre { margin: 0 0 6px; }
@media (max-width: 820px) {
  .defqon-timetable-summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; }
  .defqon-timetable-stage[open] .defqon-timetable-summary::after { content: "−"; }
}
.tml-timetable-stage .tml-stage-title { margin-top: 6px; font-size: 19px; }
.defqon-set-list, .tml-set-list { margin: 6px 0 0; padding: 0; list-style: none; }
.defqon-set-list li, .tml-set-list li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 7px 0; font-size: 13.5px; line-height: 1.35;
}
.defqon-set-list li + li, .tml-set-list li + li { border-top: 1px solid var(--line-strong); }
.defqon-set-time, .tml-set-time { color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.defqon-set-name, .tml-set-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.tml-set-stage { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.defqon-set-list li.is-picked .defqon-set-name, .tml-set-list li.is-picked .tml-set-name { color: var(--accent); }
/* Sets that are over: quieter, but still readable. */
.defqon-set-list li.is-finished .defqon-set-name, .tml-set-list li[data-broadcast-state="done"] .tml-set-name { color: var(--muted); font-weight: 500; }
.tml-set-list li[data-broadcast-state="live"] .tml-set-time { color: var(--accent); }
/* The Couch Lands broadcast is one long list: it takes the full width and
   flows into columns when there is room. */
.ls-stage-grid > .tml-broadcast-stage { grid-column: 1 / -1; }
.tml-broadcast-stage .tml-set-list { column-width: 300px; column-gap: 28px; }
.tml-broadcast-stage .tml-set-list li { break-inside: avoid; border-top: 1px solid var(--line-strong); }

.defqon-empty, .tml-empty {
  padding: 22px 18px; border-radius: 14px; border: 1px dashed var(--line-strong);
  color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: center;
}

/* ---------- listener history (admins only) ---------- */
.ls-history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.defqon-history-card, .tml-history-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px 12px 12px 15px; border-radius: 14px; background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)), inset 0 0 0 1px var(--line-strong);
}
.defqon-history-card h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; line-height: 1.05; }
.defqon-history-meta, .tml-history-card span { margin: 0; color: var(--muted); font-size: 12px; }
.defqon-history-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.defqon-history-stats div { padding: 6px 8px; border-radius: 9px; background: var(--chip); }
.defqon-history-stats dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.defqon-history-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.defqon-history-bars { display: flex; align-items: flex-end; gap: 2px; height: 48px; }
.defqon-history-bars span { flex: 1 1 0; min-width: 1px; border-radius: 2px 2px 0 0; background: var(--stage-color, var(--accent)); }
.ls-history .actions { margin-bottom: 14px; }

/* ---------- the popup player (livestream-player.html) ---------- */
.ls-popup-page, .ls-popup-page body { height: 100%; }
.ls-popup-page body { margin: 0; overflow: hidden; background: var(--app); }
.ls-popup {
  height: 100vh; height: 100dvh; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.ls-popup-head {
  min-width: 0; padding: 10px 14px 10px 17px;
  border-bottom: 1px solid var(--line-strong);
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent));
}
.ls-popup-head h1 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-popup-head p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-frame { position: relative; min-height: 0; overflow: hidden; }
.player-frame > .empty { margin: 16px; }
.player-frame.is-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px;
  align-content: start; overflow: auto; padding: 10px;
}
.popup-stream-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 14px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.popup-stream-head { padding: 9px 12px 9px 15px; box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)); }
.popup-stream-head strong { display: block; font-size: 14px; line-height: 1.25; }
.popup-stream-head span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.popup-stream-frame { position: relative; aspect-ratio: 16 / 9; min-height: 200px; background: var(--chip); }
.popup-stream-frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.popup-stream-frame > .empty { position: absolute; inset: 10px; display: grid; place-items: center; padding: 16px; }
/* One stream fills the window. */
.player-frame:not(.is-grid) .popup-stream-card { position: absolute; inset: 0; border-radius: 0; box-shadow: none; background: none; }
.player-frame:not(.is-grid) .popup-stream-head { display: none; }
.player-frame:not(.is-grid) .popup-stream-frame { flex: 1; aspect-ratio: auto; min-height: 0; }

/* ---------- the chat moderator view ---------- */
.ls-mod .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.ls-mod .page-head > div:first-child { flex: 1 1 24rem; min-width: 0; }
.ls-mod .page-head .actions { margin-top: 0; }
.mod-panel { display: flex; flex-direction: column; gap: 14px; }
.chat-moderator-shell .day-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-moderator-shell .day-tabs button,
.chat-moderator-shell .chat-view-controls button,
.chat-moderator-shell .chat-controls button {
  min-height: 30px; padding: 4px 11px; border-radius: 15px; border: 1px solid var(--line-strong);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chat-moderator-shell .day-tabs button { min-height: 32px; padding-inline: 12px; font-size: 13px; }
.chat-moderator-shell :is(.day-tabs, .chat-view-controls, .chat-controls) button:hover { background: var(--chip); }
.chat-moderator-shell button.is-active,
.chat-moderator-shell button.is-control-active { background: var(--ink); color: var(--app); border-color: var(--ink); }
.chat-moderator-shell :is(.day-tabs, .chat-view-controls, .chat-controls) button.is-active:hover,
.chat-moderator-shell :is(.day-tabs, .chat-view-controls, .chat-controls) button.is-control-active:hover { background: var(--ink); }
.chat-moderator-shell button:disabled { opacity: .5; cursor: default; }
.chat-view-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chat-view-controls > span { margin-right: 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mod-status { min-height: 20px; margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.mod-status[data-tone="error"] { color: var(--warn); }
.mod-status[data-tone="ok"] { color: var(--accent); }
.stats-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.stats-grid:empty { display: none; }
.stats-grid .stat { padding: 5px 10px; border-radius: 999px; background: var(--chip); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stats-grid .stat strong { margin-right: 4px; color: var(--ink); font-size: 14px; }
.chat-grid {
  --chat-message-box-height: 500px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; align-items: start;
}
.chat-grid > .empty { grid-column: 1 / -1; }
.chat-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 14px; background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)), inset 0 0 0 1px var(--line-strong);
}
.chat-card.is-composing { box-shadow: inset 3px 0 0 var(--stage-color, var(--accent)), inset 0 0 0 2px var(--accent); }
.chat-card-head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 12px 10px 15px; border-bottom: 1px solid var(--line-strong); }
.chat-card-head > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 4px; }
.chat-card h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.chat-card small { color: var(--muted); font-size: 12px; font-weight: 600; }
.chat-card-head > div:last-child > small:first-child { flex-basis: 100%; text-align: right; }
.chat-badge { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--chip); color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chat-badge.is-closed, .chat-badge.is-full { background: var(--warn-soft); color: var(--ink); }
.active-chat-label { display: none; }
.chat-card.is-composing .active-chat-label { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.chat-controls { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 10px 15px; border-bottom: 1px solid var(--line-strong); }
.chat-state-controls, .slowmode-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.slowmode-controls > span { margin-right: 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chat-moderator-shell .chat-controls button[data-clear-chat] { color: var(--warn); }
.chat-warning { padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); font-size: 12.5px; font-weight: 600; }
.chat-card .messages {
  display: flex; flex-direction: column;
  height: var(--chat-message-box-height); overflow: auto; overscroll-behavior: contain;
}
.chat-card .messages > .empty { margin: 12px; padding: 22px 14px; }
.message { padding: 8px 12px 8px 15px; }
.message + .message { border-top: 1px solid var(--line); }
.message.is-actions-open { background: var(--chip); }
.message-head { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.message-head[data-toggle-message-actions-key] { cursor: pointer; }
.author-button { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-size: 12.5px; font-weight: 700; text-align: left; }
.author-button > span:last-child { overflow-wrap: anywhere; }
.author-button:hover > span:last-child, .author-button[aria-expanded="true"] > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.author-button .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--user-color, var(--accent)); }
.message p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
.mod-actions[hidden] { display: none; }
.mod-actions button { color: var(--accent); font-size: 12.5px; font-weight: 600; }
.mod-actions button[data-delete-message-id], .mod-actions button[data-ban-user-id] { color: var(--warn); }
.mod-action-note { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px 12px 15px; border-top: 1px solid var(--line-strong); }
.chat-composer input {
  min-width: 0; min-height: 40px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); padding: 0 12px; font: inherit; font-size: 15px;
}
.chat-composer button {
  min-height: 40px; padding: 0 16px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700;
}
.confirm-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px;
  background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow);
}
.confirm-dialog::backdrop { background: var(--scrim); }
.confirm-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.confirm-card h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.confirm-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.confirm-hint { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: right; text-transform: uppercase; }