/* ===========================================================================
   cue — "test equipment"
   Near-black rack panel, one cold cyan signal, cream markings. Numbers are the
   subject of this interface, so every number is monospaced and every unit is
   dimmer than its value. Depth comes from borders and surface steps, never
   shadows — shadows read as smudges on a dark panel.
   =========================================================================== */

:root {
  --deck: #07080a; /* the rack */
  --panel: #101216; /* equipment face */
  --panel-2: #171a20; /* raised face */
  --inset: #0b0d10; /* inputs sit below the face */

  --rule: rgba(255, 255, 255, 0.08);
  --rule-2: rgba(255, 255, 255, 0.15);

  --cyan: #5ad1ff;
  --cyan-hi: #8fe2ff;
  --cyan-soft: rgba(90, 209, 255, 0.12);
  --cyan-line: rgba(90, 209, 255, 0.4);

  --cream: #e8e6e1;
  --cream-2: #9ba0a8;
  --dim: #5c626c;

  --good: #6fe3a4;
  --warn: #ffc76b;
  --bad: #ff7a7a;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--deck);
  color: var(--cream);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding: 0 0 48px;
}

/* one cold instrument glow, top right */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(820px 460px at 85% -10%, rgba(90, 209, 255, 0.06), transparent 60%);
}

.screen {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 28px 20px 0;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.muted {
  color: var(--cream-2);
}
.dim {
  color: var(--dim);
}
.small {
  font-size: 12px;
}
.good {
  color: var(--good);
}
.warn {
  color: var(--warn);
}
.grow {
  flex: 1;
}
[hidden] {
  display: none !important;
}

/* --- wordmark ------------------------------------------------------------ */

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wordmark h1 {
  margin: 0;
  font: 600 15px/1 var(--mono);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cream);
}
.wordmark .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-line);
}
.wordmark.small h1 {
  font-size: 12px;
}

.tagline {
  margin: 14px 0 26px;
  color: var(--cream-2);
  font-size: 15px;
  max-width: 44ch;
}

/* --- surfaces ------------------------------------------------------------ */

.card,
.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 20px;
}

/* minmax(0, 1fr), not the default auto: an auto grid column refuses to go below
   its widest item's min-content, and one stubborn item then widens the whole
   page. Everything here must be free to shrink to the phone it is on. */
.stack,
.deck,
.device {
  grid-template-columns: minmax(0, 1fr);
}

.stack {
  display: grid;
  gap: 14px;
}

/* A range input reports a 129px intrinsic width that survives flex-basis: 0,
   so as a flex child it quietly pushes its row — and the document — wider than
   the viewport. width: 0 removes that contribution; flex gives it the room
   back. */
input[type="range"] {
  width: 0;
  min-width: 0;
  flex: 1 1 80px;
  accent-color: var(--cyan);
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.row > input {
  flex: 1;
  min-width: 0;
}

.field {
  display: grid;
  gap: 7px;
}
.field > span {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--inset);
  color: var(--cream);
  font: 15px/1.2 var(--sans);
}
input:focus-visible {
  outline: none;
  border-color: var(--cyan-line);
  box-shadow: 0 0 0 3px var(--cyan-soft);
}

.code-input {
  font: 600 20px/1 var(--mono) !important;
  letter-spacing: 0.42em;
  text-align: center;
  text-transform: uppercase;
  padding-left: 0.42em !important;
}

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--dim);
  font-size: 12px;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  appearance: none;
  border: 1px solid var(--rule-2);
  background: var(--panel-2);
  color: var(--cream);
  border-radius: var(--r-sm);
  padding: 11px 16px;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.06s;
}
.btn:hover:not(:disabled) {
  border-color: var(--cyan-line);
  background: #1c2027;
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
}
.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.btn.primary {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #032330;
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) {
  background: var(--cyan-hi);
  border-color: var(--cyan-hi);
}
.btn.big {
  padding: 15px 18px;
  font-size: 14px;
  letter-spacing: 0.2em;
}
.btn.tiny {
  padding: 7px 11px;
  font-size: 11px;
}
.btn.ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--cream-2);
}

.error {
  color: var(--bad);
  font-size: 13px;
  margin: 4px 0 0;
}

/* --- how it works -------------------------------------------------------- */

.how {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  color: var(--cream-2);
  font-size: 13.5px;
}
.how li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: baseline;
}
.how b {
  font: 600 11px/1 var(--mono);
  color: var(--cyan);
}

.foot {
  margin-top: 34px;
  font-size: 12px;
}
.foot a {
  color: var(--dim);
  text-decoration: none;
}
.foot a:hover {
  color: var(--cyan);
}

/* --- room bar ------------------------------------------------------------ */

.bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--panel);
  font: 500 12px/1 var(--mono);
  color: var(--cream-2);
  cursor: default;
}
.chip.code {
  cursor: pointer;
  color: var(--cream);
  letter-spacing: 0.22em;
}
.chip.code:hover {
  border-color: var(--cyan-line);
}
.chip-hint {
  color: var(--dim);
  letter-spacing: 0;
  font-size: 11px;
}
.chip.code.copied .chip-hint {
  color: var(--good);
}
.chip.code.copied .chip-hint::before {
  content: "copied — ";
}

.lamp .led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dim);
  transition: background 0.3s, box-shadow 0.3s;
}
.lamp[data-level="good"] .led {
  background: var(--good);
  box-shadow: 0 0 9px rgba(111, 227, 164, 0.55);
}
.lamp[data-level="ok"] .led {
  background: var(--warn);
  box-shadow: 0 0 9px rgba(255, 199, 107, 0.5);
}
.lamp[data-level="warn"] .led {
  background: var(--bad);
}
.lamp[data-level="cold"] .led {
  animation: blink 1.1s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

/* --- stage --------------------------------------------------------------- */

.stage {
  display: grid;
  gap: 16px;
}

.dropzone {
  display: grid;
  gap: 7px;
  justify-items: center;
  text-align: center;
  padding: 44px 20px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-md);
  background: var(--inset);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover,
.dropzone.over {
  border-color: var(--cyan);
  background: rgba(90, 209, 255, 0.05);
}
.drop-title {
  font: 500 14px/1 var(--mono);
  letter-spacing: 0.12em;
}
.drop-sub {
  color: var(--dim);
  font-size: 12.5px;
}
.panel.drop {
  padding: 12px;
}

.waiting {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream-2);
}
.waiting p {
  margin: 0;
}
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--rule-2);
  border-top-color: var(--cyan);
  animation: spin 0.9s linear infinite;
  flex: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.transfer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-2);
  margin-bottom: 12px;
}
#transferPct {
  color: var(--cyan);
  letter-spacing: 0;
}
.meter {
  height: 4px;
  border-radius: 99px;
  background: var(--inset);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0;
  background: var(--cyan);
  transition: width 0.18s linear;
}
#transferNote {
  margin: 10px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- deck ---------------------------------------------------------------- */

.deck {
  display: grid;
  gap: 20px;
}
.track-name {
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-meta {
  margin-top: 5px;
  font-size: 12px;
  color: var(--dim);
}

.scrubber {
  cursor: pointer;
  padding: 6px 0;
}
.scrub-track {
  position: relative;
  height: 5px;
  border-radius: 99px;
  background: var(--inset);
  border: 1px solid var(--rule);
}
.scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 99px;
  background: var(--cyan);
}
.scrub-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 3px var(--deck);
}
.times {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 12px;
  color: var(--dim);
}

.transport {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.transport .big {
  flex: 1;
  min-width: 200px;
}

.options {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream-2);
  cursor: pointer;
}
.toggle input {
  accent-color: var(--cyan);
  width: 15px;
  height: 15px;
}

.volume {
  display: flex;
  align-items: center;
  gap: 12px;
}
.volume {
  flex-wrap: wrap;
}

/* --- this device --------------------------------------------------------- */

.device {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.device-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
#trimValue {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--cyan);
}
.trim {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trim .btn.tiny {
  min-width: 34px;
}
.device p {
  margin: 0;
}

/* --- people -------------------------------------------------------------- */

.people {
  margin-top: 22px;
}
.people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.peers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
.peers li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--panel);
  font-size: 14px;
}
.who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  flex: none;
}
.badge {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--cyan-soft);
  color: var(--cyan);
  border: 1px solid var(--cyan-line);
}
.badge.you {
  background: transparent;
  color: var(--dim);
  border-color: var(--rule-2);
}

/* --- overlays ------------------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 8, 10, 0.92);
  backdrop-filter: blur(6px);
  padding: 24px;
  z-index: 20;
}
.gate {
  width: min(380px, 100%);
  display: grid;
  gap: 14px;
  text-align: center;
}
.gate h2 {
  margin: 0;
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
}
.gate h2 span {
  color: var(--cyan);
}
.gate p {
  margin: 0;
  font-size: 13.5px;
}

.countdown {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  background: rgba(7, 8, 10, 0.86);
  backdrop-filter: blur(3px);
  z-index: 30;
  pointer-events: none;
}
.count-number {
  font: 600 clamp(90px, 34vw, 200px) / 1 var(--mono);
  color: var(--cyan);
  text-shadow: 0 0 60px rgba(90, 209, 255, 0.35);
  font-variant-numeric: tabular-nums;
}
.count-label {
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--dim);
}

@media (max-width: 560px) {
  .screen {
    padding: 20px 16px 0;
  }
  .transport .big {
    min-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}