/* view.css — the end-user live view (ADR-0047).
 *
 * Its own stylesheet rather than a reuse of app.css: the operator console's CSS
 * is ~1000 lines of teleop overlay, timeline canvas, filmstrip and recordings
 * modal, none of which exists here. The design TOKENS below are copied from
 * app.css :root so the two surfaces read as one product; if that palette moves,
 * both files move together (it is a palette, not logic — duplicating six colour
 * literals is cheaper than coupling two apps through a shared sheet).
 */

:root {
  color-scheme: dark;

  --bg-primary:    #0A1218;
  --bg-elev1:      #11202C;
  --bg-elev2:      #16293A;
  --bg-elev3:      #1D3447;
  --fg-primary:    #E8EDF0;
  --fg-muted:      #8D9AA6;
  --fg-faint:      #5A6975;
  --border:        #1F2E3C;
  --border-strong: #2C4054;
  --accent:        #4F8FB8;
  --accent-strong: #6DB0DB;
  --online:        #2F9D6E;
  --offline:       #6A7682;
  --critical:      #C8423A;

  --panel-w: min(88vw, 380px);
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-primary);
  color: var(--fg-primary);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}

.screen { height: 100dvh; width: 100%; }
[hidden] { display: none !important; }

/* ── login ────────────────────────────────────────────────────────────── */

