/* ============================================================
   UserTapes — app design system ("Retro-Futuristic Minimalist")
   Shared by every layout-rendered app page (auth, dashboard).
   Dieter Rams (Braun) x Teenage Engineering: bone white, graphite,
   1px hairline dividers, faceplate panels, clicky keys, and ONE
   functional spot color — Recording Red. Less, but better.
   Matches the marketing landing page (pages/home).
   ============================================================ */

:root {
  --bone:      #F4F4F1;   /* page background */
  --panel:     #FBFBF9;   /* faceplate surface */
  --ink:       #1C1C1E;   /* text / graphite */
  --ink-2:     #6E6E71;   /* secondary text */
  --ink-3:     #A9A9AB;   /* tertiary */
  --red:       #FF3B30;   /* the ONE spot color: recording / live / primary action */
  --screw:     #C9C9C5;   /* fastener gray */
  --lcd:       #26262A;   /* embedded display background */
  --lcd-text:  #F2F2ED;   /* display text */
  --ok:        #4F9E5B;   /* status green (semantics only, never decoration) */

  /* legacy token aliases — older markup/inline styles reference these */
  --paper:     var(--bone);
  --paper-2:   #ECECE9;
  --card:      var(--panel);
  --muted:     var(--ink-2);
  --line:      #E2E2DF;
  --border:    #E2E2DF;
  --screen:    #1C1C1E;
  --phosphor:  var(--lcd-text);
  --magenta:   var(--red);
  --cyan:      var(--ink-2);
  --green:     var(--ok);
  --amber:     var(--red);

  --ease: cubic-bezier(.2,.8,.2,1);
  --mono: ui-monospace, "SF Mono", "Geist Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  --display: var(--sans);
  --body: var(--sans);
}

/* same override the marketing landing page (pages/home) already ships --
   both stylesheets share these variable names by design, this was just
   never ported over. --screen/--lcd-text/--ok/--red stay put in both modes,
   same choice landing makes: the "screen" surfaces are meant to read as
   dark hardware regardless of site theme, not flip with it. */
@media (prefers-color-scheme: dark) {
  :root {
    --bone:     #1C1C1E;
    --panel:    #232326;
    --line:     #2C2C2E;
    --border:   #2C2C2E;
    --ink:      #F2F2ED;
    --ink-2:    #A0A0A3;
    --ink-3:    #6E6E71;
    --screw:    #48484B;
    --lcd:      #111113;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: #fff; }

/* ---------- mono microlabels + status LED ---------- */
.osd {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}
.osd b { color: var(--red); font-weight: 400; }
.rec-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); vertical-align: middle; margin-right: 8px;
  animation: ledPulse 1.6s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,59,48,.4); }
  50%      { opacity: .75; box-shadow: 0 0 0 5px transparent; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.chroma { color: var(--ink); }

/* ---------- clicky hardware keys (buttons) ---------- */
.btn {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 500; text-decoration: none; cursor: pointer;
  padding: 12px 20px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-width: 3px;   /* key-travel depth */
  transition: transform .08s var(--ease), border-bottom-width .08s var(--ease), border-color .15s, background .15s, color .15s;
  white-space: nowrap; user-select: none;
}
.btn:hover { transform: translateY(1px); border-bottom-width: 2px; }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn--primary {
  width: 100%; color: #fff; background: var(--red);
  border-color: #C42B22;
}
.btn--ghost { background: var(--panel); }
.btn--ghost:hover { border-color: var(--ink); border-bottom-width: 2px; }
.btn--danger { background: var(--panel); color: var(--red); border-color: var(--line); }
.btn--danger:hover { border-color: var(--red); }

/* ---------- top bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 500;
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
.appbar__inner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 52px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
/* the logo: two tape spools in a rounded rectangle — canonical version
   matches the landing page exactly: real <i> children on a flex row, not
   pseudo-elements, so spacing is identical everywhere it appears. */
.brand__mark {
  width: 34px; height: 20px; border: 1.5px solid var(--ink); border-radius: 6px;
  display: flex; align-items: center; justify-content: space-evenly; flex: 0 0 auto;
  /* the tape: one red line spanning the two reels — the whole product in
     one stroke, and the only red in the mark */
  background: linear-gradient(var(--red), var(--red)) center / 10px 1.5px no-repeat;
}
.brand__mark i { width: 7px; height: 7px; border: 1.5px solid var(--ink); border-radius: 50%; }
.brand__name { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; font-size: 14px; text-transform: none; }
.brand__name b { color: var(--ink); font-weight: 700; }
.appbar__nav { display: flex; align-items: center; gap: 22px; }
.appbar__nav form { margin: 0; }
.appbar__link { color: var(--ink-2); text-decoration: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; transition: color .15s; }
.appbar__link:hover { color: var(--ink); }
.appbar__linkbtn { background: none; border: none; padding: 0; cursor: pointer; }
@media (max-width: 560px) { .appbar__nav { gap: 14px; } }

/* ---------- page shell ---------- */
.main { flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }

/* ---------- flash messages ---------- */
.flash { width: 100%; max-width: 1400px; margin: 16px auto 0; padding: 0 24px; }
.flash__msg {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  padding: 11px 15px; border-radius: 8px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2);
}
.flash__msg::before { content: "●"; font-size: 9px; }
.flash__msg--notice::before { color: var(--ok); }
.flash__msg--alert::before  { color: var(--red); }

