/* ============================================================
   transmissions — station view css
   #/station/:handle. The one place a member's theme applies:
   accent (--sa / --sa-rgb, set by station.js), radius vibe
   (data-radius), font vibe (data-font). App chrome outside the
   view stays lavender. Reads tokens.css + base.css.
   ============================================================ */

.station {
  /* member accent, overridden inline by station.js */
  --sa: var(--accent);
  --sa-rgb: 196, 181, 253;

  /* radius vibe: round (default) */
  --sr-xl: 28px;
  --sr-l: 18px;
  --sr-m: 14px;
  --sr-btn: 14px;
}

.station[data-radius='soft'] {
  --sr-xl: 16px;
  --sr-l: 12px;
  --sr-m: 9px;
  --sr-btn: 10px;
}

.station[data-radius='pill'] {
  --sr-xl: 40px;
  --sr-l: 26px;
  --sr-m: 20px;
  --sr-btn: 999px;
}

/* font vibe: mono turns the station's own voice to machine text */
.station[data-font='mono'] .sta-name,
.station[data-font='mono'] .sta-statusline,
.station[data-font='mono'] .sta-post-body,
.station[data-font='mono'] .sta-ded-body,
.station[data-font='mono'] .sta-tape-title,
.station[data-font='mono'] .sta-bio {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------- */
/* world layer: the member's backdrop behind everything        */
/* ---------------------------------------------------------- */

.sta-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sta-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.sta-lost {
  align-items: center;
  padding-top: var(--s-9);
}

/* ---------------------------------------------------------- */
/* the zone: marquee + hero + actions, props float over it     */
/* ---------------------------------------------------------- */

.sta-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.sta-props {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.sta-prop {
  position: absolute;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%) rotate(-2deg);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}

.sta-prop:nth-child(2n) {
  transform: translate(-50%, -50%) rotate(3deg);
}

.sta-prop:nth-child(3n) {
  transform: translate(-50%, -50%) rotate(-5deg);
}

/* ---- marquee ticker ---- */

.sta-marquee {
  border: 1px solid rgba(var(--sa-rgb), 0.22);
  border-radius: var(--r-pill);
  background: rgba(var(--sa-rgb), 0.05);
  padding: 8px 0;
}

.sta-marquee .marquee-track {
  gap: var(--s-4);
  padding-right: var(--s-4);
  animation-duration: 26s;
}

.sta-mq-item {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: rgba(var(--sa-rgb), 0.9);
  white-space: nowrap;
}

.sta-mq-sep {
  color: rgba(var(--sa-rgb), 0.4);
  font-size: var(--fs-eyebrow);
}

/* ---- hero ---- */

.sta-hero {
  position: relative;
  border-radius: var(--sr-xl);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.sta-hero-skel {
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  min-height: 148px;
}

.sta-hero-skel-lines {
  flex: 1;
}

.sta-hero-top {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.sta-avatar-slot .avatar {
  border-color: rgba(var(--sa-rgb), 0.35);
  box-shadow: 0 0 0 3px rgba(var(--sa-rgb), 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.sta-id {
  min-width: 0;
  flex: 1;
}

.sta-name {
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.sta-handle {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  /* handles are lowercase by definition; the brand may never render capitalized */
  text-transform: none;
  font-variant-numeric: tabular-nums;
  color: rgba(var(--sa-rgb), 0.85);
}

.sta-statusline {
  margin-top: 7px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--fg-muted);
}

.sta-bio {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 56ch;
}

.sta-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline);
}

.sta-onair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sta-onair .micro {
  color: var(--accent-70);
}

.sta-pull {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.sta-pull b {
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
  color: rgb(var(--sa-rgb));
  text-shadow: 0 0 18px rgba(var(--sa-rgb), 0.4);
}

.sta-streak {
  color: var(--fg-dim);
}

/* ---- actions ---- */

.sta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.sta-actions .btn {
  border-radius: var(--sr-btn);
  flex: 1 1 auto;
}

.sta-actions .btn:focus-visible,
.station .sta-btn-accent:focus-visible {
  outline-color: rgba(var(--sa-rgb), 0.8);
}

/* accent-dressed button, tinted by the member's accent */
.sta-btn-accent {
  background: rgba(var(--sa-rgb), 0.12);
  border-color: rgba(var(--sa-rgb), 0.4);
  color: rgb(var(--sa-rgb));
}

.sta-btn-accent:hover {
  background: rgba(var(--sa-rgb), 0.2);
  border-color: rgba(var(--sa-rgb), 0.65);
  box-shadow: 0 0 20px rgba(var(--sa-rgb), 0.22);
}

/* crew button, state-aware */
.sta-crew-btn[data-state='none'] {
  background: rgb(var(--sa-rgb));
  border-color: rgb(var(--sa-rgb));
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: 0 0 22px rgba(var(--sa-rgb), 0.32);
}

.sta-crew-btn[data-state='none']:hover {
  box-shadow: 0 0 30px rgba(var(--sa-rgb), 0.5);
}

.sta-crew-btn[data-state='pending'] {
  color: var(--fg-dim);
  border-style: dashed;
}

.sta-crew-btn[data-state='incoming'] {
  background: rgb(var(--sa-rgb));
  border-color: rgb(var(--sa-rgb));
  color: var(--accent-ink);
  font-weight: 600;
  animation: sta-incoming 2.2s ease-in-out infinite;
}

@keyframes sta-incoming {
  0%,
  100% {
    box-shadow: 0 0 14px rgba(var(--sa-rgb), 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(var(--sa-rgb), 0.6);
  }
}

.sta-crew-btn[data-state='crew'] {
  background: rgba(var(--sa-rgb), 0.08);
  border-color: rgba(var(--sa-rgb), 0.35);
  color: rgba(var(--sa-rgb), 0.9);
}

.sta-crew-btn[data-state='crew']::after {
  content: '✦';
  font-size: 11px;
  margin-left: 2px;
  opacity: 0.8;
}

/* ---------------------------------------------------------- */
/* modules                                                     */
/* ---------------------------------------------------------- */

.sta-module {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.sta-mod-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-left: 2px;
}

.sta-mod-head .eyebrow {
  color: rgba(var(--sa-rgb), 0.75);
}

.sta-mod-tool {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 8px 12px;
  margin: -8px -12px;
  border-radius: var(--r-m);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.sta-mod-tool:hover {
  color: rgb(var(--sa-rgb));
  background: rgba(var(--sa-rgb), 0.08);
}

.sta-mod-tool:active {
  transform: scale(0.95);
}

.sta-mod-hint {
  font-size: var(--fs-small);
  color: var(--fg-faint);
  padding-left: 2px;
}

/* ---- transmissions grid ---- */

.sta-grid {
  --masonry-gap: 10px;
}

.sta-post {
  border-radius: var(--sr-l);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sta-post-media {
  width: 100%;
  height: auto;
  display: block;
  background: #0a0a0e;
}

.sta-post-body {
  padding: var(--s-3) var(--s-4) 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sta-post-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
}

.sta-post-time {
  letter-spacing: 0.1em;
}

/* ---- prime time ---- */

.sta-prime-row-skel {
  display: flex;
  gap: var(--s-4);
}

.sta-prime-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.sta-prime-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: calc(25% - var(--s-3) * 3 / 4);
  min-width: 72px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--sr-l);
  background: var(--pane-soft);
  border: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  backdrop-filter: blur(var(--glass-blur-soft));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-glide),
    opacity var(--t-fast) var(--ease-out);
}

.sta-prime-tile:hover {
  background: rgba(26, 26, 34, 0.8);
  border-color: rgba(var(--sa-rgb), 0.3);
  transform: translateY(-2px);
}

.sta-prime-tile:active {
  transform: scale(0.95);
}

.sta-prime-tile:focus-visible {
  outline-color: rgba(var(--sa-rgb), 0.8);
}

.sta-prime-no {
  position: absolute;
  top: 7px;
  left: 9px;
  color: rgba(var(--sa-rgb), 0.65);
}

.sta-prime-handle {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}

.sta-prime-tile.is-dragging {
  opacity: 0.25;
  border-style: dashed;
}

.sta-prime-ghost {
  position: fixed;
  z-index: 90;
  margin: 0;
  pointer-events: none;
  transform: scale(1.06) rotate(2deg);
  border-color: rgba(var(--sa-rgb), 0.6);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--sa-rgb), 0.25);
}

/* ---- tapes shelf ---- */

.sta-shelf {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.sta-tape {
  flex: none;
  scroll-snap-align: start;
  width: 138px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: var(--s-3);
  border-radius: var(--sr-l);
  background: var(--pane-soft);
  border: var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur-soft));
  backdrop-filter: blur(var(--glass-blur-soft));
  text-align: left;
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out), transform var(--t-med) var(--ease-glide);
}

