/* Spiritland Productions brand (Brand Guidelines 2025): monochrome — white base, bold black,
   #EDEDED as a sparing third tone. Neue Haas Grotesk primary, Maison Neue Mono secondary,
   Helvetica as the fallback. Red is used only for errors and destructive actions.
   The whole site is set in the secondary (monospace) font by choice. Maison Neue Mono isn't
   available as a web font, so DM Mono (free, SIL OFL — see fonts/DM-Mono-OFL.txt) stands in for it,
   self-hosted so no visitor data goes to Google. */
@font-face { font-family: "DM Mono"; src: url("/static/fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("/static/fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap; }
:root {
  --white: #ffffff; --black: #000000; --tint: #ededed;
  --muted: #5c5c5c; --line: #000000; --line-soft: #d4d4d4;
  --err: #c8102e; --warn: #9a5b00;
  --mono: "Maison Neue Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: max(2rem, calc((100% - 1400px) / 2 + 2rem));
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--black);
  font: 15px/1.55 var(--mono); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--black); text-decoration: none; transition: opacity .3s ease-in-out; }
a:hover { opacity: .75; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -.02em; font-weight: 400; margin: 0 0 1.5rem; }
h2 { font-size: 1.5rem; letter-spacing: -.01em; font-weight: 400; margin: 0 0 1rem; }
code, .mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .error { color: var(--err); }
.spacer { flex: 1; }
/* Secondary-font labels, as used for section labels in the guidelines ("02. SECONDARY LOGO"). */
.label, legend, th, .badge, .stats, .tile-name { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- header / footer ---------- */
header { display: flex; align-items: center; gap: 2.5rem; height: 100px; padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 1rem; }
.brand img { height: 46px; width: auto; display: block; }
.brand-tag { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  border-left: 1px solid var(--line); padding-left: 1rem; line-height: 46px; }
nav { display: flex; align-items: center; gap: 2rem; flex: 1; flex-wrap: wrap; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
nav a, nav button.link { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
main { width: 100%; max-width: 1400px; margin: 0 auto; padding: 3rem 2rem 4rem; flex: 1; }
footer { background: var(--black); color: var(--white); padding: 3rem var(--gutter); display: flex; align-items: center;
  gap: 2rem; flex-wrap: wrap; }
footer img { height: 54px; width: auto; display: block; }
footer a { color: var(--white); font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
  header { height: auto; padding: 1.25rem 1rem; gap: 1rem 1.5rem; }
  .brand img { height: 36px; } .brand-tag { line-height: 36px; }
  nav { gap: 1.25rem; flex-basis: 100%; }
  main { padding: 2rem 1rem 3rem; }
  footer { padding: 2rem 1rem; }
}

/* ---------- panels ---------- */
.card { border-top: 1px solid var(--line); padding: 1.5rem 0; margin: 2rem 0; }
.card.narrow { max-width: 460px; margin: 3rem auto; border-top: none; }
.card.danger { border-top-color: var(--err); }
.card.danger h2 { color: var(--err); }
.flash, .notice { background: var(--tint); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.notice { border-left: 4px solid var(--black); }
code.pw { background: var(--black); color: var(--white); padding: .2rem .6rem; font-size: 1rem; user-select: all; }

/* ---------- forms ---------- */
form label { display: block; margin: .9rem 0; font-size: .95rem; }
input, select { display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  color: var(--black); background: var(--white); border: 1px solid var(--black); border-radius: 0; }
input:focus, select:focus { outline: 2px solid var(--black); outline-offset: 1px; }
label.check { display: flex; align-items: center; gap: .6rem; }
label.check input { width: auto; margin: 0; accent-color: var(--black); }
fieldset { border: none; border-top: 1px solid var(--line-soft); margin: 1.5rem 0; padding: .75rem 0 0; }
legend { padding: 0 .6rem 0 0; font-size: .78rem; }
legend .muted { text-transform: none; letter-spacing: 0; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .1rem 1.5rem; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.5rem; }
form.inline { display: inline; }

button, .button { display: inline-block; font: inherit; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; padding: .8rem 1.4rem; border-radius: 0; margin-top: .75rem;
  border: 1px solid var(--black); background: var(--white); color: var(--black); transition: background .2s, color .2s; }
button:hover, .button:hover { background: var(--black); color: var(--white); opacity: 1; }
button.primary { background: var(--black); color: var(--white); }
button.primary:hover { background: var(--white); color: var(--black); }
button.danger { border-color: var(--err); color: var(--err); }
button.danger:hover { background: var(--err); color: var(--white); }
button.link { background: none; border: none; padding: 0; margin: 0; color: var(--black); }
button.link:hover { background: none; color: var(--black); opacity: .75; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
th, td { text-align: left; padding: .85rem .8rem .85rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 400; font-size: .75rem; color: var(--muted); border-bottom-color: var(--line); }
td a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (max-width: 760px) { table { display: block; overflow-x: auto; } }

.badge { display: inline-block; font-size: .7rem; padding: .2rem .55rem; border: 1px solid var(--black); white-space: nowrap; justify-self: start; }
.badge.rtc { background: var(--black); color: var(--white); }
.badge.ivs { background: var(--white); color: var(--black); }
.badge.admin { background: var(--tint); border-color: var(--tint); }

/* ---------- streams ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.5rem 1.5rem; }
.stream-card { display: block; color: var(--black); }
.stream-card .thumb { aspect-ratio: 16/9; background: var(--black) url("/static/brand/icon-white.svg") center / 18% no-repeat;
  display: grid; place-items: center; color: var(--white); transition: opacity .3s; }
.stream-card .thumb span { display: none; }
.stream-card .meta { padding: .9rem 0 0; display: grid; gap: .45rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.stream-card strong { font-size: 1.2rem; font-weight: 400; }
.stream-card p { margin: 0; }

.watch-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.watch-head h1 { margin: 0; }
.player { position: relative; background: var(--black); overflow: hidden; aspect-ratio: 16/9; }
/* Single-stream page: cap the width so the whole 16:9 player, the tip below it and the footer fit on
   screen (≈470px = header, heading, tip, page padding and footer). Multiview tiles are sized separately. */
.player:not(.compact) { max-width: max(480px, calc((100dvh - 470px) * 16 / 9)); margin: 0 auto; }
.player-tip { text-align: center; }
.player video { width: 100%; height: 100%; display: block; background: var(--black); object-fit: contain; }
.player .status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: rgba(0,0,0,.75); color: var(--white); padding: .55rem 1rem; font: .8rem/1.4 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; text-align: center; max-width: 90%; }
.player .status[data-state="muted"] { top: auto; bottom: 3.5rem; }
.player.compact .status { font-size: .68rem; padding: .35rem .6rem; }

/* Cap the grid's width so every row fits on screen without scrolling: each 16:9 tile gets
   (viewport height − page chrome above the grid − a stats line per row − gaps) ÷ rows of height. */
.multiview { --gap: 1rem; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap);
  margin: 0 auto; max-width: max(640px, calc(
    (100dvh - 280px - var(--rows) * 1.9rem - (var(--rows) - 1) * var(--gap)) / var(--rows) * 16 / 9 * var(--cols)
    + (var(--cols) - 1) * var(--gap))); }
@media (max-width: 1000px) { .multiview { grid-template-columns: repeat(var(--cols-md), 1fr); max-width: none; } }
@media (max-width: 760px) { .multiview { grid-template-columns: 1fr; } }
.tile { position: relative; }
.tile-name { position: absolute; z-index: 2; top: .5rem; left: .5rem; background: var(--black); color: var(--white);
  padding: .2rem .55rem; font-size: .7rem; pointer-events: none; }
details.picker { position: relative; }
details.picker summary { cursor: pointer; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  list-style: none; border: 1px solid var(--black); padding: .7rem 1.2rem; }
details.picker summary::-webkit-details-marker { display: none; }
details.picker[open] summary { background: var(--black); color: var(--white); }
details.picker form { position: absolute; right: 0; z-index: 5; background: var(--white); border: 1px solid var(--black);
  padding: 1rem 1.25rem; min-width: 260px; margin-top: -1px; }
.stats { font-size: .68rem; line-height: 1.5; color: var(--muted); letter-spacing: .03em;
  padding: .4rem 0 0; font-variant-numeric: tabular-nums; }
.stats.idle { opacity: .6; }
.stats.warn { color: var(--warn); }

/* ---------- admin: ingest ---------- */
.ingest h3.label { font-size: .75rem; font-weight: 400; color: var(--muted); margin: 1.5rem 0 .5rem; }
.ingest .watch-head { margin-bottom: 0; }
.kv { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; align-items: center; margin: .5rem 0; }
.kv p { margin: 0; }
.field { display: flex; gap: .5rem; align-items: center; }
.field input { margin: 0; flex: 1; min-width: 0; }
.field button { margin: 0; white-space: nowrap; }
@media (max-width: 760px) { .kv { grid-template-columns: 1fr; gap: .3rem; } .field { flex-wrap: wrap; } }

/* ---------- media server beacon ---------- */
/* Red is otherwise kept for errors; here it's a deliberate "this is costing money" signal. */
.server-link { display: inline-flex; align-items: center; gap: .5rem; }
.mtx-light { display: inline-flex; align-items: center; gap: .4rem; background: var(--err); color: var(--white);
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .5rem .15rem .4rem; line-height: 1.4; }
.mtx-light[hidden] { display: none; }
.mtx-light::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--white);
  animation: mtx-light 1s steps(1, end) infinite; }
.mtx-light[data-state="pending"], .mtx-light[data-state="stopping"] { background: var(--warn); }
.mtx-light[data-state="pending"]::before, .mtx-light[data-state="stopping"]::before { animation-duration: 2s; }
@keyframes mtx-light { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mtx-light::before { animation: none; } }
.server-status { font-size: 1.4rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 1rem; }
.server-status .mtx-light:empty { padding: .35rem; }
.server-status .muted { font-size: .9rem; }