/* ============================================================
   AUTH — sign-in / sign-up faceplate
   ============================================================ */
/* Signed-out pages share the app's module faceplate: page-style head above,
   [ UT-XX ] module below, mono links underneath — same language as Setup,
   Agent access, and Team. */
.auth { flex: 1 0 auto; display: grid; place-items: center; padding: 48px 24px 72px; }
.auth__col { width: 100%; max-width: 460px; }
.auth__col .module { margin-bottom: 0; }

.auth__head { text-align: center; margin-bottom: 22px; }
.auth__eyebrow { margin-bottom: 12px; display: inline-flex; align-items: center; }
.auth__title {
  font-family: var(--sans); font-weight: 700; text-transform: none;
  font-size: 26px; line-height: 1.05; letter-spacing: -.02em; margin: 0; color: var(--ink);
}
.auth__sub { color: var(--ink-2); font-size: 14px; margin: 10px 0 0; }

/* account page: keep form lines readable inside the wide narrow-page module */
.authform { max-width: 480px; }

/* form fields */
.ofield { margin-bottom: 18px; }
.ofield__label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px;
}
.ofield__input {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--bone); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 13px; transition: border-color .15s, box-shadow .15s; outline: none;
}
.ofield__input::placeholder { color: var(--ink-3); }
.ofield__input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,28,30,.08); }
.ofield__hint { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 7px 0 0; letter-spacing: .04em; }

.ofield--check { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ofield--check input { width: 15px; height: 15px; accent-color: var(--red); }
.ofield--check label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; margin: 0; }

.auth__actions { margin-top: 22px; }

/* footer links row under the form */
.auth__links {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center;
}
.auth__links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; transition: color .15s;
}
.auth__links a:hover { color: var(--ink); }
.auth__links form { margin: 0; }
.auth__links button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: none; border: none; padding: 0; cursor: pointer;
}
.auth__links button:hover { color: var(--ink); }

/* validation errors */
.oerrors {
  border: 1px solid var(--red); background: color-mix(in srgb, var(--red) 5%, var(--panel));
  border-radius: 8px; padding: 14px 16px; margin-bottom: 20px;
}
.oerrors__title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 8px; }
.oerrors ul { margin: 0; padding-left: 18px; }
.oerrors li { color: var(--ink); font-size: 13.5px; }

/* "danger zone" block on account edit */
.auth__danger { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.auth__danger h3 { font-family: var(--sans); font-weight: 700; font-size: 14px; margin: 0 0 6px; color: var(--ink); }
.auth__danger p { color: var(--ink-2); font-size: 13px; margin: 0 0 14px; }
.auth__reconfirm { font-family: var(--mono); font-size: 12px; color: var(--red); margin-bottom: 16px; }

/* ---------- team page ---------- */
.team { display: flex; flex-direction: column; }
.team__row {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-top: 1px solid var(--line); font-size: 13.5px;
}
.team__row:first-child { border-top: 0; }
.team__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.team__dot--owner { background: var(--red); }
.team__email { color: var(--ink); font-weight: 600; }
.team__role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.team__since { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: auto; }
.team__remove { flex: 0 0 auto; }
.team__row form { margin: 0; }

/* ---------- billing page ---------- */
.billing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.billing-plan { border: 1px solid var(--line); border-radius: 10px; padding: 16px 14px; display: flex; flex-direction: column; }
.billing-plan--current { border-color: var(--ink-3); background: var(--bone); }
.billing-plan__name { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.billing-plan__price { font-family: var(--sans); font-weight: 700; font-size: 22px; margin-bottom: 2px; }
.billing-plan__price span { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--ink-3); }
.billing-plan__annual { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-bottom: 12px; }
.billing-plan__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-top: auto; }
.billing-plan .btn { font-size: 12px; padding: 8px 10px; margin-top: auto; }

/* "danger zone" at the bottom of the player's Details tab */
.tape-danger { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.tape-danger .btn { width: auto; font-size: 12px; padding: 8px 14px; }
.tape-danger__hint { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ---------- legal pages (privacy / terms) ---------- */
.legal { border-bottom: 1px solid var(--line); }
.legal__sec { border-top: 1px solid var(--line); padding: 24px 0 26px; }
.legal__sec h2 {
  font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink);
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px;
}
.legal__idx { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--red); }
.legal__sec p, .legal__sec li { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); max-width: 72ch; }
.legal__sec p { margin: 0 0 12px; }
.legal__sec p:last-child { margin-bottom: 0; }
.legal__sec ul { margin: 0 0 12px; padding-left: 20px; }
.legal__sec li { margin-bottom: 6px; }
.legal__sec b { color: var(--ink); font-weight: 600; }
.legal__sec a { color: var(--red); }

