/* Take A Mic DJ board: a stage manager's clipboard and setlist on the plywood wall.
   Scoped to body[data-screen="dj"]. Fonts come from poster.css; textures from /img. */

body[data-screen="dj"] {
  --paper: #efe6cf;
  --sheet: #f7f2e6;
  --yel: #f2c230;
  --red: #ff2a4a;
  --red-dk: #b3001e;
  --xerox: #141210;
  --wall: #1c1916;
  --cream: #f3ead6;
  --board: #5b3d22;
  --wood: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --slab: "Alfa Slab One", Rockwell, "Courier New", serif;
  --mono: "Rubik Mono One", "Arial Black", sans-serif;
  --type: "Courier Prime", "Courier New", Courier, monospace;
  --hand: "Caveat Brush", "Marker Felt", "Comic Sans MS", cursive;
  color: var(--cream);
  background: var(--wall) url("/img/wall.svg");
  font-family: var(--type);
  letter-spacing: 0;
  overflow-x: clip;
}
body[data-screen="dj"] * { min-width: 0; }

/* ---------- layout: one column on phones, clipboard + side rail on desktop ---------- */
body[data-screen="dj"] .wrap {
  width: min(1320px, 100%);
  padding: calc(12px + env(safe-area-inset-top)) 14px calc(64px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
body[data-screen="dj"] .wrap > .top { grid-area: auto; }
body[data-screen="dj"] .wrap > .conn:empty { display: none; }
@media (min-width: 1000px) {
  body[data-screen="dj"] .wrap {
    padding-left: 28px;
    padding-right: 28px;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas:
      "top top"
      "conn conn"
      "hero side"
      "setlist side"
      "past side";
    column-gap: 34px;
  }
  body[data-screen="dj"] .wrap > .top { grid-area: top; }
  body[data-screen="dj"] .wrap > .conn { grid-area: conn; }
  body[data-screen="dj"] .dj-hero { grid-area: hero; }
  body[data-screen="dj"] .dj-setlist { grid-area: setlist; }
  body[data-screen="dj"] .dj-side { grid-area: side; position: sticky; top: 16px; }
  body[data-screen="dj"] .dj-past { grid-area: past; }
}

/* ---------- header: black gaffer tape strip ---------- */
body[data-screen="dj"] .top {
  margin: 0 -14px;
  padding: 12px 14px 14px;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 10px;
  border: 0;
  background: #0d0c0b;
  border-bottom: 3px solid var(--red);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
@media (min-width: 1000px) { body[data-screen="dj"] .top { margin: 0 -28px; padding: 14px 28px 16px; } }
body[data-screen="dj"] .brand {
  font: 400 1.8rem/1 var(--wood);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--red-dk);
  border: 0;
  padding: 0;
  text-decoration: none;
}
body[data-screen="dj"] .brand::before { display: none; }
body[data-screen="dj"] .brand::after {
  content: "Stage manager";
  display: inline-block;
  margin-left: 10px;
  padding: 3px 6px 2px;
  font: 400 0.62rem/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--xerox);
  background: var(--red);
  text-shadow: none;
  vertical-align: middle;
  transform: rotate(-3deg);
}
body[data-screen="dj"] .top-actions { gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-start; }
body[data-screen="dj"] .code-pill {
  font: 400 1.05rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--xerox);
  background: var(--yel);
  border: 0;
  border-radius: 0;
  padding: 9px 10px 8px;
  transform: rotate(-2deg);
}
body[data-screen="dj"] .top-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin: 0;
  padding: 0 14px;
  font: 700 0.95rem/1 var(--type);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
  background: transparent;
  border: 2px solid var(--cream);
  text-decoration: none;
}
body[data-screen="dj"] .top-actions a.tv-link {
  color: var(--xerox);
  background: var(--cream);
  border-color: var(--cream);
  box-shadow: 3px 3px 0 var(--red);
}
body[data-screen="dj"] .top-actions a.tv-link::before { content: "\25A3"; margin-right: 8px; color: var(--red-dk); }
body[data-screen="dj"] .top-actions a:hover { border-color: var(--red); }
body[data-screen="dj"] .top-actions a:focus-visible { outline: 4px solid var(--yel); outline-offset: 2px; }
body[data-screen="dj"] .conn { margin: 0; color: var(--yel); font-family: var(--type); }
@media (min-width: 600px) {
  body[data-screen="dj"] .top { flex-wrap: nowrap; }
  body[data-screen="dj"] .top-actions { justify-content: flex-end; }
}

