:root {
  color-scheme: dark;
  --ink: #161a24;      /* page */
  --panel: #1e2431;    /* raised surfaces */
  --line: #2e3647;     /* borders, tape track */
  --text: #e1e5ee;
  --dim: #8d96ab;
  --rec: #4c6a8f;      /* recorded footage */
  --motion: #f0a43a;   /* motion */
  --clip: #7fd1c7;     /* clip selection, primary actions */
  --live: #e5484d;     /* live / recording */
  --radius: 6px;
  --gutter: clamp(0.6rem, 1.6vw, 1.1rem);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--text); }
[hidden] { display: none !important; }

button, select, .primary, input {
  font: inherit; color: inherit; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.4rem 0.7rem; min-height: 2.25rem; cursor: pointer;
}
input { cursor: text; }
button:hover, select:hover { border-color: var(--dim); }
button:disabled, select:disabled { opacity: 0.4; cursor: default; }
:focus-visible { outline: 2px solid var(--clip); outline-offset: 2px; }
.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.ghost:hover { color: var(--text); }
.primary {
  background: var(--clip); color: #10221f; border-color: var(--clip);
  font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.danger { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); background: transparent; }
.danger.solid { background: var(--live); color: #fff; border-color: var(--live); }
.ico { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sm { width: 1rem; height: 1rem; }
.icon-btn { display: inline-grid; place-items: center; padding: 0.4rem; min-width: 2.25rem; background: transparent; border-color: transparent; color: var(--dim); }
.icon-btn:hover { color: var(--text); }
.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); flex: none; }
.dot.live { background: var(--live); }
.dot.standby { background: transparent; box-shadow: inset 0 0 0 2px var(--dim); }

/* ================================================================ app frame
   One screen, no page scrolling: header / main / toolbar. */
body.app {
  height: 100dvh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem var(--gutter); min-height: 3rem; }