/* ---------- footer ---------- */
.appfoot { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--bone); }
.appfoot__inner {
  width: 100%; max-width: 1400px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.appfoot__inner b { color: var(--red); }
.appfoot a { color: var(--ink-3); text-decoration: none; }
.appfoot a:hover { color: var(--ink); }

@media (max-width: 520px) {
  .auth__card { padding: 28px 22px 26px; }
  .auth__title { font-size: 22px; }
  .appbar__inner { padding: 0 16px; }
}

/* ============================================================
   DASHBOARD — sites & tapes
   ============================================================ */
.page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 44px 24px 72px; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.page__eyebrow { margin-bottom: 12px; display: inline-flex; align-items: center; }
.page__title { font-family: var(--sans); font-weight: 700; text-transform: none; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.02; letter-spacing: -.03em; margin: 0; color: var(--ink); }
.page__title em { font-style: normal; color: var(--red); }
.page__sub { color: var(--ink-2); font-size: 15px; margin: 10px 0 0; }
.crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs span { opacity: .5; margin: 0 8px; }

/* site cards — modular faceplate units, pocket-operator style */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.deck {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: 8px; overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(28,28,30,.05), 0 6px 14px -10px rgba(28,28,30,.12);
  transition: transform .15s var(--ease), border-color .15s, box-shadow .2s;
}
.deck:hover { transform: translateY(-2px); border-color: var(--ink-3); box-shadow: 0 2px 3px rgba(28,28,30,.06), 0 12px 24px -12px rgba(28,28,30,.18); }
/* module index, top right — [ 01 ] */
.deck__idx { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-3); }
/* top row: power LED + site name + domain */
.deck__bar {
  display: flex; align-items: center; gap: 10px; padding: 13px 64px 0 16px; /* right gap clears the [ NN ] index */
  background: none; border-bottom: 0;
}
.deck__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--red);
  box-shadow: none; animation: ledPulse 1.6s ease-in-out infinite;
}
.deck__name {
  font-family: var(--sans); font-weight: 700; text-transform: none; font-size: 15px; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deck__domain {
  margin-left: 0; flex: 1 1 auto; min-width: 0; max-width: none;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* hairline divider where the cassette slot used to be */
.deck__slot { height: 1px; margin: 12px 16px 0; background: var(--line); border-bottom: 0; }
.deck__slot::before { content: none; }
/* the readout — embedded LCD */
.deck__screen {
  position: relative; margin: 14px 16px; padding: 16px 14px; border-radius: 6px;
  background: var(--lcd); border: 1px solid color-mix(in srgb, var(--lcd) 70%, #000);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: space-evenly;
}
.deck__scan { display: none; }
.deck__stat { position: relative; text-align: center; }
.deck__stat b {
  display: block; font-family: var(--mono); font-weight: 700; font-size: 24px; line-height: 1;
  color: var(--lcd-text); text-shadow: none; font-variant-numeric: tabular-nums;
}
.deck__stat span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #8B8B90; }
/* foot: three tiny keys + brand */
.deck__foot { display: flex; align-items: center; gap: 6px; padding: 0 16px 14px; background: none; }
.deck__btn {
  width: 20px; height: 14px; border-radius: 4px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  background: var(--panel); box-shadow: none;
}
.deck__btn--rec { background: var(--red); border-color: #C42B22; }
.deck__btn--play { background: var(--panel); border-color: var(--line); }

/* generic panel — faceplate */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.panel + .panel { margin-top: 18px; }
.panel__title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }

/* token + snippet with copy — embedded LCD display */
/* code snippet + its copy key: snippet runs full width, the copy key sits
   under it as a smaller control */
.copyrow { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.code {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--lcd-text);
  background: var(--lcd); border: 1px solid color-mix(in srgb, var(--lcd) 70%, #000); border-radius: 6px; padding: 12px 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
  overflow-x: auto; white-space: pre; line-height: 1.7;
}
.code--wrap { white-space: pre-wrap; word-break: break-all; }
.code--block { white-space: pre; margin: 0; }

/* ---------- agent access page: faceplate modules ---------- */
/* Narrow content column for reading-first pages (setup, agent access, console, alerts, sites) — the nav stays full width. */
.page--narrow { max-width: 940px; }
/* the deck page matches the nav bar's content width */
.page--deck { max-width: 1400px; }

/* A hardware module: screwed faceplate with a silkscreened head strip.
   Same corner-fastener detail as the auth card / landing plates. */
.module {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(28,28,30,.05), 0 4px 10px -6px rgba(28,28,30,.08);
  margin-bottom: 20px;
}
.module::before, .module::after,
.module .module__screws::before, .module .module__screws::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--screw), color-mix(in srgb, var(--screw) 60%, var(--ink)));
  box-shadow: inset 0 0 0 1px rgba(28,28,30,.18); z-index: 1;
}
.module::before { top: 9px; left: 9px; }
.module::after  { top: 9px; right: 9px; }
.module .module__screws::before { bottom: 9px; left: 9px; }
.module .module__screws::after  { bottom: 9px; right: 9px; }

.module__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.module__idx { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
.module__title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.module__lights { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.module__grille { width: 24px; height: 14px; background-image: radial-gradient(var(--ink-3) 1px, transparent 1.2px); background-size: 5px 5px; opacity: .7; }
.module__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); opacity: .5; }
.module__dot--on { background: var(--red); opacity: 1; animation: ledPulse 1.6s ease-in-out infinite; }
.module__body { padding: 20px 22px 22px; }

/* model/serial microprint, landing-deck style */
.aa-microprint { text-align: right; font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin: -6px 4px 0; }

.aa-creds { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .aa-creds { grid-template-columns: 1fr; } }
.aa-code { font-family: var(--mono); font-size: .92em; color: var(--ink); background: color-mix(in srgb, var(--line) 45%, transparent); padding: 1px 5px; border-radius: 4px; }
.aa-hint { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); margin: 10px 0 0; line-height: 1.7; }
.aa-steps { list-style: none; counter-reset: aastep; margin: 18px 0 0; padding: 0; }
.aa-steps li { counter-increment: aastep; position: relative; padding: 0 0 20px 44px; }
.aa-steps li:last-child { padding-bottom: 4px; }
/* the step rail: number, tick, and a hairline connecting to the next step */
.aa-steps li::before {
  content: "0" counter(aastep); position: absolute; left: 0; top: 1px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--red);
}
.aa-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 8px; top: 26px; bottom: 6px; width: 1px; background: var(--line);
}
.aa-steps p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.aa-steps p b { color: var(--ink); }
.code .tag { color: #8B8B90; } .code .at { color: #8B8B90; } .code .st { color: var(--lcd-text); } .code .cm { color: #6E6E71; }
.btn--copy {
  flex: 0 0 auto; align-self: flex-start;
  padding: 6px 14px; font-size: 11px; border-bottom-width: 2px;
}
.btn--copy:hover { border-bottom-width: 1px; }
.btn.is-copied { background: var(--ok); color: #fff; border-color: #3E7E48; }

/* key/value list */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; }
.kv dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink); }
.kv--flat { gap: 8px 18px; }