/* ---------- headliner block: NOW SINGING gig poster ---------- */
body[data-screen="dj"] .dj-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin: 4px 0 0; }
@media (min-width: 760px) {
  body[data-screen="dj"] .dj-hero { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; gap: 26px; }
}
body[data-screen="dj"] #now.stage-card,
body[data-screen="dj"] #next.next-card {
  position: relative;
  isolation: isolate;
  margin: 0;
  border: 0;
  color: var(--xerox);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.55);
}
body[data-screen="dj"] #now.stage-card {
  padding: 0 18px 18px;
  background: var(--paper);
  transform: rotate(-0.6deg);
}
body[data-screen="dj"] #now.stage-card::before,
body[data-screen="dj"] #now.stage-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body[data-screen="dj"] #now.stage-card::before { background: url("/img/paper.svg") center / 100% 100%; opacity: 0.4; }
body[data-screen="dj"] #now.stage-card::after { background: url("/img/grain.svg"); opacity: 0.09; }
body[data-screen="dj"] #now > .eyebrow {
  margin: 0 -18px 16px;
  padding: 12px 18px 10px;
  font: 400 clamp(1.5rem, 5.4vw, 2.3rem)/1 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--red);
  border-bottom: 4px solid var(--xerox);
}
body[data-screen="dj"] #now .hero-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
body[data-screen="dj"] #now .hero-row img,
body[data-screen="dj"] #now .hero-row .ph {
  width: 112px;
  height: 112px;
  border: 4px solid var(--xerox);
  box-shadow: 5px 5px 0 var(--red-dk);
  filter: contrast(1.12) saturate(0.85);
  transform: rotate(1.5deg);
}
@media (min-width: 600px) {
  body[data-screen="dj"] #now .hero-row { grid-template-columns: 190px minmax(0, 1fr); gap: 22px; }
  body[data-screen="dj"] #now .hero-row img,
  body[data-screen="dj"] #now .hero-row .ph { width: 190px; height: 190px; }
}
body[data-screen="dj"] .ph {
  display: grid;
  place-items: center;
  font: 400 2.6rem/1 var(--wood);
  color: var(--paper);
  background: var(--xerox);
  border-radius: 0;
}
body[data-screen="dj"] .now-name {
  margin: 0;
  font: 400 clamp(2.4rem, 9vw, 4.6rem)/0.92 var(--wood);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--xerox);
  overflow-wrap: anywhere;
}
body[data-screen="dj"] .now-song {
  margin: 8px 0 0;
  font: 400 clamp(1.1rem, 3.6vw, 1.5rem)/1.15 var(--slab);
  color: var(--red-dk);
  overflow-wrap: anywhere;
}
body[data-screen="dj"] .now-artist {
  margin: 4px 0 0;
  font: 700 1.05rem/1.25 var(--type);
  color: #3a332b;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
body[data-screen="dj"] .now-len {
  display: inline-block;
  margin: 8px 0 0;
  padding: 3px 7px 2px;
  font: 700 0.95rem/1 var(--type);
  color: var(--paper);
  background: var(--xerox);
}
body[data-screen="dj"] .now-len::before { content: "\23F1  "; }
body[data-screen="dj"] #now .lede,
body[data-screen="dj"] #now .muted { margin: 10px 0 0; font: 400 1.35rem/1.2 var(--hand); color: #3a332b; }
body[data-screen="dj"] .stage-note { margin: 12px 0 0; font: 400 1.05rem/1.3 var(--type); color: #3a332b; }

/* no-show countdown: a mustard tag that turns red when it's tight */
body[data-screen="dj"] .timer {
  display: inline-block;
  margin: 16px 0 0;
  padding: 10px 14px 9px;
  font: 400 clamp(1rem, 3.6vw, 1.3rem)/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--xerox);
  background: var(--yel);
  border: 3px solid var(--xerox);
  border-radius: 0;
  transform: rotate(-1deg);
}
body[data-screen="dj"] .timer.urgent {
  color: var(--paper);
  background: var(--red);
  animation: dj-blink 0.9s steps(2, jump-none) infinite;
}
@keyframes dj-blink { 50% { background: var(--red-dk); } }

/* ---------- support act: UP NEXT handbill on mustard stock ---------- */
body[data-screen="dj"] #next.next-card {
  padding: 16px 16px 16px;
  background: var(--yel);
  transform: rotate(0.9deg);
}
body[data-screen="dj"] #next.next-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/img/grain.svg");
  opacity: 0.1;
  pointer-events: none;
}
body[data-screen="dj"] #next > .eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 10px 5px;
  font: 400 1.1rem/1 var(--mono);
  color: var(--yel);
  background: var(--xerox);
  transform: rotate(-2deg);
}
body[data-screen="dj"] .next-lockup { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; }
body[data-screen="dj"] .next-lockup img,
body[data-screen="dj"] .next-lockup .ph { width: 84px; height: 84px; border: 3px solid var(--xerox); }
body[data-screen="dj"] .next-name {
  margin: 0;
  font: 400 clamp(1.9rem, 6vw, 2.6rem)/0.95 var(--wood);
  text-transform: uppercase;
  color: var(--xerox);
  overflow-wrap: anywhere;
}
body[data-screen="dj"] #next .now-song { font-size: 1.1rem; color: var(--xerox); }
body[data-screen="dj"] #next .now-artist { color: #2c2620; font-size: 0.95rem; }
body[data-screen="dj"] #next .muted { margin: 4px 0 0; font: 400 1.5rem/1.2 var(--hand); color: #2c2620; }