.cam-switch {
  display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border-color: transparent;
  font-size: 1.05rem; font-weight: 600; padding-inline: 0.4rem; max-width: 55vw;
}
.cam-switch span:not(.dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-status { flex: 1; min-width: 0; color: var(--dim); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main {
  min-height: 0; display: grid; gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  padding: 0 var(--gutter);
}
.stage { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; }

.screen { position: relative; min-height: 0; background: #000; border-radius: var(--radius); overflow: hidden; }
.screen video { width: 100%; height: 100%; display: block; object-fit: contain; }
.screen-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--dim); padding: 1rem; }
.badge {
  position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.15rem 0.55rem; border-radius: 4px;
  font-size: 0.8rem; font-weight: 600; background: rgb(0 0 0 / 0.55); color: var(--text);
}
.badge.live { background: var(--live); color: #fff; }

/* ---- clock + transport ---- */
.readout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 0.75rem; padding: 0.6rem 0 0.4rem; }
.clock { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; }
.clock time { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 300; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.clock span { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transport { display: flex; gap: 0.3rem; align-items: center; }
.transport button { min-width: 2.5rem; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.live-btn { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); font-weight: 600; }
.live-btn[aria-pressed="true"] { background: var(--live); color: #fff; border-color: var(--live); }

/* ---- timeline tape ---- */
.timeline { display: grid; gap: 0.25rem; padding-bottom: 0.3rem; }
.tape { position: relative; height: 80px; touch-action: none; user-select: none; }
.tape canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.tape canvas.dragging { cursor: grabbing; }
.zoom { display: flex; gap: 0.2rem; justify-content: flex-end; }
.zoom button { min-height: 1.75rem; padding: 0.1rem 0.5rem; font-size: 0.8rem; color: var(--dim); background: transparent; border-color: transparent; }
.zoom button[aria-pressed="true"] { color: var(--text); background: var(--panel); border-color: var(--line); }
.hover {
  position: absolute; bottom: calc(100% + 6px); transform: translateX(-50%); pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px;
  display: grid; gap: 3px; justify-items: center; font-size: 0.8rem; font-variant-numeric: tabular-nums; z-index: 2;
}
.hover img { width: 192px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: #000; }
.hover img:not([src]), .hover img[src=""] { display: none; }

/* ---- motion list (docked or in a sheet) ---- */
.events { display: none; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.events-body h2 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.4rem; position: sticky; top: 0; background: var(--ink); padding: 0.2rem 0; z-index: 1; }
.events-body h2 span { color: var(--dim); font-weight: 400; }
.events-body ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.events-body li button {
  width: 100%; display: grid; grid-template-columns: 88px 1fr; gap: 0.7rem; align-items: center;
  text-align: left; padding: 0.3rem; background: transparent; border-color: transparent;
}
.events-body li button:hover { background: var(--panel); }
.events-body img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: var(--panel); display: block; }
.events-body .when { font-variant-numeric: tabular-nums; }
.events-body .meta { color: var(--dim); font-size: 0.85rem; }
.events-body .day { color: var(--dim); font-size: 0.8rem; padding: 0.5rem 0.3rem 0.1rem; }
.empty { color: var(--dim); }

/* ---- toolbar ---- */
.toolbar { display: flex; justify-content: center; gap: 0.25rem; padding: 0.3rem var(--gutter) 0.45rem; border-top: 1px solid var(--line); }
.tool {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem;
  background: transparent; border-color: transparent; color: var(--dim); padding-inline: 0.8rem;
}
.tool:hover { color: var(--text); background: var(--panel); }
.tool-flag { position: absolute; top: 0.35rem; left: 1.7rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--clip); }
.tool-flag.rec { background: var(--dim); }

/* Wide screens: motion list docked on the right. */
@media (min-width: 1100px) {
  .main { grid-template-columns: minmax(0, 1fr) 19rem; }
  .events { display: block; }
  .motion-tool { display: none; }
}

/* Portrait phones/tablets: video on top, motion list fills the rest of the screen. */
@media (max-width: 1099px) and (orientation: portrait) {
  .main { grid-template-rows: auto minmax(0, 1fr); gap: 0.4rem; }
  .stage { grid-template-rows: auto auto auto; }
  .screen { aspect-ratio: 16 / 9; max-height: 42dvh; }
  .events { display: block; border-top: 1px solid var(--line); padding-top: 0.3rem; }
  .motion-tool { display: none; }
}

/* Phones: compact controls, icon + label stacked in the toolbar. */
@media (max-width: 640px) {
  .readout { padding-top: 0.4rem; }
  .clock time { font-size: 1.55rem; }
  .clock span { font-size: 0.85rem; }
  .transport { width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.2rem; }
  .transport button, .transport select { min-width: 0; padding: 0.35rem 0.1rem; }
  .tape { height: 64px; }
  .toolbar { justify-content: space-around; padding-top: 0.2rem; }
  .tool { flex-direction: column; gap: 0.1rem; font-size: 0.72rem; padding: 0.25rem 0.4rem; min-width: 4rem; }
  .tool-flag { left: calc(50% + 0.5rem); top: 0.2rem; }
}

/* Short landscape screens (phone on its side): everything slimmer. */
@media (max-height: 520px) and (orientation: landscape) {
  .bar { min-height: 2.4rem; padding-block: 0.15rem; }
  .readout { padding: 0.3rem 0 0.2rem; }
  .clock time { font-size: 1.3rem; }
  .tape { height: 48px; }
  .zoom { display: none; }
  .toolbar { padding-block: 0.15rem 0.25rem; }
  .tool span { display: none; }
}

/* ================================================================ sheets
   <dialog>: drawer from the right on wide screens, bottom sheet on phones. */
dialog.sheet {
  margin: 0; padding: 0; color: var(--text); background: var(--ink);
  position: fixed; inset: 0 0 0 auto; width: min(27rem, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw;
  border: 0; border-left: 1px solid var(--line);
}
dialog.sheet[open] { display: flex; flex-direction: column; animation: drawer-in 0.18s ease-out; }
dialog.sheet::backdrop { background: rgb(5 7 12 / 0.55); }
dialog.sheet.light::backdrop { background: transparent; }
@keyframes drawer-in { from { transform: translateX(1.5rem); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(1.5rem); opacity: 0; } }
@media (max-width: 700px) {
  dialog.sheet {
    inset: auto 0 0 0; width: 100vw; height: auto; max-height: 88dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  dialog.sheet[open] { animation-name: sheet-in; }
}
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }

.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.6rem 0.6rem 1.1rem; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 1.1rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { overflow: auto; overscroll-behavior: contain; padding: 0.9rem 1.1rem 1.2rem; display: grid; gap: 0.8rem; align-content: start; }
.sheet-body section { display: grid; gap: 0.6rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.sheet-body section:last-child { border-bottom: 0; padding-bottom: 0; }
.sheet-body h3 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wide { width: 100%; }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.65rem; align-items: end; }
.fields label, .field { display: grid; gap: 0.3rem; color: var(--dim); font-size: 0.85rem; }
.fields input, .fields select, .field input, .field select { width: 100%; color: var(--text); font-size: 1rem; }
.fields .primary { grid-column: 1 / -1; justify-self: start; }
.unit { display: flex; align-items: center; gap: 0.4rem; color: var(--text); }
.unit input { max-width: 8rem; }
.hint { color: var(--dim); margin: 0; font-size: 0.875rem; }
.msg { margin: 0; font-size: 0.9rem; min-height: 1.2em; }
.msg:empty { display: none; }
.msg.ok { color: var(--clip); }
.msg.err { color: var(--live); }
.clip-info { margin: 0; color: var(--dim); font-variant-numeric: tabular-nums; }
.clip-info.set { color: var(--clip); }

/* switch, slider rows */
.ctl { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.ctl label { flex: 1; }
.ctl input[type="range"] { flex: 1; min-width: 0; accent-color: var(--clip); cursor: pointer; }
.ctl input[type="range"]:disabled { opacity: 0.4; cursor: default; }
.ctl output { min-width: 3.6rem; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.switch {
  --on: var(--clip);
  position: relative; width: 2.6rem; min-width: 2.6rem; height: 1.5rem; min-height: 0; padding: 0;
  border-radius: 999px; background: var(--line); border: 0;
}
.switch.rec { --on: var(--live); }
.switch span {
  position: absolute; top: 0.2rem; left: 0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--dim); transition: transform 0.15s ease, background 0.15s ease;
}
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--on) 35%, var(--line)); }
.switch[aria-checked="true"] span { transform: translateX(1.1rem); background: var(--on); }
@media (prefers-reduced-motion: reduce) { .switch span { transition: none; } }

/* two-option segmented control */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; color: var(--dim); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--text); font-weight: 600; }

