/*
 * The livestream editor (js/livestream-editor.js), on the organiser page and
 * in admin. Its colours come from whichever page it is on: admin's --admin-*
 * tokens, or the site's tokens from css/app.css.
 */
.lse {
  --lse-surface: var(--admin-surface, var(--panel-2, #fff));
  --lse-field: var(--admin-surface, var(--panel, #fff));
  --lse-soft: var(--admin-surface-soft, var(--chip, #eef3f4));
  --lse-line: var(--admin-border-strong, var(--line-strong, rgba(16, 35, 38, .16)));
  --lse-ink: var(--admin-text, var(--ink, #102326));
  --lse-muted: var(--admin-muted, var(--muted, #5d7175));
  --lse-accent: var(--admin-primary, var(--accent, #0f766e));
  --lse-accent-ink: var(--accent-ink, #fff);
  --lse-warn: var(--admin-danger, var(--warn, #c2410c));
  --lse-warn-soft: var(--admin-danger-soft, var(--warn-soft, rgba(255, 90, 20, .12)));
  display: grid;
  gap: 14px;
  color: var(--lse-ink);
  font-size: 14px;
}
.lse a { color: inherit; text-underline-offset: 2px; }
.lse h3 { margin: 0 0 4px; font-size: 17px; }
.lse h4 { margin: 0; font-size: 15px; }
.lse p { margin: 0; }

.lse-panel {
  padding: 16px;
  border-radius: 14px;
  background: var(--lse-surface);
  box-shadow: inset 0 0 0 1px var(--lse-line);
}
.lse-note, .lse-empty {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--lse-soft);
  color: var(--lse-muted);
  font-size: 13px;
}
.lse-head p, .lse-card-text p { color: var(--lse-muted); font-size: 13px; line-height: 1.5; }

/* Fields: a small label above a roomy input. */
.lse-field { display: grid; gap: 4px; min-width: 0; }
.lse-field > span { color: var(--lse-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lse input[type="text"], .lse input[type="url"], .lse input[type="search"], .lse input[type="time"], .lse input[type="date"], .lse textarea {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--lse-line);
  border-radius: 10px;
  background: var(--lse-field);
  color: var(--lse-ink);
  font: inherit;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.lse textarea { height: auto; min-height: 64px; padding: 9px 10px; resize: vertical; line-height: 1.4; }
.lse input:focus, .lse textarea:focus { outline: none; border-color: var(--lse-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lse-accent) 22%, transparent); }
.lse input[type="time"] { font-variant-numeric: tabular-nums; }
.lse input[type="time"]::-webkit-calendar-picker-indicator, .lse input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
/* Stage names are suggested while typing; no dropdown arrow on the field. */
.lse input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* Buttons. */
.lse-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--lse-line); border-radius: 999px;
  background: var(--lse-field); color: var(--lse-ink);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lse-btn:hover { background: var(--lse-soft); }
.lse-btn.is-primary { border-color: var(--lse-accent); background: var(--lse-accent); color: var(--lse-accent-ink); }
.lse-btn.is-primary:hover { background: color-mix(in srgb, var(--lse-accent) 86%, #000); }
.lse-btn:disabled { opacity: .45; cursor: default; }
.lse-btn[hidden] { display: none; }

/* The card on the livestream page, with an on/off switch. */
.lse-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.lse-thumb { display: block; width: 88px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--lse-soft); }
.lse-card-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-top: 14px; }
.lse-card.is-off .lse-card-fields { opacity: .55; }
.lse-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 13px; user-select: none; }
.lse-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lse-switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--lse-line); transition: background .15s; }
.lse-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.lse-switch input:checked + .lse-switch-track { background: var(--lse-accent); }
.lse-switch input:checked + .lse-switch-track::after { transform: translateX(18px); }
.lse-switch input:focus-visible + .lse-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lse-accent) 30%, transparent); }

/* Streams, grouped per day. */
.lse-head { margin-bottom: 6px; }
.lse-day { padding: 12px 0 4px; border-top: 1px solid var(--lse-line); }
.lse-head + .lse-day { border-top: 0; }
.lse-day-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lse-day-head > span { color: var(--lse-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.lse-day-head .lse-btn { margin-left: auto; height: 32px; padding: 0 12px; }
.lse-none { color: var(--lse-muted); font-size: 13px; padding: 4px 0 10px; }

.lse-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(180px, 1.8fr) 124px 124px 36px;
  gap: 8px 10px;
  align-items: end;
  margin-bottom: 8px;
  padding: 10px 12px 8px;
  border-radius: 12px;
  background: var(--lse-soft);
}
.lse-row:has(.lse-date) { grid-template-columns: 150px minmax(130px, 1fr) auto minmax(180px, 1.8fr) 124px 124px 36px; }
.lse-row.is-invalid { box-shadow: inset 3px 0 0 var(--lse-warn); }
.lse-row-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.lse-row-foot:empty { display: none; }
.lse-badge, .lse-problem { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--lse-field); color: var(--lse-muted); box-shadow: inset 0 0 0 1px var(--lse-line); }
.lse-badge.is-ok { color: var(--lse-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lse-accent) 40%, transparent); }
.lse-problem { color: var(--lse-warn); background: var(--lse-warn-soft); box-shadow: none; }
.lse-problem.is-soft { color: var(--lse-muted); background: var(--lse-field); box-shadow: inset 0 0 0 1px var(--lse-warn-soft); }

/* Video or audio as a two-way switch. */
.lse-seg { display: inline-flex; height: 40px; padding: 3px; border-radius: 10px; background: var(--lse-field); box-shadow: inset 0 0 0 1px var(--lse-line); }
.lse-seg button { padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--lse-muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.lse-seg button[aria-pressed="true"] { background: var(--lse-accent); color: var(--lse-accent-ink); }

.lse-remove {
  width: 36px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: var(--lse-muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.lse-remove:hover { background: var(--lse-warn-soft); color: var(--lse-warn); }

/* Confirming a save, in the page rather than a browser dialog. */
.lse-confirm {
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--lse-accent) 10%, var(--lse-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lse-accent) 45%, transparent);
}
.lse-confirm ul { margin: 6px 0; padding-left: 18px; }
.lse-confirm p { color: var(--lse-muted); font-size: 13px; }
.lse-confirm-actions { display: flex; gap: 8px; }

/* Save stays in reach while scrolling a long list. */
.lse-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--lse-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--lse-line);
}
.lse-state { margin-right: auto; color: var(--lse-muted); font-size: 13px; }
.lse-state.is-dirty { color: var(--lse-ink); font-weight: 700; }

/* Small variants. */
.lse-btn.is-small { height: 32px; padding: 0 12px; font-size: 13px; }
.lse-seg.is-small { height: 34px; }
.lse-seg.is-small button { padding: 0 10px; font-size: 12.5px; }
.lse-remove.is-small { width: 30px; height: 30px; font-size: 19px; }
.lse-link-btn { justify-self: start; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--lse-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lse-link-btn:hover { color: var(--lse-ink); }
.lse-check { display: inline-flex; align-items: center; gap: 6px; color: var(--lse-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; user-select: none; }
.lse-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--lse-accent); }

/* The timetable's stages, to drag into the live page. */
.lse-palette { display: grid; gap: 10px; margin: 4px 0 14px; padding: 12px; border-radius: 12px; background: var(--lse-soft); }
.lse-palette-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; }
.lse-palette-head b { display: block; font-size: 13.5px; }
.lse-palette-head span { color: var(--lse-muted); font-size: 12.5px; }
.lse .lse-palette-find { height: 34px; font-size: 14px; max-width: 280px; }
.lse-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lse-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--lse-line); border-radius: 999px; background: var(--lse-field); color: var(--lse-ink);
  font: inherit; font-size: 13px; font-weight: 700; cursor: grab;
}
.lse-chip::before { content: "⠿"; color: var(--lse-muted); font-size: 12px; letter-spacing: -1px; }
.lse-chip:hover { border-color: var(--lse-accent); }
.lse-chip:active { cursor: grabbing; }
.lse-chip.is-more { cursor: pointer; color: var(--lse-muted); }
.lse-chip.is-more::before { content: none; }
.lse-palette-done { color: var(--lse-muted); font-size: 13px; }
.lse-palette-other { display: flex; gap: 6px; max-width: 420px; }
.lse .lse-palette-other input { height: 32px; font-size: 13.5px; }

/* The live page: a line per stage, a column per day. */
.lse-grid-wrap { position: relative; overflow-x: auto; border-radius: 12px; outline: 2px dashed transparent; outline-offset: 2px; transition: outline-color .15s, background .15s; }
.lse-live.is-dragging .lse-grid-wrap { outline-color: color-mix(in srgb, var(--lse-accent) 45%, transparent); }
.lse-grid-wrap.is-over { outline-color: var(--lse-accent); background: color-mix(in srgb, var(--lse-accent) 6%, transparent); }
.lse-drop-hint { display: none; padding: 10px; color: var(--lse-accent); font-size: 13px; font-weight: 700; text-align: center; }
.lse-live.is-dragging .lse-drop-hint { display: block; }
.lse-drop-empty {
  display: grid; gap: 4px; place-items: center; padding: 34px 16px; border: 2px dashed var(--lse-line); border-radius: 12px;
  color: var(--lse-muted); text-align: center;
}
.lse-drop-empty b { color: var(--lse-ink); font-size: 15px; }
.lse-grid-wrap.is-over .lse-drop-empty { border-color: var(--lse-accent); color: var(--lse-accent); }

.lse-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.lse-grid th, .lse-grid td { padding: 8px; vertical-align: top; text-align: left; border-bottom: 1px solid var(--lse-line); }
.lse-grid thead th { position: sticky; top: 0; padding-top: 4px; background: var(--lse-surface); font-weight: 400; white-space: nowrap; }
.lse-grid thead th b { display: block; font-size: 14px; }
.lse-grid thead th span { color: var(--lse-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lse-grid-corner { color: var(--lse-muted); font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; vertical-align: bottom !important; }
.lse-grid-corner, .lse-line-head { position: sticky; left: 0; z-index: 1; background: var(--lse-surface); }
.lse-line-head { width: 250px; min-width: 230px; font-weight: 400; box-shadow: 1px 0 0 var(--lse-line); }
.lse-line-head.is-invalid { box-shadow: inset 3px 0 0 var(--lse-warn), 1px 0 0 var(--lse-line); }
.lse-line-top { display: flex; gap: 4px; align-items: center; }
.lse .lse-line-stage { height: 36px; font-weight: 700; }
.lse-line-opts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px; }
.lse .lse-line-link, .lse .lse-cell-link { height: 34px; margin-top: 6px; font-size: 13.5px; }
.lse-cell { min-width: 180px; }
.lse-cell.is-invalid { box-shadow: inset 0 -2px 0 var(--lse-warn); }
.lse-cell.is-invalid .lse-cell-link { border-color: var(--lse-warn); }
.lse-cell .lse-cell-link { margin-top: 0; }
.lse-cell-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; }
.lse-cell-note { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lse-cell-note:empty { display: none; }
.lse-cell-add {
  width: 100%; min-height: 40px; padding: 0 10px;
  border: 1px dashed var(--lse-line); border-radius: 10px; background: transparent; color: var(--lse-muted);
  font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.lse-cell.is-playing .lse-cell-add { color: var(--lse-ink); border-color: color-mix(in srgb, var(--lse-accent) 45%, var(--lse-line)); }
.lse-cell-add:hover { border-style: solid; border-color: var(--lse-accent); color: var(--lse-accent); }
.lse-time-chip {
  height: 30px; padding: 0 10px; border: 0; border-radius: 999px;
  background: var(--lse-soft); color: var(--lse-ink);
  font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.lse-time-chip:hover, .lse-time-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--lse-accent); }
.lse-time-chip.is-own { background: color-mix(in srgb, var(--lse-accent) 14%, var(--lse-field)); color: var(--lse-accent); }
.lse-time-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 10px; background: var(--lse-soft); }
.lse-time-edit input[type="time"] { height: 34px; font-size: 14px; }
.lse-time-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

@media (max-width: 760px) {
  .lse-card-head { grid-template-columns: minmax(0, 1fr) auto; }
  .lse-thumb { display: none; }
  .lse-card-fields { grid-template-columns: 1fr; }
  .lse-row, .lse-row:has(.lse-date) { grid-template-columns: 1fr 1fr 36px; }
  .lse-row > .lse-date { grid-column: 1 / 3; }
  .lse-row > .lse-stage { grid-column: 1 / 3; }
  .lse-row > .lse-remove { grid-column: 3; grid-row: 1; }
  .lse-row > .lse-kind { grid-column: 1 / -1; }
  .lse-row > .lse-link { grid-column: 1 / -1; }
  .lse-row > .lse-time:nth-of-type(1) { grid-column: 1; }
  .lse-grid, .lse-grid tbody, .lse-grid tr, .lse-grid th, .lse-grid td { display: block; width: auto; min-width: 0; }
  .lse-grid thead { display: none; }
  .lse-grid tr.lse-line { margin-bottom: 10px; border: 1px solid var(--lse-line); border-radius: 12px; overflow: hidden; }
  .lse-line-head { position: static; box-shadow: none; background: var(--lse-soft); }
  .lse-grid td { border-bottom: 1px solid var(--lse-line); }
  .lse-grid td:last-child { border-bottom: 0; }
  .lse-grid td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--lse-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .lse-palette-other { max-width: none; }
}

/* ---------- Admin > Livestreams > Schedule (js/admin-livestream-schedule.js) ---------- */
.lss { gap: 12px; }
.lss-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lss .lss-search { flex: 1 1 14rem; max-width: 320px; height: 34px; font-size: 14px; }
.lss-hint { color: var(--lse-muted); font-size: 12.5px; line-height: 1.45; }
.lss-day > h4 { margin: 6px 0 6px; color: var(--lse-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.lss-list { margin: 0; padding: 0; list-style: none; border-radius: 12px; background: var(--lse-surface); box-shadow: inset 0 0 0 1px var(--lse-line); overflow: hidden; }
.lss-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; padding: 9px 12px; }
.lss-row + .lss-row { border-top: 1px solid var(--lse-line); }
.lss-row.is-live { box-shadow: inset 3px 0 0 var(--lse-accent); }
.lss-row.is-hidden .lss-main, .lss-row.is-hidden .lss-time { opacity: .55; }
.lss-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.lss-main { min-width: 0; }
.lss-main b { display: block; overflow-wrap: anywhere; }
.lss-main small { display: block; color: var(--lse-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.lss-badges, .lss-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.lss-danger { color: var(--lse-warn); }
.lss-row-form { grid-column: 1 / -1; padding-top: 6px; }
.lss-form { display: grid; gap: 10px; }
.lss-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.lss-fields .lss-wide { grid-column: 1 / -1; }
.lss select, .lss input[type="datetime-local"] {
  width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--lse-line); border-radius: 10px;
  background: var(--lse-field); color: var(--lse-ink); font: inherit; font-size: 15px; box-sizing: border-box;
}
.lss-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lss-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; color: var(--lse-muted); font-size: 12.5px; }
@media (max-width: 640px) {
  .lss-row { grid-template-columns: 72px minmax(0, 1fr); }
  .lss-badges, .lss-actions { grid-column: 1 / -1; justify-content: flex-start; }
}