/* ---------- stamp buttons ---------- */
body[data-screen="dj"] .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
body[data-screen="dj"] .actions button {
  flex: 1 1 96px;
  min-height: 58px;
  padding: 0 12px;
  font: 400 1.35rem/1 var(--wood);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--xerox);
  background: var(--red);
  border: 3px solid var(--xerox);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--xerox);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
body[data-screen="dj"] .actions button::before { margin-right: 8px; font-family: var(--mono); font-size: 0.9em; }
body[data-screen="dj"] .actions button[data-action="now"]::before { content: "\25B6" / ""; }
body[data-screen="dj"] .actions button.confirm {
  color: var(--xerox);
  background: var(--yel);
}
body[data-screen="dj"] .actions button.confirm::before { content: "\2605" / ""; }
/* Done: solid black ink, check mark */
body[data-screen="dj"] .actions button[data-action="done"] {
  color: var(--paper);
  background: var(--xerox);
  border-color: var(--xerox);
  box-shadow: 4px 4px 0 var(--red-dk);
}
body[data-screen="dj"] .actions button[data-action="done"]::before { content: "\2714" / ""; color: var(--yel); }
/* Skip: hollow red dashed stamp with an X, so it never reads like Done */
body[data-screen="dj"] .actions button.danger {
  color: var(--red-dk);
  background: transparent;
  border: 3px dashed var(--red-dk);
  box-shadow: none;
  transform: rotate(-1deg);
}
body[data-screen="dj"] .actions button.danger::before { content: "\2715" / ""; }
body[data-screen="dj"] .actions button.danger:hover { color: var(--paper); background: var(--red-dk); border-style: solid; }
body[data-screen="dj"] .actions button.putback {
  flex: 0 0 auto;
  min-height: 52px;
  color: var(--xerox);
  background: var(--paper);
  border: 3px solid var(--xerox);
  box-shadow: 3px 3px 0 var(--xerox);
  font-size: 1.15rem;
}
body[data-screen="dj"] .actions button.putback::before { content: "\21BA" / ""; }
body[data-screen="dj"] .actions button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--xerox); }
body[data-screen="dj"] .actions button.danger:active { transform: translate(2px, 2px) rotate(-1deg); }
body[data-screen="dj"] button:focus-visible { outline: 4px solid #1d4ed8; outline-offset: 3px; }
body[data-screen="dj"] button:disabled { opacity: 0.5; }

/* ---------- bump arrows ---------- */
body[data-screen="dj"] .tile-ctl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 4px;
}
body[data-screen="dj"] .tile-ctl .actions { margin-top: 12px; }
body[data-screen="dj"] .bump { display: flex; gap: 6px; margin-top: 12px; }
body[data-screen="dj"] .bump-btn,
body[data-screen="dj"] .bump-gap { width: 56px; min-height: 58px; }
body[data-screen="dj"] .bump-btn {
  display: grid;
  place-items: center;
  padding: 0;
  font: 400 1.25rem/1 var(--mono);
  color: var(--xerox);
  background: var(--sheet);
  border: 3px solid var(--xerox);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--xerox);
}
body[data-screen="dj"] .bump-btn:hover { color: var(--paper); background: var(--xerox); }
body[data-screen="dj"] .bump-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--xerox); }
body[data-screen="dj"] .bump-gap { border: 3px dotted rgba(20, 18, 16, 0.25); }

