/*
 * /dj — DJ Popstal Bollfish. Builds on pboll.css (tokens, .btn, .h2, .tag, the Music Notes):
 * hard pixel edges, multiples of --u, the PBOLL face for labels, monospace for reading.
 * Every column is minmax(0, 1fr) so nothing wide can push a phone sideways.
 */

.djpage { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 6); min-width: 0; }

.djhead { display: grid; gap: calc(var(--u) * 2); justify-items: start; }
.dj-title { color: var(--primary-fg); }
.dj-fullname { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--soft); }
.dj-lede { max-width: 60ch; }

/* ── the stage ──────────────────────────────────────────────────────────────────────────── */

.dj-stagewrap {
  position: relative; min-width: 0;
  display: flex; justify-content: center;
  background: var(--ink); border: var(--u) solid var(--line);
  box-shadow: var(--u) var(--u) 0 0 var(--ink);
  scroll-margin-top: calc(var(--u) * 6);
}
.dj-stage { max-width: 100%; height: auto; }

.dj-teaser {
  position: absolute; left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3);
  max-width: 560px; margin: 0 auto;
  display: grid; gap: calc(var(--u) * 3); justify-items: start;
  background: var(--bg); color: var(--text);
  border: var(--u) solid var(--primary); box-shadow: var(--u) var(--u) 0 0 var(--ink);
  padding: calc(var(--u) * 4);
}
.dj-teaser-title { font-family: var(--display); font-size: 20px; line-height: 1.25; color: var(--primary-fg); }
.dj-teaser-copy { font-size: 16px; line-height: 1.45; color: var(--soft); }
.dj-teaser .btn { white-space: normal; }
/* phones: just the headline and the button, so most of the show stays in view */
@media (max-width: 559px) {
  .dj-teaser { gap: calc(var(--u) * 2); padding: calc(var(--u) * 3); left: calc(var(--u) * 2); right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); }
  .dj-teaser-title { font-size: 20px; }
  .dj-teaser-copy { display: none; }
}

.dj-subtitle {
  min-height: calc(1.5em + var(--u) * 4); font-size: 16px; line-height: 1.5;
  color: var(--primary-fg); border-left: var(--u) solid var(--primary); padding: calc(var(--u) * 2) calc(var(--u) * 3);
  overflow-wrap: anywhere;
}
.dj-subtitle:empty { border-left-color: var(--line); }

.dj-controls { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 3); }
.dj-controls .btn-big { flex: 1 1 auto; }

/* Browsers only start sound after a tap, so a silent stage says so on itself (and is tappable) */
.dj-tapcue {
  position: absolute; left: 50%; bottom: calc(var(--u) * 3); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
  font-family: var(--display); font-size: 18px; line-height: 1.1;
  color: var(--ink); background: var(--yellow);
  border: var(--u) solid var(--ink); box-shadow: var(--u) var(--u) 0 0 var(--ink);
  padding: calc(var(--u) * 2) calc(var(--u) * 4); cursor: pointer; white-space: nowrap;
  animation: dj-cue 1.2s steps(2, end) infinite;
}
.dj-tapcue:hover, .dj-tapcue:focus-visible { background: var(--text); }
.dj-tapcue[hidden] { display: none; }
.dj-stagewrap.is-silent .dj-stage { cursor: pointer; }
@keyframes dj-cue { 50% { box-shadow: calc(var(--u) * 2) calc(var(--u) * 2) 0 0 var(--pink); } }
@media (prefers-reduced-motion: reduce) { .dj-tapcue { animation: none; } }
/* phones: TUNE IN / MUTE ride along at the bottom of the screen while the show and the panels
   scroll by (the page leaves room for the bar; the sync line hides: the stage cue says it) */
@media (max-width: 559px) {
  .dj-controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--bg); border-top: var(--u) solid var(--line);
    padding: calc(var(--u) * 2) calc(var(--u) * 4) calc(var(--u) * 2 + env(safe-area-inset-bottom, 0px));
    flex-wrap: nowrap;
  }
  .dj-controls .dj-sync { display: none; }
  .djpage { padding-bottom: calc(var(--u) * 22); }
}
.dj-sync { flex-basis: 100%; font-size: 14px; min-height: 1.5em; }

