.sets-heading { align-items: center; }
.sets-page .live-footer { font-size: .75rem; }
.sets-page .sets-status { max-width: 26rem; padding: .55rem .8rem; border: 1px solid var(--line); color: var(--muted); background: rgb(7 7 8 / 45%); font-size: .78rem; }
.sets-page .sets-status[data-state="error"], .sets-page .sets-status[data-state="deleted"] { border-color: var(--red-dark); color: #ffaaaa; }
.sets-layout { display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); align-items: start; gap: 1.1rem; }
.sets-list-panel, .sets-player-panel { min-width: 0; border: 1px solid var(--line); background: rgb(16 16 18 / 92%); }
.sets-panel-heading, .sets-player-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.sets-count { color: var(--quiet); font-size: .75rem; white-space: nowrap; }
.sets-list { display: grid; gap: 0; max-height: 68vh; margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.set-row { border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row-button { display: grid; width: 100%; min-height: 68px; grid-template-columns: 2.3rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 0; border-left: 1px solid transparent; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }
.set-row-button:hover, .set-row-button[aria-current="true"] { background: var(--panel-raised); }
.set-row-button[aria-current="true"] { border-left-color: var(--red); background: var(--panel-raised); }
.set-row-index { color: var(--red); font-family: var(--brand); font-size: 1.35rem; }
.set-row-date { min-width: 0; color: var(--ink); font-size: .82rem; font-weight: 650; overflow-wrap: anywhere; }
.set-row-duration { color: var(--quiet); font-size: .75rem; white-space: nowrap; }
.sets-state-row { padding: 1.4rem 1rem; color: var(--muted); font-size: .83rem; }
.sets-state-row strong { display: block; margin-bottom: .35rem; color: var(--ink); font-size: .95rem; }
.sets-list-actions { display: flex; justify-content: center; padding: .75rem; border-top: 1px solid var(--line); }
.sets-player-heading { align-items: center; }
.sets-player-title-wrap { min-width: 0; }
.sets-player-heading h2 { overflow-wrap: anywhere; }
.selected-date { flex: 0 0 auto; color: var(--muted); font-size: .75rem; text-align: right; }
.sets-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #020203; }
.sets-video-frame video { display: block; width: 100%; height: 100%; background: #020203; object-fit: contain; }
.sets-player-message { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .25rem; padding: 1rem; text-align: center; background: rgb(7 7 8 / 94%); }
.sets-player-message .placeholder-label { margin: 0; }
.sets-player-message .placeholder-copy { margin: 0; }
.sets-player-tools { display: grid; gap: .55rem; padding: 1rem; border-top: 1px solid var(--line); }
.jump-label { color: var(--muted); font-size: .75rem; font-weight: 650; }
#time-jump { width: 100%; min-height: 44px; margin: .15rem 0; accent-color: var(--red); cursor: pointer; }
#time-jump:disabled { cursor: not-allowed; }
.jump-meta, .sets-player-footer { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.jump-meta { flex-wrap: wrap; }
#jump-readout { flex: 1 1 12rem; }
/* Crowd reactions over the set, drawn in the reaction red right above the timeline. */
.hype-bar { display: flex; align-items: flex-end; gap: 1px; height: 28px; margin-bottom: -.4rem; cursor: pointer; }
/* Pops up while playback passes the moment where the hype bar is full. */
.hype-goat { position: absolute; top: 44%; left: 50%; height: 56%; border: 2px solid var(--red); box-shadow: 0 0 24px rgb(242 54 54 / 45%); transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none; animation: hype-goat-in .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes hype-goat-in { from { transform: translate(-50%, -50%) scale(0) rotate(-24deg); } }
@media (prefers-reduced-motion: reduce) { .hype-goat { animation: none; } }
.hype-bar span { flex: 1 1 0; min-width: 1px; height: calc(var(--level) * 100%); min-height: 2px; background: var(--red); opacity: calc(.3 + var(--level) * .7); }
#jump-readout { color: var(--quiet); font-size: .75rem; font-variant-numeric: tabular-nums; }
.sets-player-footer { min-height: 2rem; padding-top: .55rem; border-top: 1px solid var(--line); color: var(--quiet); font-size: .75rem; }
.sets-player-footer span { min-width: 0; overflow-wrap: anywhere; }
.share-link { min-height: 44px; display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0; border: 0; background: transparent; color: var(--cyan); font-size: .75rem; font-weight: 700; cursor: pointer; }
.sets-page .live-header .home-link, .sets-page .sets-list-actions .control-button, .sets-page .sets-player-panel .control-button { font-size: .75rem; }
.share-link:hover { color: var(--ink); }
.sets-list-panel :focus-visible, .sets-player-panel :focus-visible { outline-color: var(--focus); }

.share-dialog { width: min(30rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; overflow-y: auto; border: 1px solid var(--line); color: var(--ink); background: var(--panel); color-scheme: dark; }
.share-dialog::backdrop { background: rgb(0 0 0 / 80%); }
.share-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.share-heading h2 { margin: 0; font-size: 1.25rem; }
#share-description { margin: 1rem 0; color: var(--muted); font-size: .875rem; }
.share-option { display: flex; align-items: center; gap: .75rem; min-height: 48px; cursor: pointer; }
.share-option input { width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; accent-color: var(--cyan); }
.share-option input[role="switch"] { appearance: none; position: relative; width: 2.5rem; height: 1.5rem; border: 1px solid var(--muted); border-radius: 999px; background: var(--black); cursor: pointer; }
.share-option input[role="switch"]::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--muted); }
.share-option input[role="switch"]:checked { border-color: var(--cyan); background: var(--cyan); }
.share-option input[role="switch"]:checked::before { transform: translateX(1rem); background: var(--black); }
.share-dialog .control-button { font-size: .875rem; }
#share-time { font-variant-numeric: tabular-nums; }
.share-note { margin: .35rem 0 1rem; color: var(--muted); font-size: .8125rem; }
.share-url-label { display: block; margin: 1.25rem 0 .5rem; font-size: .875rem; }
.share-url { width: 100%; min-height: 44px; padding: .65rem; border: 1px solid var(--line); color: var(--ink); background: var(--black); font-size: .875rem; caret-color: var(--cyan); }
.share-url::selection { color: var(--black); background: var(--cyan); }
#copy-share { width: 100%; margin-top: .75rem; color: var(--black); background: var(--cyan); }
#copy-share:hover { background: var(--ink); }
#share-feedback { min-height: 2.9em; margin: .75rem 0 0; }

@media (max-width: 900px) {
  .sets-layout { grid-template-columns: minmax(0, 1fr); }
  .sets-list { max-height: 42vh; }
  .sets-player-panel { grid-row: 1; }
}

@media (max-width: 640px) {
  .sets-heading { align-items: start; }
  .sets-status { width: 100%; max-width: none; }
  .sets-panel-heading, .sets-player-heading { padding: .8rem; }
  .sets-list { max-height: 36vh; }
  .set-row-button { min-height: 64px; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .5rem; padding: .72rem .65rem; }
  .set-row-date { font-size: .76rem; }
  .set-row-duration { font-size: .75rem; }
  .selected-date { max-width: 9.5rem; font-size: .75rem; }
  .sets-player-tools { padding: .8rem; }
  .sets-player-footer { align-items: start; flex-direction: column; gap: .2rem; }
  .share-link { min-height: 44px; }
}