/* ============================================================================
   FREQ1C — VOID.FM · room.css  (Listening Room — BOOST THE SIGNAL)
   ADDITIVE layer. Styles only the DOM room.js injects into #view-room.
   Uses the :root tokens from styles.css verbatim. Sharp corners are LAW.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   SHELL
   ------------------------------------------------------------------------- */
.room{ display: block; }

/* SIGNAL WEAK banner (read-only mode) */
.room-banner{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--spark);
  border: 1px dashed var(--line-strong);
  border-left: 2px solid var(--spark);
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.room-banner__sub{ color: var(--text-dim); display: block; margin-top: var(--s-1); }

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
.room-hero__lead{
  max-width: 62ch;
  color: var(--text);
  font-size: var(--fs-h3);
  line-height: var(--lh-body);
  margin: 0 0 var(--s-5);
}
.room-hero__status{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  border-top: var(--border);
  border-bottom: var(--border);
  padding: var(--s-3) 0;
}
.room-countdown{
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  color: var(--text-dim);
}
.room-countdown__cycle{ color: var(--text-mute); }
.room-countdown__time{
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}
.room[data-sealed="true"] .room-countdown__time{ color: var(--spark); }

/* Callsign chip — station-ID card treatment */
.room-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  border: var(--border-frame);
  background: linear-gradient(90deg, var(--accent-dim), transparent 70%);
  padding: var(--s-2) var(--s-3);
}
.room-chip::before{
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.room-chip.is-amber{ animation: room-amber 900ms var(--ease) 1; }

/* ---------------------------------------------------------------------------
   PIPELINE RAIL — locked / mastering / scheduled / on_air
   ------------------------------------------------------------------------- */
.room-rail{
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rail-card{
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
  background: var(--surface);
  border: var(--border);
}
.rail-card__coverwrap{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.rail-card__cover{ width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.2); }
.rail-card[data-status="on_air"] .rail-card__cover{ filter: none; }
.rail-card__cap{ padding: var(--s-3); display: grid; gap: var(--s-2); }
.rail-card__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--text);
}
.rail-card__meta{ color: var(--text-mute); font-size: var(--fs-micro); }
.rail-card__you{ color: var(--spark); font-size: var(--fs-micro); }

/* Stamped state badge */
.rail-card__badge{
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  font-size: var(--fs-micro);
  color: var(--text);
  background: rgba(5,5,10,0.82);
  border: 1px solid var(--accent);
  transform: rotate(-3deg);
}
.rail-card[data-status="on_air"] .rail-card__badge{
  color: var(--spark);
  border-color: var(--spark);
}
.rail-card[data-status="scheduled"] .rail-card__badge{ border-color: var(--accent-hover); }

/* ---------------------------------------------------------------------------
   THE BOARD — grid of on_board cards
   ------------------------------------------------------------------------- */
.room-board{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--grid-gap);
}
.room-card{
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease-bloom);
}
.room-card:hover{ border-color: var(--accent-dim); box-shadow: var(--glow-tile); }
.room-card.is-amber{ animation: room-amber 900ms var(--ease) 1; }

/* cover + interrupt overlay */
.room-card__coverwrap{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg-2); }
.room-card__cover{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* test-pattern placeholder when there is no cover */
.room-testpattern{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(
    90deg,
    #11111A 0 14.28%,
    #1C1C28 14.28% 28.56%,
    rgba(138,107,255,0.28) 28.56% 42.84%,
    #0B0B12 42.84% 57.12%,
    rgba(240,163,94,0.22) 57.12% 71.4%,
    #1C1C28 71.4% 85.68%,
    #11111A 85.68% 100%
  );
}
.room-testpattern span{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
  background: rgba(5,5,10,0.85);
  border: var(--border);
  padding: var(--s-1) var(--s-2);
}

.room-card__interrupt{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-2);
  text-align: center;
  padding: var(--s-4);
  background: rgba(5,5,10,0.88);
}
.room-card__interrupt[hidden]{ display: none; }
.room-card__interrupt-head{ color: var(--spark); font-weight: 700; }
.room-card__interrupt-sub{ color: var(--text); font-size: var(--fs-sm); max-width: 24ch; }

/* body */
.room-card__body{ display: grid; gap: var(--s-3); padding: var(--s-4); flex: 1; align-content: start; }
.room-card__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--text);
}
.room-card__meta{ color: var(--text-mute); }

