/* ============================================================
   live.css — the seventh camera.

   Sits on top of cams.css: same rack-of-monitors register, same
   mono labels and hard rules. The stage is one big cam tile with a
   drawing layer over it; the ledger is a column of type beside it.
   The ink on this page is the scope green, and red is reserved for
   things that are small.
   ============================================================ */

.live{
  display:grid; gap:2px clamp(.8rem,2.4vw,2rem);
  grid-template-columns:minmax(0,1fr) clamp(220px,26vw,340px);
  padding:0 clamp(.8rem,2.4vw,2rem) clamp(1.5rem,4vw,3rem);
  align-items:start;
}
@media (max-width:820px){ .live{ grid-template-columns:1fr } }

/* ---------- the stage ---------- */
.cam--stage{ cursor:default; border-color:#2E4A36; aspect-ratio:352/240 }
.cam--stage:hover{ border-color:#2E4A36 }
.stage__feed{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:fill;
  filter:grayscale(.55) contrast(1.18) brightness(.92);
}
.stage__ovl{
  position:absolute; inset:0; width:100%; height:100%; display:block; z-index:3;
  pointer-events:none;
}
.cam--stage[data-lost="true"] .stage__feed{ opacity:.06 }
.cam--stage[data-lost="true"] .stage__ovl{ opacity:0 }
.cam__rec--live i{ background:#5FE08A }

.stage__read{
  font-family:var(--mono); font-size:.62rem; line-height:1.7; color:#8C948A;
  margin:.5rem 0 0; display:flex; gap:clamp(.8rem,3vw,2.2rem); flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.stage__read b{ color:#5FE08A; font-weight:400 }
.stage__read em{ color:#E5261F; font-style:normal }

.live__h{
  font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:#5F675D; margin:1.4rem 0 .4rem;
  border-top:1px solid #2A2E29; padding-top:.5rem;
}

/* ---------- the bank ---------- */
.bank{
  display:grid; gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}
.bank .cam{ cursor:pointer }
.bank .cam{ aspect-ratio:352/240 }
.bank .cam video{ width:100%; height:100%; display:block; object-fit:fill;
  filter:grayscale(.55) contrast(1.15) brightness(.85) }
.bank .cam[data-on="true"]{ border-color:#5FE08A }
.bank .cam[data-on="true"] .cam__lbl{ color:#5FE08A }
.bank .cam .cam__lbl{ font-size:.5rem }
.bank .cam .cam__inc{ font-size:.48rem }
.bank .cam[data-lost="true"] video{ opacity:.06 }
.bank__ovl{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none }
.ledger__stats dd small{ font-size:.55rem; opacity:.7 }

/* ---------- the ledger ---------- */
.ledger{
  border:1px solid #23271F; background:#060706; min-height:0;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; align-self:stretch;
}
.ledger__hd{
  display:flex; justify-content:space-between; gap:.5rem; padding:.35rem .5rem;
  border-bottom:1px solid #23271F; font-size:.56rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:#8C948A;
}
.ledger__hd [data-mode]{ color:#5FE08A; font-weight:400; margin-left:auto }
.ledger__knob{ font:inherit; letter-spacing:.16em; color:#8C948A; padding:0 .4rem; box-shadow:inset 0 0 0 1px #2A2E29 }
.ledger__knob[aria-pressed="true"]{ color:#0A0B0A; background:#5FE08A; box-shadow:none }
.ledger__knob:hover{ color:#EDF0EB }
.ledger__hd [data-mode].off{ color:#E5261F }
.ledger__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0;
  background:#23271F; border-bottom:1px solid #23271F;
}
.ledger__stats div{ background:#060706; padding:.4rem .5rem }
.ledger__stats dt{ font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; color:#5F675D }
.ledger__stats dd{ margin:.1rem 0 0; font-size:.9rem; color:#D8DCD6; line-height:1 }
.ledger__stats dd.red{ color:#E5261F }
.log{
  list-style:none; margin:0; padding:.4rem 0; overflow:auto; flex:1 1 0;
  max-height:min(60vh,520px); font-size:.58rem; line-height:1.55; color:#8C948A;
}
@media (max-width:820px){ .log{ max-height:40vh } }
.log li{ padding:.05rem .5rem; display:grid; grid-template-columns:auto 1fr; gap:.6rem; align-items:start }
.log li span{ min-width:0; overflow-wrap:anywhere }
.log li time{ color:#5F675D }
.log li b{ color:#5FE08A; font-weight:400 }
.log li em{ color:#E5261F; font-style:normal }
.log li i{ color:#CBD2C6; font-style:normal }
.log li:first-child{ color:#D8DCD6 }

@media (prefers-reduced-motion:reduce){
  .cam__rec--live i{ animation:none }
}

.cams-note a{ color:#8C948A }
.cams-note a:hover{ color:#5FE08A }