/* compact single-line page header for the deck view */
.deckhead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.deckhead__title { font-family: var(--sans); font-weight: 700; text-transform: none; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.02em; line-height: 1; margin: 0; color: var(--ink); }
.deckhead__meta { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
/* only the FIRST link takes the auto margin, so multiple links group at the right edge */
/* site-scope hardware keys on the deck header (Setup / Agent / Alerts / Browse) */
.deckhead__keys { margin-left: auto; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
/* quiet utility links, same visual language as the theater bar's Share /
   Fullscreen toggles — the header reads as part of the instrument, not a
   separate row of buttons floating above it */
.deckhead__key {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; transition: color .15s;
}
.deckhead__key svg { flex: 0 0 auto; }
.deckhead__key:hover { color: var(--ink); }
.btn--head { padding: 7px 13px; font-size: 11px; border-bottom-width: 2px; }
.btn--head:hover { border-bottom-width: 1px; }

/* flat metadata rows — hairline divider, not a card */
.meta-strip { display: flex; gap: 44px; flex-wrap: wrap; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--line); }
.meta-strip__group { flex: 1 1 200px; min-width: 180px; }
.meta-strip__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }

/* tapes log table */
.log { width: 100%; border-collapse: collapse; }
.log th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 16px 12px; border-bottom: 1px solid var(--line); font-weight: 400;
}
.log td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log tbody tr { transition: background .15s; }
.log tbody tr:hover { background: var(--bone); }
.log a { color: var(--ink); text-decoration: none; }
.log a:hover { color: var(--red); }
.log .mono { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.log .log__sum { font-size: 12.5px; color: var(--ink-2); max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* status badges — an LED and a label, no pill theatrics */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); }
.badge::before { content: "●"; font-size: 8px; }
.badge--recording::before { color: var(--red); }
.badge--recording { color: var(--ink); }
.badge--idle::before { color: var(--ink-3); }
.badge--finalizing::before { color: var(--ink-2); }
.badge--finalized::before { color: var(--ok); }

/* filter bar above the tapes log — quiet mono controls, red only when a
   signal filter is engaged */
.filterbar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.filterbar__input {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 10px; width: 220px; outline: none; transition: border-color .15s;
}
.filterbar__input::placeholder { color: var(--ink-3); }
.filterbar__input:focus { border-color: var(--ink); }
.filterbar__chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); background: var(--panel); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 11px; transition: border-color .15s, color .15s;
}
.filterbar__chip:hover { border-color: var(--ink-3); }
.filterbar__chip.is-on { color: var(--red); border-color: var(--red); }
.filterbar__chip input { width: 12px; height: 12px; accent-color: var(--red); margin: 0; }
.filterbar__select {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 8px; outline: none; cursor: pointer;
}
.filterbar__go {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; padding: 7px 12px; cursor: pointer;
}
.filterbar__go:active { transform: translateY(1px); border-bottom-width: 1px; }
.filterbar__clear { font-family: var(--mono); font-size: 11px; color: var(--ink-2); text-decoration: none; }
.filterbar__clear:hover { color: var(--red); }
.filterbar__count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: auto; }

