/* The live page (live.html, livepage.js): the stage of the DJ tab across the whole
   window, its panels in columns under it. Dark only: a booth at night. The stage's own
   look (livestage.css) is kept; this file lays it out and gives the panels one card. */

.lp {
  --lp-bg: #0b0c0b;
  --lp-card: #121412;
  --lp-edge: rgba(255, 255, 255, 0.07);
  --lp-pad: clamp(12px, 1.6vw, 22px);
  --lp-gap: clamp(10px, 1.1vw, 16px);
  --lp-onair: #e25555;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(226, 163, 77, 0.07), transparent 60%),
    var(--lp-bg);
  color: var(--stage-ink);
  font-size: 14px;
}

/* ---------- header ---------- */
.lp-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px;
  padding: 6px var(--lp-pad);
  padding-top: max(6px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--lp-bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lp-edge);
}
.lp-mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.lp-mark i { width: 3px; background: var(--lp-onair); border-radius: 1px; animation: lp-eq 1.1s ease-in-out infinite; }
.lp-mark i:nth-child(1) { height: 60%; }
.lp-mark i:nth-child(2) { height: 100%; animation-delay: -0.35s; }
.lp-mark i:nth-child(3) { height: 75%; animation-delay: -0.7s; }
@keyframes lp-eq { 50% { transform: scaleY(0.45); } }
.lp-mark i { transform-origin: bottom; }
.lp-word { font: 600 12px var(--mono); letter-spacing: 0.06em; color: var(--ink-3); flex: none; }
.lp-onair {
  flex: none;
  font: 700 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 999px;
  color: var(--ink-3); border: 1px solid rgba(255, 255, 255, 0.16);
}
.lp-onair.is-on { color: #fff; background: var(--lp-onair); border-color: var(--lp-onair); box-shadow: 0 0 12px rgba(226, 85, 85, 0.55); }
.lp-title {
  min-width: 0; margin: 0;
  font: 600 15px/1.25 var(--sans); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-gap { flex: 1 1 0; }
.lp .conn { color: var(--ink-3); }
.lp-ext { flex: none; font: 12px var(--sans); color: var(--ink-3); text-decoration: none; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); }
.lp-ext:hover { color: var(--stage-ink); border-color: rgba(255, 255, 255, 0.3); }

/* ---------- the page ---------- */
.lp-main { max-width: none; margin: 0; padding: var(--lp-gap) var(--lp-pad) calc(var(--lp-pad) + env(safe-area-inset-bottom)); }

.lp-empty { max-width: 560px; margin: 12vh auto; text-align: center; }
.lp-empty[hidden] { display: none; }
.lp-empty-h { font: 600 20px var(--sans); }
.lp-empty-p { margin-top: 8px; color: var(--ink-3); }

/* the host the dashboard's live band builds into: none of its tab chrome here */
.lp .djlive, .lp .djlive.djlive {
  padding: 0; margin: 0; border: 0; border-radius: 0; background: none; max-width: none;
}
.lp .djlive > .dhead { display: none; }
/* the stage's root: its panels go to the cards below, it draws nothing itself */
.lp .djlive .stage {
  display: block; padding: 0; margin: 0; border-radius: 0;
  background: none; box-shadow: none; animation: none;
}

/* the deck: transport, now strip, flow -- one card across the page */
.lp-deck {
  display: grid; gap: 12px;
  padding: 12px var(--lp-pad) 12px;
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 12% -20%, rgba(226, 163, 77, 0.10), transparent 55%),
    linear-gradient(180deg, #161816, var(--stage-bg));
  box-shadow: inset 0 0 0 1px var(--lp-edge), 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: stage-in 0.45s ease-out both;
}
.lp .lp-deck .livebar { margin: 0; padding: 4px 0 10px; background: none; border-radius: 0; border-bottom: 1px solid var(--lp-edge); }
.lp .stage-flow .flow { height: clamp(190px, 26vh, 320px); }
.lp .stage-now { grid-template-columns: 6px minmax(0, 1fr) auto auto auto; }
.lp .sn-name { font-size: clamp(1.05rem, 1.4vw, 1.5rem); }

/* ---------- panels ---------- */
.lp-cols {
  display: grid; gap: var(--lp-gap);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--lp-gap);
}
.lp-col { display: grid; gap: var(--lp-gap); align-content: start; min-width: 0; }

