/* UNSCRIPTED control panel.
   Palette taken from data-sigils-live.html so the console looks like it belongs
   to the broadcast: warm near-black, parchment text, amber for attention, and
   the overlay's own live-red for on air. */

:root {
  --bg:        #050407;
  --panel:     #0a0709;
  --raised:    #120d10;
  --line:      rgba(120,110,96,0.28);
  --text:      rgba(234,226,208,0.96);
  --dim:       rgba(210,202,190,0.55);
  --amber:     rgb(255,196,92);
  --live:      rgb(255,70,90);
  --ok:        rgb(126,214,142);
  --radius:    10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Room for a thumb at the bottom of a phone, and never edge-to-edge text. */
  padding: 18px 16px 48px;
  max-width: 780px;
  margin: 0 auto;
}

h1 {
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
  margin: 4px 0 18px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

/* ---- the one thing you look at first ---------------------------------- */

#status { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }

#state {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
#state.on  { color: var(--live); }
#state.off { color: var(--dim); }

/* A pulse only while actually broadcasting. Motion means "right now"; a static
   page that animates when nothing is happening teaches you to ignore it. */
#state.on::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  #state.on::before { animation: none; }
}

#substate { color: var(--dim); font-size: 13px; }

.stale {
  color: var(--amber);
  font-size: 12px;
  margin-top: 8px;
}

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

.buttons { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.buttons .wide { grid-column: 1 / -1; }

button {
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 48px: a target you can hit on a phone without aiming. */
  min-height: 48px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
button:hover:not(:disabled) { background: #1a1216; }
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
button:disabled { opacity: 0.4; cursor: default; }

button.go     { border-color: rgba(255,196,92,0.45); }
button.stop   { border-color: rgba(255,70,90,0.45); }
button.danger { background: var(--live); color: #14080b; border-color: var(--live); }
button.quiet  { color: var(--dim); }

.hint { color: var(--dim); font-size: 12px; margin: 10px 0 0; }

/* ---- numbers ----------------------------------------------------------- */

.grid {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}
.metric .label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.metric .value { font-size: 19px; font-variant-numeric: tabular-nums; }
.metric .value.warn { color: var(--amber); }
.metric .value.bad  { color: var(--live); }

.topic {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--dim);
}
.topic b { color: var(--text); font-weight: 500; }

/* ---- log --------------------------------------------------------------- */

#log {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  font: 12px/1.45 ui-monospace, "SFMono-Regular", Consolas, monospace;
  color: var(--dim);
  white-space: pre-wrap;
  word-break: break-word;
}
#log .e { color: var(--live); }
#log .w { color: var(--amber); }

summary { cursor: pointer; color: var(--dim); font-size: 13px; }
summary::marker { color: var(--line); }
details[open] summary { margin-bottom: 12px; }

/* ---- login ------------------------------------------------------------- */

#login { max-width: 340px; margin: 14vh auto 0; }
#login input {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  margin-bottom: 10px;
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#login input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#login button { width: 100%; }

/* ---- messages ---------------------------------------------------------- */

#msg {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 13px;
  white-space: pre-wrap;
  display: none;
}
#msg.show { display: block; }
#msg.bad  { border-color: rgba(255,70,90,0.5); color: var(--live); }
#msg.good { border-color: rgba(126,214,142,0.45); color: var(--ok); }

.rec { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
       padding: 5px 0; border-bottom: 1px solid rgba(120,110,96,0.12); }
.rec span:last-child { color: var(--dim); font-variant-numeric: tabular-nums; }

.hidden { display: none !important; }

/* Two small overrides that would otherwise want inline style attributes, which
   the panel's CSP forbids -- and a rule that fails silently in the browser is
   worse than one that lives here. */
.tight { margin: 0 0 8px; }
.small { min-height: 36px; }