/* alerts page */
.alertform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.alertform__row { display: flex; gap: 24px; }
.alertbtn {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  padding: 5px 10px; cursor: pointer; text-decoration: none;
}
.alertbtn:hover { border-color: var(--ink-3); color: var(--ink); }
.alertbtn:active { transform: translateY(1px); border-bottom-width: 1px; }
.alertbtn--danger:hover { border-color: var(--red); color: var(--red); }
td form { display: inline-block; margin-left: 6px; }
.alertrow--off td { opacity: .45; }
/* the one place an LED means something: lit = armed and watching new tapes,
   hollow = paused. Red is the hardware convention for "armed to record". */
.alert__led {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; vertical-align: baseline;
  border: 1.5px solid var(--ink-3); background: transparent;
}
.alert__led--armed { border-color: var(--red); background: var(--red); }
@media (max-width: 700px) { .alertform__grid { grid-template-columns: 1fr; } }

/* signal chips — "this tape has rage clicks / errors", the list-level mirror
   of the event stream's red rows (and the MCP list_tapes filters) */
.sig {
  display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); border: 1px solid currentColor;
  border-radius: 4px; padding: 1px 5px; line-height: 1.5; vertical-align: 1px;
}

/* empty state */
.empty { text-align: center; border: 1px dashed var(--line); border-radius: 8px; padding: 56px 28px; background: var(--panel); }
.empty__reel {
  width: 64px; height: 38px; border-radius: 10px; margin: 0 auto 20px; position: relative;
  border: 2px solid var(--ink-3); background: transparent; box-shadow: none; animation: none;
}
.empty__reel::before, .empty__reel::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border: 2px solid var(--ink-3); border-radius: 50%;
  background: transparent; inset: auto;
}
.empty__reel::before { left: 9px; }
.empty__reel::after { right: 9px; }
.empty h3 { font-family: var(--sans); font-weight: 700; text-transform: none; font-size: 19px; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
.empty p { color: var(--ink-2); font-size: 14.5px; margin: 0 auto 22px; max-width: 34em; }

/* auth-card form reused for "new site" but left-aligned in a panel */
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
.form-actions .btn--primary { width: auto; }

/* ============================================================
   THE COCKPIT — one hardware unit: chat panel | tape deck | info.
   The outer plate owns the chrome (border, radius, shadow); the
   chat panel is bolted onto the deck's left edge, mirroring the
   info sidesheet on the right. Chat sits OUTSIDE the turbo frame
   so the conversation persists while tapes swap in the deck.
   ============================================================ */
.cockpit {
  display: flex; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,28,30,.05), 0 14px 30px -18px rgba(28,28,30,.15);
  /* fills down to the viewport edge so the whole cockpit is in view without
     scrolling -- ~192px is the measured chrome above it */
  height: calc(100vh - 192px);
}
/* the chat sidesheet: same construction as .theater__info, opposite edge.
   The 26px bottom padding lines the Ask row up with the transport keys
   across the divider (transport: 12px pad + 34px keys + legends below). */
.cockpit__chat {
  flex: 0 0 360px; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--panel);
  padding: 14px 16px 26px;
}
.cockpit__chat .infotabs { flex: 0 0 auto; }
/* padding-right keeps the scrollbar off the bubbles; stable gutter stops the
   log reflowing when the scrollbar appears */
.cockpit__chat .chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 10px; scrollbar-gutter: stable; }
.cockpit__chat .chat__form { flex: 0 0 auto; }
.chat__empty p { margin: 0 0 6px; }
/* turbo-frame is display:block by default; flex lets .theater stretch */
.cockpit turbo-frame#deck { flex: 1 1 auto; min-width: 0; display: flex; }

/* ============================================================
   THE PLAYER (theater) — hardware deck: screen | info. The
   cockpit plate above owns the chrome; in cinema/fullscreen the
   theater escapes it and stands alone. The screen is the one
   place that stays genuinely dark.
   ============================================================ */
