/* THE WIRED — channel cards for /wired.html.
   Loads after styles.css and only uses its palette tokens, so the two
   registers can never drift. States are driven by [data-state] on .channel:
   tuning (first load) → on / off; "dead" is the unallocated-slot card. */

.wordmark-page {
  font-size: clamp(34px, 11vw, 64px);
}

/* ----------------- channel card ----------------- */
.channel {
  position: relative;
  background: var(--base-2);
  border: 1px solid var(--oxblood);
  overflow: hidden;
}

.ch-head {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--oxblood);
}
.ch-no {
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--wired); font-weight: 700;
}
.ch-name {
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--blown);
  flex: 1;
}
.ch-live {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.22em; color: var(--sepia-dim);
}
.ch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sepia-dim);
}

/* live: the dot goes wired-teal and breathes like the TX dot */
.channel[data-state="on"] .ch-dot {
  background: var(--wired);
  box-shadow: 0 0 8px var(--wired);
  animation: blink 1.4s steps(2) infinite;
}
.channel[data-state="on"] .ch-state { color: var(--wired); }

/* down: dead red, no pulse — nothing home */
.channel[data-state="off"] .ch-dot {
  background: var(--oxblood-2);
  box-shadow: none;
  animation: none;
}
.channel[data-state="off"] .ch-state { color: var(--r); }

.ch-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}

/* while a channel is down, its body reads through the static */
.channel[data-state="off"] .ch-body { opacity: 0.28; filter: saturate(0.4); }

/* ----------------- stats row ----------------- */
.ch-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.cstat-v {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  color: var(--blown);
  font-variant-numeric: tabular-nums;
}
.cstat-l {
  font-size: 10px; letter-spacing: 0.18em; color: var(--sepia-dim);
  text-transform: uppercase; margin-top: 2px;
}
.dim { color: var(--sepia-dim); }

.ch-motd {
  font-size: 13px; color: var(--sepia);
  border-left: 2px solid var(--oxblood);
  padding-left: 12px;
  min-height: 0;
}
.ch-motd:empty { display: none; }

/* ----------------- roster ----------------- */
.roster {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.roster:empty { display: none; }
.roster li {
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--sepia);
  background: var(--base);
  border: 1px solid var(--oxblood);
  padding: 3px 8px;
}
.roster li .ping { color: var(--sepia-dim); font-size: 10px; }
.roster li.more { color: var(--sepia-dim); border-style: dashed; }
.roster li.nobody {
  color: var(--sepia-dim); border-color: transparent; background: none;
  padding-left: 0; font-style: normal;
}

/* ----------------- actions ----------------- */
.ch-actions { display: flex; flex-direction: column; gap: 8px; }
.wire-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--base);
  border: 1px solid var(--sepia-dim);
  color: var(--sepia);
  padding: 12px 14px;
  font-family: var(--font, inherit); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none; text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.wire-btn:hover { background: var(--oxblood); border-color: var(--oxblood-2); color: var(--blown); }
.wire-btn:active { transform: translateY(1px); }
.wire-btn:focus-visible { outline: 2px solid var(--wired); outline-offset: 2px; }
.wire-glyph { color: var(--wired); }
.wire-btn:hover .wire-glyph { color: var(--blown); }
.wire-btn.copied { border-color: var(--wired); color: var(--wired); }

.ch-note { font-size: 11px; color: var(--sepia-dim); letter-spacing: 0.02em; }
.ch-note a { color: var(--wired); }

/* ----------------- NO CARRIER static ----------------- */
.ch-static {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      rgba(216,195,154,0.06) 0 2px, rgba(0,0,0,0.28) 2px 4px);
  animation: static-roll 0.9s steps(6) infinite;
}
.channel[data-state="off"] .ch-static { display: flex; }
.ch-static span {
  font-size: 13px; font-weight: 700; letter-spacing: 0.34em;
  color: var(--blown);
  background: rgba(14,11,8,0.82);
  border: 1px solid var(--oxblood-2);
  padding: 8px 16px 8px 20px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes static-roll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 12px; }
}

/* ----------------- dead-air slot ----------------- */
.channel-dead { border-style: dashed; border-color: var(--sepia-dim); opacity: 0.75; }
.channel-dead .ch-head { border-bottom-style: dashed; border-bottom-color: var(--sepia-dim); }

/* ----------------- reduced motion ----------------- */
@media (prefers-reduced-motion: reduce) {
  .channel[data-state="on"] .ch-dot,
  .ch-static, .ch-static span { animation: none; }
}