/* camera list + status */
.cam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.cam-list button {
  width: 100%; display: flex; align-items: center; gap: 0.6rem; text-align: left;
  background: transparent; border-color: transparent; padding: 0.55rem 0.5rem;
}
.cam-list button:hover { background: var(--panel); }
.cam-list button[aria-current="true"] { background: var(--panel); border-color: var(--line); }
.cam-list .name { flex: 1; font-weight: 600; }
.cam-list .state { color: var(--dim); font-size: 0.85rem; }
.add-cam { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin: 0; font-size: 0.9rem; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.facts dd.err { color: var(--live); }

/* install command */
.cmd { position: relative; }
.cmd pre {
  margin: 0; padding: 0.7rem 2.6rem 0.7rem 0.75rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  font: 0.8rem/1.45 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; user-select: all;
}
.cmd .icon-btn { position: absolute; top: 0.25rem; right: 0.25rem; }
ol.steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.warn { color: var(--motion); }

.toast {
  position: fixed; left: 50%; bottom: calc(4.5rem + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.6rem 1rem; max-width: calc(100vw - 2rem); z-index: 10;
}

/* ================================================================ login */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; }
.login { width: min(22rem, 100%); display: grid; gap: 0.9rem; }
.login-mark { width: 2.25rem; color: var(--rec); }
.login-mark circle:last-child { color: var(--motion); fill: var(--motion); }
.login h1 { margin: 0 0 0.4rem; font-size: 1.6rem; font-weight: 400; }
.login label { display: grid; gap: 0.3rem; color: var(--dim); font-size: 0.9rem; }
.login input { background: var(--panel); color: var(--text); font-size: 1rem; }
.login .primary { justify-content: center; margin-top: 0.4rem; }
.error { color: var(--live); margin: 0; }
.grid-form { display: grid; gap: 0.8rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.offscreen { position: fixed; left: -9999px; opacity: 0; }

/* guests: admin-only parts of the interface are hidden (the server enforces it too) */
body.guest .admin-only { display: none !important; }
.checks { display: grid; gap: 0.35rem; }
.checks label { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-size: 0.95rem; }
.checks input { min-height: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--clip); }