.theater {
  background: var(--panel); overflow: hidden;
  display: flex; align-items: stretch;
  flex: 1 1 auto; min-width: 0; height: 100%;
}
.theater__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.theater__bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px;
}
.theater__bar .url {
  color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-toggle {
  margin-left: auto; flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  transition: color .15s;
}
.bar-toggle:hover { color: var(--ink); }
.bar-toggle + .bar-toggle { margin-left: 16px; }

/* cinema mode: the whole deck fullscreened, transport still usable.
   .is-cinema is the CSS fallback when the Fullscreen API is unavailable. */
.theater:fullscreen { height: 100vh; border: 0; border-radius: 0; }
.theater.is-cinema {
  position: fixed; inset: 0; z-index: 1000;
  height: 100vh; border: 0; border-radius: 0;
}

/* the info side-panel: collapses to a slim rail (not width:0) so its own
   arrow toggle stays reachable, mirroring the tape shelf's collapse pattern
   on the opposite edge */
/* the sidesheet: fixed open — fullscreen is the focus mode, so no collapse.
   Tabs sit flush at the top like mode keys on one instrument. */
.theater__info {
  flex: 0 0 320px; width: 320px; overflow: hidden;
  border-left: 1px solid var(--line); background: var(--panel);
}
.theater__info__inner { width: 320px; height: 100%; overflow-y: auto; padding: 14px 16px 18px; }
.theater__info__inner .meta-strip__label:not(:first-child) { margin-top: 20px; }

/* readout tabs: quiet, structural — a hairline with an ink underline on
   the active tab */
.infotabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.infotabs__tab {
  padding: 0 0 9px; border: 0; background: none; cursor: pointer; position: relative;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  transition: color .15s;
}
.infotabs__tab:hover { color: var(--ink-2); }
.infotabs__tab.is-active { color: var(--ink); }
.infotabs__tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ink);
}

/* chat panel toolbar: New / History, quiet icon-buttons pinned to the
   right of the CHAT tab — same visual language as the deckhead's Setup/
   Alerts keys (small stroke icon + mono label, brightens on hover) */
.chat__toolbar { display: flex; gap: 14px; margin-left: auto; padding-bottom: 9px; }
.chat__toolbtn {
  display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  transition: color .15s;
}
.chat__toolbtn svg { flex: 0 0 auto; }
.chat__toolbtn:hover { color: var(--ink); }