/* ── on the decks ───────────────────────────────────────────────────────────────────────── */

.dj-ondecks { display: grid; gap: calc(var(--u) * 3); justify-items: start; min-width: 0; }
.dj-decklist { width: 100%; display: grid; border-top: var(--u) solid var(--line); }
.dj-deck {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--u);
  padding: calc(var(--u) * 3) 0; border-bottom: var(--u) solid var(--line); min-width: 0;
}
.dj-decktag { justify-self: start; background: var(--soft); color: var(--soft-on); }
.dj-deck-a .dj-decktag { background: var(--tertiary); color: var(--tertiary-on); }
.dj-deck-b .dj-decktag { background: var(--secondary); color: var(--secondary-on); }
.dj-deck-title { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.dj-deck-from { font-size: 14px; color: var(--soft); }
.dj-layerlist { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.dj-chip {
  font-size: 14px; line-height: 1.3; padding: var(--u) calc(var(--u) * 2);
  background: var(--panel); border-left: var(--u) solid var(--text); overflow-wrap: anywhere;
}
.dj-chip b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1; margin-right: var(--u); }
.role-drums { border-left-color: var(--role-drums); }
.role-bass { border-left-color: var(--role-bass); }
.role-chords { border-left-color: var(--role-chords); }
.role-lead { border-left-color: var(--role-lead); }
.role-pad { border-left-color: var(--role-pad); }
.role-arp { border-left-color: var(--role-arp); }
.role-fx { border-left-color: var(--role-fx); }

/* ── panels ─────────────────────────────────────────────────────────────────────────────── */

.dj-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); min-width: 0; }
.dj-panel {
  display: grid; gap: calc(var(--u) * 3); align-content: start; justify-items: start; min-width: 0;
  border: var(--u) solid var(--line); padding: calc(var(--u) * 3);
}
.dj-canvasbox { width: 100%; display: flex; justify-content: center; background: var(--ink); min-width: 0; }
.dj-pcanvas { max-width: 100%; height: auto; }
.dj-panel-line { font-size: 14px; line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; min-width: 0; }
.dj-hex { font-family: var(--body); font-size: 13px; color: var(--text); overflow-wrap: anywhere; word-break: break-all; }
.dj-panel-line a { font-family: var(--display); font-size: 20px; line-height: 1; }

/* ── the room, up next, the set ─────────────────────────────────────────────────────────── */

.dj-room, .dj-next, .dj-setlist, .dj-p24, .dj-diary, .dj-archive {
  display: grid; gap: calc(var(--u) * 3); justify-items: start; min-width: 0;
}
.dj-room-line { display: grid; gap: calc(var(--u) * 2); font-size: 16px; }
.dj-room-group { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2); }
.dj-room-k { font-family: var(--display); font-size: 20px; line-height: 1; color: var(--soft); }
.dj-who { display: inline-flex; align-items: center; gap: var(--u); background: var(--panel); padding: var(--u) calc(var(--u) * 2); overflow-wrap: anywhere; }
.dj-who.is-you { background: var(--primary); color: var(--primary-on); font-family: var(--display); font-size: 20px; line-height: 1; }
.dj-who.is-anon { background: transparent; border: 2px dashed var(--line); }
.dj-av { width: 24px; height: 24px; image-rendering: pixelated; border: 2px solid var(--text); background: var(--ink); }

.dj-next-line { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; }