/* ---------- the setlist: a ruled sheet on a clipboard ---------- */
body[data-screen="dj"] .dj-setlist {
  position: relative;
  margin-top: 26px;
  padding: 34px 16px 18px;
  color: var(--xerox);
  background:
    linear-gradient(90deg, transparent 44px, rgba(179, 0, 30, 0.35) 44px, rgba(179, 0, 30, 0.35) 46px, transparent 46px),
    var(--sheet);
  border: 12px solid var(--board);
  border-top-width: 30px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 14px 26px rgba(0, 0, 0, 0.55);
}
/* the metal clip */
body[data-screen="dj"] .dj-setlist::before {
  content: "";
  position: absolute;
  top: -44px;
  left: 50%;
  width: 150px;
  height: 46px;
  margin-left: -75px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #d9d6cf, #8d8a84 55%, #b8b5ae);
  border: 2px solid #3d3a35;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
body[data-screen="dj"] .dj-setlist .line-title,
body[data-screen="dj"] .dj-past .past-title {
  display: inline-block;
  margin: 0 0 4px;
  padding: 0;
  font: 400 clamp(2rem, 7vw, 2.8rem)/1 var(--hand);
  letter-spacing: 0;
  text-transform: none;
  color: var(--red-dk);
  border: 0;
  transform: rotate(-2deg);
}
body[data-screen="dj"] .dj-setlist .line-title::before { content: "Setlist \2014  "; color: var(--xerox); }
body[data-screen="dj"] .line-total {
  margin: 0 0 6px;
  font: 700 1rem/1.3 var(--type);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--xerox);
}
body[data-screen="dj"] .line-total:empty { display: none; }
body[data-screen="dj"] .line-total::before { content: "\23F1  "; }

body[data-screen="dj"] #rest > .muted,
body[data-screen="dj"] #recent > .muted { margin: 10px 0 4px; font: 400 1.5rem/1.2 var(--hand); color: #4a4238; }
body[data-screen="dj"] .line-tile {
  padding: 14px 0 16px;
  border-bottom: 2px solid rgba(20, 18, 16, 0.18);
}
body[data-screen="dj"] .line-tile:last-child { border-bottom: 0; }
body[data-screen="dj"] .row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
body[data-screen="dj"] .row img,
body[data-screen="dj"] .row .ph { width: 60px; height: 60px; border: 2px solid var(--xerox); font-size: 1.8rem; }
body[data-screen="dj"] .row .eyebrow {
  margin: 0;
  font: 400 1.35rem/1 var(--hand);
  letter-spacing: 0;
  text-transform: none;
  color: var(--red-dk);
}
body[data-screen="dj"] .row .who {
  margin: 2px 0 0;
  font: 400 1.7rem/1 var(--wood);
  text-transform: uppercase;
  color: var(--xerox);
  overflow-wrap: anywhere;
}
body[data-screen="dj"] .row .song {
  margin: 3px 0 0;
  font: 700 1rem/1.25 var(--type);
  color: #2c2620;
  overflow-wrap: anywhere;
}
body[data-screen="dj"] .row .song span { display: block; font-weight: 400; color: #4a4238; text-transform: uppercase; font-size: 0.88rem; }
@media (min-width: 1000px) {
  body[data-screen="dj"] .line-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, auto);
    gap: 16px;
    align-items: center;
  }
  body[data-screen="dj"] .line-tile .tile-ctl,
  body[data-screen="dj"] .line-tile .tile-ctl .actions,
  body[data-screen="dj"] .line-tile .bump { margin-top: 0; }
  body[data-screen="dj"] .line-tile .tile-ctl { align-items: center; }
}