/* conversation history list — replaces the message log while browsing */
.chat__history { display: flex; flex-direction: column; gap: 5px; }
.chat__historyrow {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 9px;
  border-radius: 7px; border: 1px solid var(--line); background: var(--panel);
  text-decoration: none; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .15s;
}
.chat__historyrow:hover { border-color: var(--ink-3); }
.chat__historyrow__title {
  font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat__historyrow__time { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.chat__historyback {
  align-self: flex-start; margin-bottom: 8px; border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.chat__historyback:hover { color: var(--ink); }

/* the event stream: timestamped mono rows, click to seek the tape there */
.stream { display: flex; flex-direction: column; }
.stream__loading { margin: 4px 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.stream__row {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 5px 6px; margin: 0 -6px; border: 0; border-radius: 5px; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-2);
  transition: background .12s, color .12s;
}
.stream__row:hover { background: var(--bone); color: var(--ink); }
.stream__t { flex: 0 0 auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stream__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream__row--hot, .stream__row--hot .stream__t { color: var(--red); }

/* the in-app agent chat: user bubbles right-aligned, assistant answers in an
   LCD-style readout block — same embedded-display language as the MCP
   terminal mockup on the marketing page */
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 120px; }

.chat__empty, .chat__notice { margin: 4px 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.chat__notice { color: var(--red); }
.chat__msg p { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; }
.chat__msg--user { align-self: flex-end; max-width: 88%; }
.chat__msg--user p { color: var(--ink); font-weight: 500; text-align: right; }
.chat__msg--assistant {
  background: var(--lcd); color: var(--lcd-text); border-radius: 6px; padding: 10px 12px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
}
.chat__msg--assistant p { font-family: var(--mono); color: var(--lcd-text); }
/* "thinking": the brand mark come to life — reels spin while the agent
   reads the tape. One red quarter on each reel makes the rotation legible. */
.chat__thinking { display: flex; align-items: center; padding: 4px 0; flex: 0 0 auto; }
.chat__thinking .chat__reel {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--ink-3); border-top-color: var(--red);
  animation: reelSpin .9s linear infinite;
}
.chat__thinking .chat__tapeline { width: 9px; height: 1.5px; background: var(--red); flex: 0 0 auto; }
.chat__thinking span {
  margin-left: 8px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
@keyframes reelSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat__thinking .chat__reel { animation: none; } }

.chat__form { display: flex; gap: 8px; margin-top: 12px; }
.chat__input {
  flex: 1; min-width: 0; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-family: var(--sans); font-size: 12.5px;
}
.chat__input:focus { outline: none; border-color: var(--ink-3); }
.chat__send {
  padding: 8px 14px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--red) 70%, #000);
  background: var(--red); color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
}
.chat__send:disabled { opacity: .55; cursor: default; }
/* tool-call receipts: the trace of MCP calls that grounded an answer — dim
   mono lines above the agent's output. Doubles as a live demo of the same
   verbs the user's own agents get over MCP. */
.chat__tools { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 1px 0 4px; }
.chat__tool { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); }
.chat__tool::before { content: "⚙ "; opacity: .7; }
/* receipts inside the LCD answer block: dim against the dark readout */
.chat__msg--assistant .chat__tool { color: #8B8B90; }
/* same-origin dashboard link the agent cited (a tape's player_url) — lives
   inside the dark LCD answer block, so the brightened red */
.chat__link { color: #FF6B61; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* clickable timestamp inside an answer: press it, the player seeks there */
.chat__stamp {
  display: inline; padding: 0 2px; border: 0; border-bottom: 1px solid #FF6B61;
  background: none; cursor: pointer; color: #FF6B61;
  font-family: var(--mono); font-size: inherit; line-height: inherit; font-variant-numeric: tabular-nums;
}
.chat__stamp:hover { background: color-mix(in srgb, var(--red) 30%, transparent); }

/* setup: collapsed once real tapes exist, one click away */

/* height-driven screen — fills what's left after bar/transport */
.theater__screen { position: relative; flex: 1; min-height: 0; background: var(--screen); display: grid; place-items: center; text-align: center; padding: 24px; }
.theater__scan { display: none; }
.theater__glow { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,.5); }
/* rrweb Replayer mounts inside .player__stage; .ph overlays as loading/error */
.player { position: absolute; inset: 0; z-index: 1; }
.player__stage { position: absolute; inset: 0; overflow: hidden; }
.player__stage .replayer-wrapper { position: absolute; top: 50%; left: 50%; }
.ph { position: relative; z-index: 4; }
.ph__reel {
  width: 72px; height: 42px; border-radius: 10px; margin: 0 auto 22px; position: relative;
  border: 2px solid #48484B; background: transparent; box-shadow: none; animation: none;
}
.ph__reel::before, .ph__reel::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border: 2px solid #48484B; border-radius: 50%;
  background: transparent; inset: auto;
}
.ph__reel::before { left: 10px; }
.ph__reel::after { right: 10px; }
.ph__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.ph h3 { font-family: var(--sans); font-weight: 700; text-transform: none; letter-spacing: -.02em; font-size: clamp(20px, 2.6vw, 26px); margin: 12px 0 10px; color: var(--lcd-text); }
.ph p { color: #A0A0A3; font-size: 14px; margin: 0 auto; max-width: 30em; }

/* transport: pocket-operator key row + machined dial on a precision rail */
.theater__transport { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 8px; background: var(--panel); border-top: 1px solid var(--line); }
.keycol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.legend { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tbtn {
  width: 38px; height: 34px; border-radius: 7px; position: relative; cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom-width: 3px;   /* key travel */
  box-shadow: none;
  transition: transform .08s var(--ease), border-bottom-width .08s var(--ease), border-color .15s;
}
.tbtn:hover { border-color: var(--ink-3); border-bottom-color: var(--ink-3); }
.tbtn:active, .tbtn.is-active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
/* rewind / fast-forward: paired CSS triangles */
.tbtn--rw::before, .tbtn--rw::after, .tbtn--ff::before, .tbtn--ff::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0; border-style: solid;
}
.tbtn--rw::before { left: 38%; transform: translate(-50%, -50%); border-width: 5px 7px 5px 0; border-color: transparent var(--ink) transparent transparent; }
.tbtn--rw::after { left: 62%; transform: translate(-50%, -50%); border-width: 5px 7px 5px 0; border-color: transparent var(--ink) transparent transparent; }
.tbtn--ff::before { left: 38%; transform: translate(-50%, -50%); border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--ink); }
.tbtn--ff::after { left: 62%; transform: translate(-50%, -50%); border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--ink); }
/* play: the ONE colored function key; JS toggles .is-playing to swap in bars */
.tbtn--play { background: var(--red); border-color: #C42B22; }
.tbtn--play::before, .tbtn--play::after { content: ""; position: absolute; top: 50%; }
.tbtn--play::before {
  left: 54%; transform: translate(-50%, -50%);
  width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.tbtn--play.is-playing::before {
  left: 42%; transform: translate(-50%, -50%); border-style: none;
  width: 4px; height: 13px; background: #fff;
}
.tbtn--play.is-playing::after {
  left: 58%; transform: translate(-50%, -50%);
  width: 4px; height: 13px; background: #fff;
}
/* text keys: same chassis as the transport buttons, label instead of icon.
   is-active holds the key pressed-in (SKIP engaged, matching the JS default). */
.tbtn--text {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--ink);
  user-select: none;
}

/* scrubber: precision tick rail with a machined dial riding a red position line */
.bar {
  flex: 1; height: 34px; border-radius: 0; position: relative; cursor: pointer;
  background: none; border: 0; box-shadow: none;
}
/* signal markers: one red tick per rage/dead click or error, sitting on the
   rail — the timeline mirror of the Event stream's red rows */
.bar__mark {
  position: absolute; top: 50%; width: 2px; height: 13px; transform: translate(-50%, -50%);
  background: var(--red); z-index: 0; pointer-events: none;
}
.bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 9px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 7px);
}
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line);
}
.bar__fill {
  position: absolute; left: 0; top: 50%; bottom: auto; height: 2px; width: 0%;
  transform: translateY(-50%); border-radius: 1px; z-index: 1;
  background: var(--red); pointer-events: none;
}
.bar__fill::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translate(50%, -50%);
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--panel) 0 30%, transparent 31%),
    conic-gradient(from 0deg, var(--panel) 0deg, color-mix(in srgb, var(--panel) 75%, var(--ink)) 90deg, var(--panel) 180deg, color-mix(in srgb, var(--panel) 75%, var(--ink)) 270deg, var(--panel) 360deg);
  border: 1px solid var(--ink-3);
  box-shadow: 0 1px 2px rgba(28,28,30,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
/* timecode: tiny inset LCD chip with an unlit-segment ghost layer */
.theater__transport .tc {
  margin-left: 4px; margin-top: 6px; position: relative;
  font-family: var(--mono); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--lcd); color: var(--lcd-text);
  padding: 3px 9px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--lcd) 70%, #000);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.55);
  white-space: nowrap;
}
.theater__transport .tc .ghost { position: absolute; left: 9px; top: 3px; opacity: .14; user-select: none; }

