header:has(> .live-player:not([hidden])) { column-gap: clamp(12px, 2vw, 30px); }
header:has(> .live-player:not([hidden])) nav { margin-inline-start: auto; }
.live-player { position: relative; flex: none; }
.live-player[hidden] { display: none; }

.live-toggle.button {
  min-height: 36px;
  padding: 0 12px;
  gap: 8px;
  background: #0009;
  color: var(--paper);
  font-size: 9px;
  letter-spacing: .14em;
  white-space: nowrap;
}

.live-toggle.button::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px #d9ff4366;
}

.live-toggle.button:hover { background: var(--acid); color: var(--bg); }
.live-toggle.button:hover::before { background: currentColor; }

.live-status {
  position: absolute;
  inset: calc(100% + 8px) 0 auto auto;
  width: min(17rem, 84vw);
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #090a08;
  color: var(--paper);
  font-size: 12px;
  line-height: 1.4;
}
.live-status:empty { display: none; }

@media (max-width: 640px) {
  header:has(> .live-player:not([hidden])) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: auto;
    padding-block: 8px;
    row-gap: 3px;
  }
  .live-player { grid-column: 1 / -1; justify-self: end; }
}