.sta-tape:hover {
  background: rgba(26, 26, 34, 0.8);
  border-color: rgba(var(--sa-rgb), 0.3);
  transform: translateY(-2px);
}

.sta-tape:active {
  transform: scale(0.96);
}

.sta-tape:focus-visible {
  outline-color: rgba(var(--sa-rgb), 0.8);
}

.sta-tape-cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--sr-m);
  overflow: hidden;
  display: grid;
  gap: 2px;
  background: #0a0a0e;
}

.sta-tape-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sta-tape-cover-1 {
  grid-template: 1fr / 1fr;
}

.sta-tape-cover-2 {
  grid-template: 1fr / 1fr 1fr;
}

.sta-tape-cover-3 {
  grid-template: 1fr 1fr / 1fr 1fr;
}

.sta-tape-cover-3 img:first-child {
  grid-row: span 2;
}

.sta-tape-cover-4 {
  grid-template: 1fr 1fr / 1fr 1fr;
}

.sta-tape-cover-bare {
  place-items: center;
}

.sta-tape-cover-bare svg {
  width: 22px;
  height: 32px;
  color: rgba(var(--sa-rgb), 0.4);
}

.sta-tape-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  color: var(--fg);
}

/* ---- tape sheet ---- */

.sta-tapesheet-meta {
  margin: calc(-1 * var(--s-3)) 0 var(--s-4);
  color: var(--fg-dim);
}