/* the tape shelf: one tight row per tape, now a tab inside the info panel
   ("Tapes") — the panel's own scroll handles overflow */
.shelf { display: flex; flex-direction: column; gap: 5px; }
/* empty shelf: same tape-reel motif as the sites index empty state, scaled
   down to fit this narrower column, with a static (non-recording) idle dot
   so it doesn't read as "currently live" before anything's been recorded */
.shelf__empty { padding: 26px 14px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel); }
.shelf__empty__reel {
  display: block; width: 38px; height: 22px; margin: 0 auto 14px; position: relative;
  border: 1.5px solid var(--ink-3); border-radius: 6px;
}
.shelf__empty__reel::before, .shelf__empty__reel::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border: 1.5px solid var(--ink-3); border-radius: 50%;
}
.shelf__empty__reel::before { left: 5px; }
.shelf__empty__reel::after { right: 5px; }
.shelf__empty__status {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 8px;
}
.shelf__empty__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.shelf__empty__body { color: var(--ink-2); font-size: 12.5px; line-height: 1.55; margin: 0 auto; max-width: 30ch; }
.shelf__tape {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border-radius: 7px; border: 1px solid var(--line); background: var(--panel);
  text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s;
}
.shelf__tape:hover { border-color: var(--ink-3); }
.shelf__tape.is-active {
  background: var(--lcd); border-color: var(--ink); color: var(--lcd-text);
  box-shadow: none;
}
/* tape icon: the two-spool mark, miniature */
.shelf__reel {
  width: 22px; height: 14px; border-radius: 4px; flex: 0 0 auto; position: relative;
  border: 1.5px solid currentColor; background: transparent; opacity: .8;
}
.shelf__reel::before, .shelf__reel::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%;
  background: transparent; inset: auto;
}
.shelf__reel::before { left: 3px; }
.shelf__reel::after { right: 3px; }
.shelf__tape.is-active .shelf__reel { animation: none; }
/* status LED, sat on the tape icon's corner */
.shelf__dot {
  position: absolute; z-index: 1; bottom: -3px; right: -3px;
  width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--panel);
}
.shelf__tape.is-active .shelf__dot { border-color: var(--lcd); }
.shelf__dot.badge--recording { background: var(--red); }
.shelf__dot.badge--idle { background: var(--ink-3); }
.shelf__dot.badge--finalizing { background: var(--ink-2); }
.shelf__dot.badge--finalized { background: var(--ok); }
.shelf__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.shelf__url { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf__sub { font-family: var(--mono); font-size: 10px; opacity: .65; }
/* watched (opened at least once) reads as passive — dimmed, same shape as
   an already-read row in a mail list. Unwatched tapes get no extra
   decoration; the row's normal weight/opacity IS the "new" state, so
   nothing needs to change there. Never dims the tape currently loaded in
   the player -- it's watched almost immediately after opening, but it's
   still the one thing on screen and should never look faded. */
.shelf__tape.is-watched:not(.is-active) { opacity: .55; }
.shelf__tape.is-watched:not(.is-active):hover { opacity: .85; }

/* the Tapes tab's unwatched-count badge — a small filled pill, same red as
   the REC dot elsewhere (this app's one spot color already means
   "live / needs attention", which a new-tape count is a natural extension of) */
.infotabs__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 4px; margin-left: 5px;
  border-radius: 8px; background: var(--red); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0;
  vertical-align: 1px;
}
@media (max-width: 1280px) {
  .cockpit__chat { flex-basis: 300px; }
  .theater__info { flex: 0 0 280px; width: 280px; }
  .theater__info__inner { width: 280px; }
}

@media (max-width: 760px) {
  /* stack: deck first (the thing you're looking at), chat below within thumb
     reach. DOM order is chat-then-deck, so flip with order. */
  .cockpit { flex-direction: column; height: auto; }
  .cockpit__chat {
    order: 2; flex: 0 0 auto; max-height: 60vh;
    border-right: none; border-top: 1px solid var(--line);
    padding-bottom: 16px; /* stacked: nothing to align with anymore */
  }
  .cockpit turbo-frame#deck { order: 1; }
  .theater { flex-direction: column; height: auto; }
  .theater__screen { flex: none; aspect-ratio: 16 / 9; }
  .theater__info { width: auto; flex: 0 0 auto; border-left: none; border-top: 1px solid var(--line); }
  .theater__info__inner { width: auto; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto; }
}