/* --- band meter: 4-segment VU --- */
.room-band{ display: flex; align-items: center; gap: var(--s-3); }
.room-band__segs{ display: inline-flex; gap: 3px; }
.room-band__segs i{
  width: 18px; height: 10px;
  background: var(--elevated);
  border: 1px solid var(--line);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.room-band[data-band="strong"] .room-band__segs i:nth-child(-n+4),
.room-band[data-band="rising"] .room-band__segs i:nth-child(-n+3),
.room-band[data-band="faint"]  .room-band__segs i:nth-child(-n+2){
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.room-band[data-band="strong"] .room-band__segs i:nth-child(4){ background: var(--accent-hover); }
.room-band[data-band="static"] .room-band__segs i:nth-child(1){
  background: var(--text-mute);
  border-color: var(--line-strong);
  box-shadow: none;
}
.room-band__label{ color: var(--text-dim); }
.room-band[data-band="strong"] .room-band__label{ color: var(--accent-hover); }

/* VU slam on boost */
.room-card.is-slam .room-band__segs i{ animation: room-vu-slam 320ms var(--ease-out) 1; }
.room-card.is-slam .room-band__segs i:nth-child(2){ animation-delay: 40ms; }
.room-card.is-slam .room-band__segs i:nth-child(3){ animation-delay: 80ms; }
.room-card.is-slam .room-band__segs i:nth-child(4){ animation-delay: 120ms; }
@keyframes room-vu-slam{
  0%{ transform: scaleY(1); }
  35%{ transform: scaleY(2.1); background: var(--accent-hover); box-shadow: 0 0 14px var(--accent-glow); }
  100%{ transform: scaleY(1); }
}

/* sealed: bands hide behind static */
.room[data-sealed="true"] .room-band__segs{ position: relative; }
.room[data-sealed="true"] .room-band__segs i{
  background: var(--elevated) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  background-image: repeating-linear-gradient(0deg,
    rgba(242,242,247,0.16) 0 1px, transparent 1px 3px) !important;
  animation: room-static 400ms steps(4) infinite;
}
.room[data-sealed="true"] .room-band__label{ color: var(--spark); }
@keyframes room-static{
  0%{ opacity: 0.85; } 50%{ opacity: 0.55; } 100%{ opacity: 0.85; }
}

/* --- test transmission player --- */
.room-play{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: var(--border);
  padding: var(--s-3);
  cursor: pointer;
  text-align: left;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.room-play:hover,
.room-card.is-playing .room-play{
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-dim);
}
.room-progress{
  height: 3px;
  background: var(--line);
  overflow: hidden;
}
.room-progress i{
  display: block;
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 220ms linear;
}
.room-card.is-interrupted .room-progress i{ background: var(--spark); }

/* --- BOOST THE SIGNAL --- */
.room-boost{
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-dim);
  border: var(--border-accent);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.room-boost:hover:not(:disabled){
  color: #fff;
  background: rgba(138,107,255,0.30);
  box-shadow: var(--glow-soft);
}
.room-boost:active:not(:disabled){ transform: translateY(1px) scale(0.99); }
.room-boost:disabled{
  color: var(--text-mute);
  background: transparent;
  border-color: var(--line-strong);
  cursor: not-allowed;
  box-shadow: none;
}
.room-card.is-slam .room-boost{ animation: room-boost-slam 300ms var(--ease-out) 1; }
@keyframes room-boost-slam{
  0%{ transform: translateY(0); }
  30%{ transform: translateY(2px) scale(0.98); box-shadow: 0 0 34px -6px var(--accent-glow); }
  100%{ transform: translateY(0); }
}
@keyframes room-amber{
  0%{ box-shadow: 0 0 0 0 rgba(240,163,94,0); }
  30%{ box-shadow: 0 0 46px -4px rgba(240,163,94,0.75); border-color: var(--spark); }
  100%{ box-shadow: 0 0 0 0 rgba(240,163,94,0); }
}
.room-card.is-amber .room-boost{ border-color: var(--spark); color: var(--spark); }

.room-feedback{
  min-height: 1.2em;
  color: var(--accent-hover);
  font-size: var(--fs-micro);
}
.room-feedback.is-amber{ color: var(--spark); }
.room-feedback.is-bad{ color: var(--text-dim); }

/* --- post-boost reception report + relay (slide open) --- */
.room-report,
.room-relay{
  overflow: hidden;
  border-top: var(--border);
  padding-top: var(--s-3);
  display: grid;
  gap: var(--s-2);
  animation: room-slide 260ms var(--ease-out);
}
.room-report[hidden],
.room-relay[hidden]{ display: none; }
@keyframes room-slide{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}
.room-report__q{ color: var(--text); font-weight: 700; }
.room-input{
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-2);
  border: var(--border);
  padding: var(--s-3);
}
.room-input::placeholder{ color: var(--text-mute); }
.room-input:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.room-report__note{ color: var(--text-mute); font-size: var(--fs-micro); }
.room-report__actions{ display: flex; gap: var(--s-2); }
.room-report__actions .btn-ghost{ flex: 1 1 auto; justify-content: center; cursor: pointer; background: transparent; }

.room-relay__line{ color: var(--text); font-size: var(--fs-sm); }
.room-relay__btn{ justify-content: center; cursor: pointer; background: transparent; color: var(--accent-hover); border-color: var(--accent); }
.room-relay__btn:hover{ color: #fff; }
.room-relay__msg{ color: var(--spark); min-height: 1.2em; font-size: var(--fs-micro); }
.room-relay__dismiss{
  background: none; border: none;
  color: var(--text-mute);
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.room-relay__dismiss:hover{ color: var(--text-dim); }

/* --- curated reception-report pull-quotes --- */
.room-quotes{ display: grid; gap: var(--s-2); border-top: 1px dashed var(--line); padding-top: var(--s-3); }
.room-quote{
  font-size: var(--fs-sm);
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.45;
}
.room-quote__sig{
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------------------------------------------------------------------------
   THE REQUEST LINE
   ------------------------------------------------------------------------- */
.room-request__lead{ max-width: 62ch; margin: 0 0 var(--s-5); color: var(--text); }
.room-request__form{
  display: grid;
  gap: var(--s-3);
  max-width: 640px;
  border: var(--border);
  background: var(--surface);
  padding: var(--s-5);
}
.room-request__form label{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.room-request__form textarea.room-input{ resize: vertical; min-height: 5.5em; font-family: var(--font-display); }
.room-select{
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg-2);
  border: var(--border);
  padding: var(--s-3);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--text-dim) 50%),
                    linear-gradient(135deg, var(--text-dim) 50%, transparent 51%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.room-select:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px; }
.room-request__private{ color: var(--text-mute); font-size: var(--fs-micro); margin-top: calc(var(--s-2) * -1); }
.room-request__send{ justify-content: center; cursor: pointer; background: transparent; }
.room-request__msg{ color: var(--accent-hover); min-height: 1.2em; }
.room-request__msg.is-bad{ color: var(--spark); }

/* honeypot — humans never see it */
.room-hp{
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* dead air */
.room-deadair{ margin-top: var(--s-5); }

/* ---------------------------------------------------------------------------
   RESPONSIVE  (390 → 1440)
   ------------------------------------------------------------------------- */
@media (max-width: 900px){
  .room-board{ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .rail-card{ width: 180px; }
}
@media (max-width: 640px){
  .room-hero__lead{ font-size: var(--fs-body); }
  .room-hero__status{ flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .room-board{ grid-template-columns: 1fr; }
  .room-request__form{ padding: var(--s-4); }
  .room-report__actions{ flex-direction: row; }
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION — kill every animation, keep every state readable
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .room-card.is-slam .room-band__segs i,
  .room-card.is-slam .room-boost,
  .room-card.is-amber,
  .room-card.is-amber .room-boost,
  .room-chip.is-amber,
  .room[data-sealed="true"] .room-band__segs i,
  .room-report,
  .room-relay{
    animation: none !important;
  }
  .room-progress i,
  .room-card,
  .room-boost,
  .room-play{ transition: none !important; }
}

/* --- rank + movement (the board IS the leaderboard) ------------------------ */
.room-rank{
  color: var(--text-dim);
  min-width: 2em;
  font-weight: 700;
}
.room-move{ margin-left: auto; }
.room-move.is-up{ color: var(--accent-hover); }
.room-move.is-down{ color: var(--spark); }
.room[data-sealed="true"] .room-rank,
.room[data-sealed="true"] .room-move{ visibility: hidden; }

/* --- YOUR SIGNAL — what your watts did ------------------------------------- */
.room-your__row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3) 0;
  border-top: var(--border);
}
.room-your__row:first-of-type{ border-top: 0; }
.room-your__title{
  flex: 1 1 12em;
  font-weight: 700;
}
.room-your__watts{ color: var(--text-dim); }
.room-your__now{ color: var(--text-dim); }
.room-your__since.is-up{ color: var(--accent-hover); }
.room-your__since.is-down{ color: var(--spark); }
.room-your__empty{ color: var(--text-dim); padding: var(--s-3) 0; }