#login-screen {
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(100%, 340px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 24px;
  background: var(--bg-elev1);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.brand-mark { width: 220px; max-width: 100%; align-self: center; margin-bottom: 6px; }
.brand-sub {
  margin: 0 0 14px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.login-card label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 6px;
}

.login-card input {
  padding: 11px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-size: 16px; /* >=16px: iOS Safari zooms the viewport on smaller inputs */
}
.login-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  border: 1px solid var(--border-strong);
  background: var(--bg-elev2);
  color: var(--fg-primary);
  border-radius: var(--radius);
  padding: 11px 14px;
  font: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { margin-top: 18px; background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 10px; font-size: 12px; }

.error {
  margin: 12px 0 0;
  color: var(--critical);
  font-size: 13px;
  text-align: center;
}

/* ── stage ────────────────────────────────────────────────────────────── */

#viewer-screen { position: relative; overflow: hidden; }

.stage { position: absolute; inset: 0; background: var(--bg-primary); }
.stage-bg, .stage-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* `contain`, not `cover`: cropping a security feed to fill a phone screen hides
   part of what the viewer is meant to be watching. */
.stage-video { object-fit: contain; background: #000; }

.stage-hint {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  color: var(--fg-muted);
  font-size: 14px;
  pointer-events: none;
  text-align: center;
  padding: 0 32px;
}
.stage-hint p { margin: 0; }

/* ── brand marks ──────────────────────────────────────────────────────── */

/* Welcome (no robot chosen): Surwera above the hint, the customer below,
   both large. Once a robot is chosen (.has-robot) these leave the hint —
   the hint then carries stream status words — and the corner pair takes
   over. */
.brand-welcome-surwera { width: min(82vw, 380px); }
/* The welcome group (both marks + the hint) sits at the true centre of the
   stage — the .stage-hint grid centres it; nothing offsets it. */
.stage.has-robot .stage-hint > img { display: none; }

/* The customer's mark is shown exactly as uploaded — no plate behind it —
   so a transparent PNG of a light/white mark reads best on the dark theme
   and over video (ops/sites-and-viewers.md §3b). The same faint drop
   shadow as the Surwera corner mark keeps it legible over bright video. */
.brand-customer {
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.stage-hint .brand-customer {
  width: min(50vw, 220px);
  max-height: 110px;
}

/* Live (a robot chosen): the customer bottom-left, Surwera bottom-right,
   small and click-through so they never hide or block the feed. Above the
   video and hint in DOM order; the OSD strip is at the top, so no overlap. */
.brand-corners {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(6px + env(safe-area-inset-bottom));
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0.9;
}
.stage.has-robot .brand-corners { display: flex; }
.brand-corners .brand-customer {
  height: 34px;
  max-width: 40vw;
  /* Pushed to the right edge by justify-content when the customer mark is
     hidden (no logo uploaded). */
  margin-right: auto;
}
/* Surwera's corner mark is a light wordmark next to a heavy customer
   mark; 26 px keeps it at least as prominent as the 34 px customer mark
   (Erik, 2026-09-07 — same balance as the welcome screen). */
.brand-corner-surwera {
  height: 26px;
  margin-left: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

/* ── OSD ──────────────────────────────────────────────────────────────── */

.osd {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px 68px;
  background: linear-gradient(180deg, rgba(7,15,20,0.88), rgba(7,15,20,0));
  font-size: 12px;
  letter-spacing: 0.05em;
  pointer-events: none;
}
.osd-robot { font-weight: 600; letter-spacing: 0.02em; font-size: 14px; }
.osd-status { margin-left: auto; color: var(--fg-faint); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--offline); }
.pill-online { color: var(--online); border-color: color-mix(in srgb, var(--online) 55%, transparent); }
.pill-online i { background: var(--online); }
.pill-offline { color: var(--offline); }

/* ── hamburger ────────────────────────────────────────────────────────── */

.menu-toggle {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  z-index: 3;
  width: 46px; height: 46px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: rgba(10,18,24,0.72);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.menu-toggle span { display: block; height: 2px; background: var(--fg-primary); border-radius: 2px; }

/* ── panel ────────────────────────────────────────────────────────────── */

.panel-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(3,8,11,0.55); }

.panel {
  position: absolute;
  z-index: 5;
  top: 0; left: 0; bottom: 0;
  width: var(--panel-w);
  display: flex;
  flex-direction: column;
  background: var(--bg-elev1);
  border-right: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
}
.panel-title { flex: 1; margin: 0; font-size: 16px; font-weight: 600; }
.panel-back, .panel-close {
  width: 34px; height: 34px;
  border: 0;
  background: transparent;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}
.panel-back:hover, .panel-close:hover { background: var(--bg-elev2); color: var(--fg-primary); }

.panel-list { flex: 1; margin: 0; padding: 6px; list-style: none; overflow-y: auto; }
.panel-empty { padding: 24px 16px; color: var(--fg-muted); font-size: 14px; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}
.row:hover { background: var(--bg-elev2); }
.row.is-selected { background: var(--bg-elev3); }

.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-name {
  font-size: 15px;
  /* Robot and site names are customer-supplied; never let a long one push the
     liveness pill off the panel. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub { font-size: 12px; color: var(--fg-muted); }
.row-chevron { color: var(--fg-faint); font-size: 20px; }

.site-tile {
  flex: 0 0 auto;
  position: relative;
  width: 64px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-elev3);
  border: 1px solid var(--border-strong);
  color: var(--accent-strong);
  font-weight: 600;
  font-size: 17px;
}
/* The site photo (ADR-0047) covers the initial once it has loaded. */
.site-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.panel-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.panel-principal {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── toast ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  z-index: 9;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev2);
  font-size: 13px;
}

/* ── phones: the panel is a bottom sheet ───────────────────────────────
   A side drawer at 88vw is the whole phone screen — a full-height dark
   sheet for two rows, with the picture gone (Erik, 2026-09-10). On narrow
   screens the same panel docks to the bottom instead: full width, only as
   tall as its content (capped at 60% of the screen, the list scrolls past
   that), rounded top, the stage still visible above it. No grab bar: there
   is no drag-to-dismiss gesture, so a handle would promise one — tapping
   the picture (scrim) closes it, as before. No JS changes. Wide screens
   (landscape phones, tablets, desktop) keep the drawer: on a short-and-wide
   screen a 380px drawer beside the picture beats a sheet over it. */
@media (max-width: 640px) {
  .panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: min(60dvh, 520px);
    border-right: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0;
    padding-top: 0;
  }
  .panel-head { padding: 10px 6px 8px 12px; }
  .panel-title { font-size: 15px; }
  .row { padding: 10px 8px; gap: 10px; }   /* robot row 44px: iOS/Android tap minimum */
  .site-tile { width: 52px; height: 40px; font-size: 15px; }
  .row-name { font-size: 14px; }
  .panel-foot { padding: 8px 12px; }
}

@media (min-width: 900px) {
  .panel { border-radius: 0 14px 14px 0; }
}