.sta-tapesheet-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.sta-tapesheet-item {
  border-radius: var(--r-m);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sta-tapesheet-item img {
  width: 100%;
  height: auto;
}

.sta-tapesheet-item p {
  padding: var(--s-3) var(--s-3) 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.sta-tapesheet-item .serial {
  padding: var(--s-2) var(--s-3) var(--s-3);
}

/* ---- dedications ---- */

.sta-ded-composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.sta-ded-composer .input:focus {
  border-color: rgba(var(--sa-rgb), 0.7);
  box-shadow: 0 0 0 3px rgba(var(--sa-rgb), 0.14);
}

.sta-ded-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.sta-ded-composer-row .btn {
  border-radius: var(--sr-btn);
}

.sta-ded-wall {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sta-ded {
  border-radius: var(--sr-l);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sta-ded-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.sta-ded-from {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(var(--sa-rgb), 0.85);
  transition: color var(--t-fast) var(--ease-out);
}

.sta-ded-from:hover {
  color: rgb(var(--sa-rgb));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sta-ded-time {
  margin-left: auto;
}

.sta-ded-body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}

/* ---- links ---- */

.sta-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.sta-link {
  border-radius: var(--sr-btn);
}

.sta-link:hover {
  border-color: rgba(var(--sa-rgb), 0.45);
  color: rgb(var(--sa-rgb));
}

/* ---------------------------------------------------------- */
/* lineup sheet                                                */
/* ---------------------------------------------------------- */

.sta-lineup-sub {
  margin: calc(-1 * var(--s-3)) 0 var(--s-4);
}

.sta-lineup-picked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-height: 38px;
}

.sta-lineup-chip .micro {
  color: var(--accent-70);
}

.sta-lineup-none {
  color: var(--fg-faint);
  align-self: center;
}

.sta-lineup-crew {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 38dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-bottom: var(--s-5);
}

.sta-lineup-row.is-picked {
  border-color: var(--accent-45);
  background: var(--accent-06);
}

.sta-lineup-row.is-picked .micro {
  color: var(--accent);
}

.sta-lineup-row[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------------------------------------------------------- */
/* buzz overlay (body-level)                                   */
/* ---------------------------------------------------------- */

.sta-buzz {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: sta-buzz-fade 0.95s var(--ease-out) forwards;
}

.sta-buzz-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(196, 181, 253, 0.22), transparent 70%);
  animation: sta-buzz-flash 0.5s var(--ease-out) forwards;
}

.sta-buzz-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-8);
  border-radius: var(--r-xl);
  background: var(--pane-hard);
  border: 1px solid var(--accent-45);
  box-shadow: var(--glass-shadow), var(--glow-accent);
  animation: sta-buzz-shake 0.5s linear;
}

.sta-buzz-star svg {
  width: 26px;
  height: 38px;
  color: var(--accent);
  filter: drop-shadow(0 0 14px rgba(196, 181, 253, 0.6));
}

.sta-buzz-word {
  font-family: var(--font-mono);
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
}

.sta-buzz-sub {
  color: var(--accent-70);
}

@keyframes sta-buzz-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-5px, 2px) rotate(-1.4deg); }
  25% { transform: translate(5px, -2px) rotate(1.2deg); }
  37% { transform: translate(-4px, -2px) rotate(-1deg); }
  50% { transform: translate(4px, 2px) rotate(0.8deg); }
  62% { transform: translate(-3px, 1px) rotate(-0.6deg); }
  75% { transform: translate(2px, -1px) rotate(0.4deg); }
  87% { transform: translate(-1px, 0) rotate(-0.2deg); }
}

@keyframes sta-buzz-flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sta-buzz-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------------------------------------------------- */
/* desktop refinements                                         */
/* ---------------------------------------------------------- */

@media (min-width: 720px) {
  .sta-content {
    gap: var(--s-8);
  }

  .sta-hero {
    padding: var(--s-7) var(--s-7);
  }

  .sta-prop {
    width: 72px;
    height: 72px;
  }

  .sta-actions .btn {
    flex: 0 1 auto;
    min-width: 150px;
  }

  .sta-prime-tile {
    width: calc(12.5% - var(--s-3) * 7 / 8);
    min-width: 92px;
  }

  .sta-tape {
    width: 168px;
  }

  .sta-tapesheet-items {
    grid-template-columns: repeat(3, 1fr);
  }
}