.lp-panel, .lp .livenews {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--lp-card);
  box-shadow: inset 0 0 0 1px var(--lp-edge);
}
.lp .livenews { margin: 0; }
.lp-h {
  margin: 0 0 10px;
  font: 600 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
/* a panel whose content is off says nothing: the picks come and go, the party link opens
   from the flow's 📣 button */
.lp-panel:has(> .sn-picks[hidden]), .lp-panel:has(> .party-box[hidden]) { display: none; }

/* what was a row of the now strip stands alone in its card */
.lp-panel .sn-picks, .lp-panel .sn-timed { margin: 0; }
.lp-panel .sp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.lp-panel .sp-lab { padding-top: 0; }
.lp-panel .sp-chips { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.lp-panel .party-box { padding: 0; border: 0; background: none; }

/* the steer box: the field takes the row, the votes under it */
.lp .djlive .livesteer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; }
.lp .livesteer .kin { min-width: 0; padding: 9px 10px; font-size: 14px; color: var(--stage-ink); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); }
.lp .livesteer .solid { padding: 8px 16px; }
.lp .livesteer .ghost { padding: 8px 10px; }
.lp .livesteer .cmsg { grid-column: 1 / -1; }
.lp .livesteer > button[type="button"] { justify-self: stretch; }

/* the set log: the dashboard's folded list, open in its card */
.lp-panel.log .livemore { margin: 0; }
.lp-panel.log .livemore > summary { font-size: 13px; color: var(--stage-ink); }
.lp .djlive .liverow { flex-wrap: wrap; overflow-wrap: anywhere; }
.lp .tlwrap { overflow: hidden; }
.lp .tlcanvas { max-width: 100%; }

/* the knob card: the sticky "changed · apply" bar spans the card's own padding */
.lp .kn-dirty .kn-go { margin-inline: -14px; padding-inline: 14px; border-radius: 0 0 12px 12px; }

.lp .ghost, .lp .picker { background: transparent; color: var(--stage-ink); border-color: rgba(255, 255, 255, 0.18); }
.lp :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- widths ---------- */
/* laptop: the quick actions in a column on the left, the knobs and the rest beside */
@media (min-width: 1100px) {
  .lp-cols {
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "c a" "c b";
  }
  .lp-col-a { grid-area: a; }
  .lp-col-b { grid-area: b; }
  .lp-col-c { grid-area: c; }
}
/* a wide screen: three columns, the knobs in the middle */
@media (min-width: 1900px) {
  .lp-cols {
    /* the knobs lay out in two columns and need about 900 px to keep them apart */
    grid-template-columns: minmax(340px, 420px) minmax(900px, 1.6fr) minmax(360px, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "c a b";
  }
  .lp .stage-flow .flow { height: clamp(240px, 28vh, 380px); }
}
/* tablet: two columns of panels, the actions over the knobs */
@media (min-width: 700px) and (max-width: 1099px) {
  .lp-col-c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-col-c > .steer { grid-column: 1 / -1; }
}
/* a phone: the deck edge to edge, everything one column */
@media (max-width: 699px) {
  .lp-main { padding-inline: 0; }
  .lp-deck { border-radius: 0; padding-inline: 12px; }
  .lp-col { padding-inline: 10px; }
  .lp .stage-now { grid-template-columns: 5px minmax(0, 1fr) auto auto; }
  .lp-word { display: none; }
  .lp-top { gap: 8px; padding-inline: 12px; }
  .lp .conn { font-size: 0; }                          /* the dot stays, the word goes */
  .lp .conn::before { margin-right: 0; }
  .lp .livesteer .solid, .lp .livesteer .ghost { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-mark i, .lp-deck { animation: none; }
}