/* ══════════════════════════════════════════════════════════════════════════
   twitch-recorder — broadcast rack
   A capture appliance, so it looks like capture hardware: anodised faceplates,
   engraved wells, screen-printed labels, and lamps that each mean one thing.
   No web fonts, no CDN, no external request. Ships inside the image.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* chassis ramp — the metal */
  --chassis: #14171a;
  --panel: #1c2126;
  --panel-hi: #232a30;
  --well: #0e1114;
  --rule: #2e3740;
  --rule-soft: #232a31;

  /* inks */
  --label: #8b97a2;
  --ink: #e4e9ed;
  --ink-dim: #a8b3bc;
  --ink-faint: #6c7885;

  /* lamps — four colours, four meanings, nothing decorative */
  --tally: #e8412f;
  --cue: #3fbf77;
  --fault: #e8a33d;
  --signal: #58b6d4;

  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --rail-h: 3.4rem;
  --bridge-h: 2.4rem;
}

*, *::before, *::after { box-sizing: border-box; }
:where(.grid, .flex) > * { min-width: 0; }

html { background: var(--chassis); color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--chassis);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── the three recipes everything is built from ─────────────────────────── */

.plate {
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 42%);
  border: 1px solid var(--rule);
  border-top-color: rgba(255, 255, 255, 0.07); /* machined edge catching light */
  border-bottom-color: #0b0e10;
  border-radius: 4px;
}

.well {
  background: var(--well);
  border: 1px solid #0a0c0e;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.035);
}

.lamp {
  position: relative;
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #171b1f;
  box-shadow: inset 0 0 0 1px #0a0c0e, inset 0 1px 2px rgba(0, 0, 0, 0.9);
}
.lamp::after { /* the glass bead */
  content: "";
  position: absolute;
  top: 2px;
  left: 2.5px;
  width: 3.5px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
}
.lamp--sm { width: 9px; height: 9px; }
.lamp--sm::after { top: 1.5px; left: 2px; width: 2.5px; height: 2px; }

.lamp--recording {
  background: var(--tally);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 10px 1px rgba(232, 65, 47, 0.55);
  animation: breathe 2.4s ease-in-out infinite;
}
.lamp--watching {
  background: var(--cue);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 8px 0 rgba(63, 191, 119, 0.45);
}
.lamp--starting,
.lamp--retrying,
.lamp--stopping,
.lamp--partial,
.lamp--failed {
  background: var(--fault);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 8px 0 rgba(232, 163, 61, 0.45);
}
.lamp--failed { background: var(--tally); box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 0 8px 0 rgba(232,65,47,.45); }
.lamp--paused { background: #39434c; }

@keyframes breathe { 50% { opacity: 0.62; } }
@media (prefers-reduced-motion: reduce) {
  .lamp--recording { animation: none; }
}

/* ── screen-printed micro label ─────────────────────────────────────────── */

.print {
  font: 600 0.66rem/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--label);
}
.print--faint { color: var(--ink-faint); }

/* ══ CHASSIS ══════════════════════════════════════════════════════════════ */