/* ---------- past names: the torn-off spike of done/skipped slips ---------- */
body[data-screen="dj"] .dj-past {
  position: relative;
  padding: 16px 16px 14px;
  color: var(--xerox);
  background: #e2dccb;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.5deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 94% 100%, 86% calc(100% - 6px), 74% 100%, 61% calc(100% - 7px), 48% 100%, 35% calc(100% - 6px), 22% 100%, 10% calc(100% - 7px), 0 100%);
}
body[data-screen="dj"] .dj-past .past-title { color: var(--xerox); font-size: clamp(1.7rem, 6vw, 2.2rem); }
body[data-screen="dj"] .history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 10px 0 12px;
  border-top: 2px dashed rgba(20, 18, 16, 0.3);
}
body[data-screen="dj"] .history-item .actions { margin-top: 0; }
body[data-screen="dj"] .history-item .row .who { text-decoration: line-through; text-decoration-color: var(--red-dk); text-decoration-thickness: 3px; }
body[data-screen="dj"] .history-item .row img { filter: grayscale(1) contrast(1.2); }
@media (max-width: 480px) {
  body[data-screen="dj"] .history-item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body[data-screen="dj"] .history-item .actions { margin-top: 10px; }
  body[data-screen="dj"] .history-item .actions button.putback { flex: 1 1 auto; }
}

/* ---------- side rail: no-show timer tag + room QR handbill ---------- */
body[data-screen="dj"] .dj-side { display: grid; gap: 24px; align-content: start; }
body[data-screen="dj"] .noshow {
  margin: 0;
  padding: 14px 16px 16px;
  color: var(--xerox);
  background: var(--paper);
  border: 0;
  border-left: 10px solid var(--red);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transform: rotate(0.6deg);
}
body[data-screen="dj"] .noshow legend {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  font: 400 1.05rem/1.1 var(--mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--xerox);
}
body[data-screen="dj"] .noshow legend::after {
  content: "Skip a no-show after";
  display: block;
  margin-top: 4px;
  font: 400 1.2rem/1.1 var(--hand);
  text-transform: none;
  color: var(--red-dk);
}
body[data-screen="dj"] .choices { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body[data-screen="dj"] .choices button {
  min-height: 58px;
  padding: 0 6px;
  font: 400 1.25rem/1 var(--mono);
  letter-spacing: 0;
  color: var(--xerox);
  background: var(--sheet);
  border: 3px solid var(--xerox);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--xerox);
}
body[data-screen="dj"] .choices button[aria-pressed="true"] {
  color: var(--yel);
  background: var(--xerox);
  box-shadow: 3px 3px 0 var(--red);
  transform: rotate(-2deg);
}
body[data-screen="dj"] .room-qr {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 14px;
  color: var(--xerox);
  background: var(--sheet);
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transform: rotate(-0.8deg);
}
body[data-screen="dj"] .room-qr .qr-svg { background: #fff; padding: 6px; border: 3px solid var(--xerox); }
body[data-screen="dj"] .room-qr .qr-svg svg { display: block; width: 100%; height: auto; max-width: none; }
body[data-screen="dj"] .room-qr .eyebrow { margin: 0; font: 400 1.05rem/1 var(--mono); color: var(--red-dk); text-transform: uppercase; }
body[data-screen="dj"] .room-qr .lede { margin: 6px 0; font: 400 1.35rem/1.1 var(--hand); color: var(--xerox); }
body[data-screen="dj"] .room-qr .qr-url { margin: 0; font: 700 0.85rem/1.3 var(--type); color: #2c2620; overflow-wrap: anywhere; }
@media (min-width: 1000px) {
  body[data-screen="dj"] .room-qr { grid-template-columns: minmax(0, 1fr); text-align: center; }
  body[data-screen="dj"] .room-qr .qr-svg { width: 220px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-screen="dj"] .timer.urgent { animation: none; }
  body[data-screen="dj"] .actions button,
  body[data-screen="dj"] .bump-btn { transition: none; }
  body[data-screen="dj"] .actions button:active,
  body[data-screen="dj"] .actions button.danger:active,
  body[data-screen="dj"] .bump-btn:active { transform: none; }
}

/* ---------- fixes: beat the base #rest/#recent row rule, keep stamps on one line ---------- */
body[data-screen="dj"] #rest .row,
body[data-screen="dj"] #recent .row { padding: 0; margin: 0; border: 0; border-radius: 0; }
body[data-screen="dj"] .actions button { flex: 1 1 auto; white-space: nowrap; }
body[data-screen="dj"] .top .brand { display: inline-flex; align-items: center; min-height: 52px; }
body[data-screen="dj"] #now.stage-card::before { opacity: 0.28; }