.dj-setlist-list { width: 100%; display: grid; border-top: var(--u) solid var(--line); }
.dj-set {
  display: grid; grid-template-columns: 6ch minmax(0, 1fr) auto; column-gap: calc(var(--u) * 3); align-items: center;
  padding: calc(var(--u) * 2) 0; border-bottom: var(--u) solid var(--line);
}
.dj-set.is-current { background: var(--panel); box-shadow: calc(var(--u) * -3) 0 0 0 var(--panel), calc(var(--u) * 3) 0 0 0 var(--panel); }
.dj-set.is-next { color: var(--soft); }
.dj-set-at { font-size: 14px; color: var(--soft); }
.dj-set-main { display: grid; min-width: 0; }
.dj-set-title { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.dj-set-meta { font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }
.dj-set-tag { background: var(--live); color: var(--live-on); }
.dj-set-tag.is-next { background: var(--secondary); color: var(--secondary-on); }

/* ── the perfect 24 ─────────────────────────────────────────────────────────────────────── */

.dj-ribbon { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--u); }
.dj-cell {
  position: relative; height: 56px; background: var(--well); border: 2px solid var(--line);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
}
.dj-cell.is-now { border-color: var(--primary); }
.dj-cell-bar { display: block; height: 0; background: var(--line); }
.dj-cell.lvl-0 .dj-cell-bar { height: 8px; background: var(--error); }
.dj-cell.lvl-1 .dj-cell-bar { height: 16px; background: var(--warn); }
.dj-cell.lvl-2 .dj-cell-bar { height: 24px; background: var(--primary); }
.dj-cell.lvl-3 .dj-cell-bar { height: 32px; background: var(--ok); }
.dj-cell.lvl-4 .dj-cell-bar { height: 40px; background: var(--secondary); }
.dj-cell-h { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 11px; line-height: 1; color: var(--soft); }

/* ── the diary ──────────────────────────────────────────────────────────────────────────── */

.dj-diary-cols { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 4); }
.dj-diary-col { border-top: var(--u) solid var(--line); padding-top: calc(var(--u) * 2); min-width: 0; }
.dj-diary-col.is-good { border-top-color: var(--ok); }
.dj-diary-col.is-bad { border-top-color: var(--error); }
.dj-diary-col.is-next { border-top-color: var(--secondary); }
.dj-diary-h { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1; margin: 0 0 calc(var(--u) * 2); }
.dj-diary-list { display: grid; gap: var(--u); font-size: 16px; line-height: 1.45; }
.dj-diary-list li::before { content: "♪ "; color: var(--primary-fg); }

/* ── the archive ────────────────────────────────────────────────────────────────────────── */

.dj-filters { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.dj-filter[aria-pressed="true"] { background: var(--primary); color: var(--primary-on); border-color: var(--ink); }
.dj-items { width: 100%; display: grid; border-top: var(--u) solid var(--line); }
.dj-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 2); justify-items: start;
  padding: calc(var(--u) * 4) 0; border-bottom: var(--u) solid var(--line); min-width: 0;
  scroll-margin-top: calc(var(--u) * 6);
}
.dj-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2) calc(var(--u) * 3); min-width: 0; }
.dj-item-title { font-family: var(--body); font-weight: 400; font-size: 18px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.dj-kind { background: var(--soft); color: var(--soft-on); }
.dj-kind.kind-loop { background: var(--ok); color: var(--ok-on); }
.dj-kind.kind-mix { background: var(--secondary); color: var(--secondary-on); }
.dj-kind.kind-mashup { background: var(--tertiary); color: var(--tertiary-on); }
.dj-kind.kind-raga { background: var(--warn); color: var(--warn-on); }
.dj-kind.kind-foh_set { background: var(--primary); color: var(--primary-on); }
.dj-item-meta, .dj-item-src { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.dj-rating { grid-column: auto; max-width: 100%; }
.dj-rating .notes-big { font-size: 20px; }
.dj-rating .rating-creator { max-width: 100%; }

@media (min-width: 360px) {
  .dj-rating .notes-big { font-size: 30px; }
}

@media (min-width: 560px) {
  .dj-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dj-controls .btn-big { flex: 0 0 auto; }
  .dj-deck { grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 3); align-items: baseline; }
  .dj-deck-from { grid-column: 2; }
}

@media (min-width: 720px) {
  .dj-ribbon { grid-template-columns: repeat(24, minmax(0, 1fr)); }
  .dj-diary-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .dj-panels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .djpage { gap: calc(var(--u) * 8); }
}

@media (prefers-reduced-motion: reduce) {
  .dj-stagewrap { scroll-behavior: auto; }
}