/* live.sillylaird.ca — page-scoped styles.
   Colours/spacing come from www's site.css tokens so light mode keeps working;
   nothing here restyles base elements. */

/* Two-column stage/chat layout.
   site.css gives every <section> a vertical margin, which would fight the grid
   gap, so sections inside .live-grid drop theirs. The page also widens past
   --wrap (960px) once there is room, otherwise the video ends up under 600px
   wide with the chat column beside it. */
.live-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.live-grid > .section { margin: 0; }

@media (min-width: 1000px) {
  .live-wrap { max-width: min(1280px, 100% - 2 * var(--space-lg)); }
  .live-grid { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
  /* Chat runs the height of the player; the log takes whatever the form and
     note leave behind instead of a fixed 22rem. */
  .live-grid > .live-chat {
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    position: sticky;
    top: var(--space-md);
  }
  .live-grid > .live-chat .chat-log {
    flex: 1 1 auto;
    height: auto;
    min-height: 10rem;
  }
}

.live-chat h2 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.live-head h1 {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 4vw, 2.1rem);
  word-wrap: break-word;
}

.live-status {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
}

.live-badge {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .15em .6em;
  letter-spacing: .12em;
}
.live-badge.is-live {
  color: var(--accent-bright);
  border-color: var(--accent);
  box-shadow: var(--glow-soft);
}

.live-player { width: 100%; margin-bottom: var(--space-sm); }
.live-player video {
  width: 100%;
  max-height: 78vh;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: block;
}

.live-offline {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: var(--space-md);
  text-align: center;
  margin-bottom: var(--space-sm);
}
.live-offline-art {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin: 0 0 var(--space-sm);
}
.live-offline-msg { font-family: var(--font-mono); font-size: 1.1rem; margin: 0 0 var(--space-xs); }
.live-offline-sub { color: var(--muted); font-size: .85rem; }

/* site.css has button:not(.logo):not(.reset-button)… at specificity (0,5,1),
   which beats any sane selector here — hence .reset-button on the markup. */
.live-transport {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: .82rem;
}
.live-transport button {
  font-family: var(--font-mono);
  font-size: .82rem;
  background: transparent;
  color: var(--accent-bright);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .3em .9em;
  cursor: pointer;
}
.live-transport button:hover { color: var(--accent-bright); box-shadow: var(--glow-soft); }
.live-hint { color: var(--muted); }

/* Chat */
.chat-log {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: var(--space-xs);
  height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
}
.chat-log li { margin: 0 0 .15em; }
.chat-log .chat-nick { color: var(--accent-bright); }
.chat-log .chat-nick::after { content: ": "; color: var(--muted); }
.chat-log .chat-time { color: var(--muted); font-size: .78em; margin-right: .4em; }
.chat-log .chat-sys { color: var(--muted); font-style: italic; }

/* site.css sets form { display:flex; flex-direction:column } */
.chat-form {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs);
  align-items: center;
}
.chat-form input[type=text] { font-family: var(--font-mono); padding: .3em .5em; }
#chatNick { width: min(10em, 100%); }
#chatBody { flex: 1 1 14em; min-width: 0; }
.chat-note { color: var(--muted); font-size: .78rem; margin-top: var(--space-xs); }

/* ---------- Admin panel ---------- */

.admin-top h1 { margin-bottom: var(--space-xs); font-family: var(--font-mono); }
.admin-sub {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs) var(--space-sm);
  align-items: center;
  font-family: var(--font-mono);
  font-size: .82rem;
}
.admin-dim { color: var(--muted); }

.admin-tabs {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: .9rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
}
.admin-tabs a.is-active { color: var(--accent-bright); text-shadow: 0 0 12px rgba(var(--glow-color), .6); }

.admin-flash {
  font-family: var(--font-mono);
  font-size: .85rem;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: .5em .8em;
}
.admin-flash.is-ok  { border-left-color: var(--accent); }
.admin-flash.is-err { border-left-color: var(--accent-bright); color: var(--accent-bright); }

/* site.css sets form { display:flex; flex-direction:column } — these rows want
   to run horizontally, except .is-stacked which keeps the column default. */
.admin-form {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-bottom: var(--space-sm);
}
.admin-form.is-stacked { flex-flow: column nowrap; align-items: stretch; }
.admin-form.is-stacked label { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.admin-form input[type=text],
.admin-form input[type=password],
.admin-form textarea { font-family: var(--font-mono); padding: .35em .5em; }
.admin-form input[type=text] { flex: 1 1 18em; min-width: 0; }
.admin-form button {
  font-family: var(--font-mono);
  font-size: .85rem;
  background: transparent;
  color: var(--accent-bright);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .35em 1em;
  cursor: pointer;
}
.admin-form button:hover { box-shadow: var(--glow-soft); }
.admin-check { display: flex; flex-flow: row nowrap; gap: .5em; align-items: center; }

.admin-login { max-width: 22em; }
.admin-note { color: var(--muted); font-size: .8rem; }
.admin-note code, .admin-kv code { color: var(--accent-bright); word-break: break-all; }

.admin-kv { font-family: var(--font-mono); font-size: .85rem; margin: 0 0 var(--space-sm); }
.admin-kv dt { color: var(--muted); }
.admin-kv dd { margin: 0 0 .5em; }

.admin-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .82rem; }
.admin-table td { border-bottom: 1px solid var(--border); padding: .35em .5em .35em 0; vertical-align: top; }
.admin-table td:last-child { text-align: right; white-space: nowrap; }
.admin-actions { display: flex; flex-flow: row wrap; gap: .5em; justify-content: flex-end; }
.admin-actions form { display: inline; }
.admin-actions button { color: var(--accent-bright); }

/* VOD listing */
.vod-list { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: .9rem; }
.vod-list li {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-xs) var(--space-md);
  align-items: baseline;
  padding: .35em 0;
  border-bottom: 1px solid var(--border);
}
.vod-list .vod-meta { color: var(--muted); font-size: .82rem; }