.rail {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(180deg, #1a1f24, #15181c);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 #0b0e10, 0 8px 24px rgba(0, 0, 0, 0.45);
}

.rail__mark {
  font: 600 0.82rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}
.rail__mark span { color: var(--ink-faint); }

.tabs { display: flex; gap: 2px; padding: 2px; }

.tab {
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  white-space: nowrap;
}
.tab[aria-selected="true"] {
  background: var(--panel-hi);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.tab:hover:not([aria-selected="true"]) { color: var(--ink-dim); }

.master { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; }
.master__plate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.72rem;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--well);
}
.master__plate.is-live {
  border-color: rgba(232, 65, 47, 0.55);
  background: rgba(232, 65, 47, 0.12);
}
.master__txt {
  font: 600 0.68rem var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.master__plate.is-live .master__txt { color: #ffc9c2; }

/* ── main + views ───────────────────────────────────────────────────────── */

main {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.25rem 1.1rem 2rem;
}

.view { display: grid; gap: 0.8rem; }
.view[hidden] { display: none; }

.viewbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.6rem 0.7rem;
}
.viewbar .print { flex: none; }
.viewbar__end { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ── bottom meter bridge ────────────────────────────────────────────────── */

.bridge {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.5rem 1.1rem;
  background: #111417;
  border-top: 1px solid var(--rule);
}
.bridge__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font: 400 0.7rem var(--mono);
  color: var(--ink-faint);
  white-space: nowrap;
}
.bridge__item b { color: var(--ink-dim); font-weight: 600; }
.bridge__item--end { margin-left: auto; }

.gauge { width: 110px; height: 8px; flex: none; overflow: hidden; }
.gauge > i {
  display: block;
  height: 100%;
  background: var(--signal);
  border-radius: 1px;
  box-shadow: 0 0 6px 0 rgba(88, 182, 212, 0.5);
  transition: width 0.4s ease;
}
.gauge.is-warn > i { background: var(--fault); box-shadow: 0 0 6px 0 rgba(232, 163, 61, 0.5); }
.gauge.is-full > i { background: var(--tally); box-shadow: 0 0 6px 0 rgba(232, 65, 47, 0.5); }

/* ══ CONTROLS ═════════════════════════════════════════════════════════════ */

.btn {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.78rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(180deg, #262e35, #1d2429);
  border: 1px solid var(--rule);
  border-top-color: rgba(255, 255, 255, 0.09);
  color: var(--ink-dim);
}
.btn:hover:not(:disabled) { color: var(--ink); border-color: #3d4852; }
.btn:active:not(:disabled) { background: linear-gradient(180deg, #1d2429, #262e35); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn--rec {
  background: linear-gradient(180deg, #ee5341, #d4351f);
  border-color: #b32b17;
  border-top-color: #f27a6c;
  color: #fff;
}
.btn--rec:hover:not(:disabled) { background: linear-gradient(180deg, #f2604f, #dd3a23); color: #fff; }
.btn--danger:hover:not(:disabled) { color: #ff9d91; border-color: rgba(232, 65, 47, 0.5); }
.btn--sm { padding: 0.32rem 0.58rem; font-size: 0.64rem; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover:not(:disabled) { border-color: var(--rule); }

.field {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  font: 400 0.85rem var(--mono);
  color: var(--ink);
  background: var(--well);
  border: 1px solid #0a0c0e;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.85);
}
.field::placeholder { color: var(--ink-faint); }
.field--sm { flex: 0 1 200px; }

select.field {
  flex: 0 0 auto;
  font-family: var(--mono);
  appearance: none;
  padding-right: 1.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ══ STATE PILLS ══════════════════════════════════════════════════════════ */

.state {
  display: inline-block;
  font: 600 0.64rem var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.22rem 0.52rem;
  border-radius: 2px;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  background: var(--well);
  white-space: nowrap;
}
.state--recording { color: #ffc9c2; border-color: rgba(232, 65, 47, 0.55); background: rgba(232, 65, 47, 0.13); }
.state--watching  { color: #b8e8ce; border-color: rgba(63, 191, 119, 0.42); background: rgba(63, 191, 119, 0.09); }
.state--starting,
.state--retrying,
.state--stopping,
.state--partial   { color: #f3d19b; border-color: rgba(232, 163, 61, 0.45); background: rgba(232, 163, 61, 0.1); }
.state--failed    { color: #ff9d91; border-color: rgba(232, 65, 47, 0.45); background: rgba(232, 65, 47, 0.08); }
.state--paused    { color: var(--ink-dim); border-style: dashed; }

/* ══ THE CHANNEL STRIP — the signature unit ═══════════════════════════════ */

.strip { padding: 0.85rem 0.95rem; display: grid; gap: 0.7rem; }

.strip__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}
.strip__id { min-width: 0; }
.strip__name {
  font: 600 1rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.strip__meta {
  margin: 0;
  font: 400 0.76rem var(--mono);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.strip__read { display: grid; gap: 0.25rem; justify-items: end; text-align: right; }

/* the deck readout: a thin oversized counter, not a bold KPI number */
.timecode {
  font: 200 clamp(1.6rem, 4.2vw, 2.5rem) / 1 var(--mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.timecode--idle {
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  font-weight: 300;
  color: var(--ink-faint);
}

.strip__foot { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.strip__actions { margin-left: auto; display: flex; gap: 0.4rem; }

.stat { font: 400 0.78rem var(--mono); color: var(--ink-faint); white-space: nowrap; }
.stat b { color: var(--ink-dim); font-weight: 600; }

.strip__error {
  font: 400 0.76rem var(--mono);
  color: #ff9d91;
  overflow-wrap: anywhere;
  margin: 0;
}

@media (max-width: 640px) {
  .strip__top { grid-template-columns: auto minmax(0, 1fr); }
  .strip__read { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .strip__actions { margin-left: 0; }
}

/* ══ SIGNATURE: the segment ladder ════════════════════════════════════════ */

.ladder { display: flex; gap: 3px; height: 12px; align-items: stretch; }
.ladder--lg { height: 18px; gap: 4px; }

.rung {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
  background: var(--well);
  border: 1px solid #0a0c0e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.rung--done {
  background: #39434c;
  border-color: #2a323a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.rung--live > i {
  display: block;
  height: 100%;
  background: var(--tally);
  box-shadow: 0 0 8px 0 rgba(232, 65, 47, 0.6);
  transition: width 1s linear;
}
button.rung { cursor: pointer; }
button.rung:hover { border-color: var(--signal); }
button.rung[aria-current="true"] {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 8px 0 rgba(88, 182, 212, 0.6);
}

/* ══ DRILL-DOWN ═══════════════════════════════════════════════════════════ */

.drill {
  border-top: 1px solid var(--rule);
  margin: 0 -0.95rem -0.85rem;
  padding: 0.85rem 0.95rem;
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 0.85rem;
}
.drill__grid { display: grid; gap: 0.45rem 1.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0.4rem 0.9rem; font: 400 0.78rem var(--mono); }
.kv dt { color: var(--ink-faint); white-space: nowrap; }
.kv dd { margin: 0; color: var(--ink-dim); text-align: right; overflow-wrap: anywhere; }
.kv dd b { color: var(--ink); font-weight: 600; }

.stderr {
  margin: 0;
  padding: 0.65rem 0.75rem;
  font: 400 0.72rem/1.55 var(--mono);
  color: var(--ink-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 12rem;
  overflow-y: auto;
}

/* ══ LIBRARY ══════════════════════════════════════════════════════════════ */

.drawer { overflow: hidden; }
.drawer__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--panel-hi);
  border: 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.drawer__head:hover { background: #262e35; }
.drawer__name {
  font: 600 0.82rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.drawer__tot { margin-left: auto; font: 400 0.72rem var(--mono); color: var(--ink-faint); }
.drawer__chev { font: 400 0.7rem var(--mono); color: var(--ink-faint); transition: transform 0.15s; }
.drawer[data-open="false"] .drawer__chev { transform: rotate(-90deg); }
.drawer[data-open="false"] .drawer__body { display: none; }

.sess {
  display: grid;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.85rem;
  grid-template-columns: auto minmax(0, 1.5fr) repeat(3, minmax(0, 0.62fr)) auto;
  border-bottom: 1px solid var(--rule-soft);
}
.sess:last-child { border-bottom: 0; }
.sess:hover { background: rgba(255, 255, 255, 0.018); }
.sess__id { font: 400 0.78rem var(--mono); color: var(--ink-dim); overflow-wrap: anywhere; }
.sess__id small { display: block; color: var(--ink-faint); font-size: 0.92em; }
.sess__n { font: 500 0.8rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.sess__n small { display: block; color: var(--ink-faint); font-weight: 400; }
.sess__act { display: flex; gap: 0.35rem; justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 760px) {
  .sess { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.35rem; }
  .sess__act { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ══ SYSTEM ═══════════════════════════════════════════════════════════════ */

.panels { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.pan { padding: 1rem 1.05rem; }
.pan__h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.pan__h .print { flex: 1; }

.subs { display: grid; gap: 0.3rem; margin-top: 0.85rem; }
.sub {
  display: flex;
  align-items: center;
  /* A long login next to a long subscription status wraps the pill group to
     its own line rather than hyphenating the channel name. */
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  font: 400 0.74rem var(--mono);
  color: var(--ink-dim);
}
.sub__name { min-width: 0; overflow-wrap: anywhere; }

/* The two event types Twitch holds per channel, paired on one row. */
.sub__evts { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-left: auto; }
.evt {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.05rem 0.4rem;
  font: 400 0.7rem var(--mono);
  border: 1px solid var(--rule);
  border-radius: 2px;
  white-space: nowrap;
}
.evt--ok { color: var(--cue); border-color: rgba(63, 191, 119, 0.3); }
.evt--bad { color: var(--tally); border-color: rgba(232, 65, 47, 0.45); }
.evt__s { color: var(--ink-faint); }

/* ══ PREVIEW DECK ═════════════════════════════════════════════════════════ */

dialog.deck {
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  max-width: min(820px, 94vw);
  width: 100%;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
dialog.deck::backdrop { background: rgba(6, 8, 12, 0.74); }

.deck__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel-hi);
}
.deck__title { font: 500 0.8rem var(--mono); color: var(--ink); overflow-wrap: anywhere; margin: 0; }
.deck__body { padding: 0.85rem; display: grid; gap: 0.7rem; }
.deck__body video { width: 100%; max-height: 56vh; background: #000; border-radius: 2px; display: block; }
.deck__foot { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* ══ TOASTS ═══════════════════════════════════════════════════════════════ */

.toasts {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--bridge-h) + 1rem);
  z-index: 60;
  display: grid;
  gap: 0.5rem;
  max-width: min(420px, calc(100vw - 2rem));
}
.toast {
  padding: 0.6rem 0.8rem;
  font: 400 0.82rem var(--sans);
  color: var(--ink);
  background: var(--panel-hi);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--signal);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow-wrap: anywhere;
  animation: toast-in 0.18s ease-out;
}
.toast--error { border-left-color: var(--tally); }
.toast--ok { border-left-color: var(--cue); }
/* Repeat counter: one toast that says "×12" beats twelve toasts. */
.toast__n { margin-left: 0.5rem; color: var(--ink-faint); font: 400 0.74rem var(--mono); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ══ MISC ═════════════════════════════════════════════════════════════════ */

.empty {
  padding: 1.6rem 1.1rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.9rem;
  line-height: 1.6;
}
.empty b { display: block; color: var(--ink-dim); font-weight: 600; margin-bottom: 0.3rem; }

.tokenbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.65rem 0.7rem;
  border-left: 2px solid var(--fault);
}

.spinner { color: var(--ink-faint); font: 400 0.8rem var(--mono); padding: 1.2rem; text-align: center; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}