/* Values below are copied from apps/lasair/src/theme/tokens.css; a test keeps them in step. */
:root {
  color-scheme: light dark;
  --color-bg: #f5f6fb;
  --color-surface: #ffffff;
  --color-border: #dde1ee;
  --color-text: #0f1324;
  --color-text-muted: #454c66;
  --color-accent: #3a3fd1;
  --color-focus: #3a3fd1;
  --radius-md: 4px;
  --radius-lg: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0d16;
    --color-surface: #121726;
    --color-border: #272e46;
    --color-text: #e9ecf6;
    --color-text-muted: #a3abc4;
    --color-accent: #9aa6ff;
    --color-focus: #9aa6ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 16px/1.5 "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 960px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }

h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
figure { margin: 0; }
video { width: 100%; height: 100%; object-fit: cover; }
.frame:has(video[hidden]) { background: var(--color-surface) url("poster.svg") center / cover; }
/* The chart carries no text, so "coming soon" is for screen readers only. */
.soon {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
video:not([hidden]) ~ .soon { display: none; }

/* The column gap is wider than the gap inside a row, so Dev's key does not read as part of Prod's
   card at desktop width (item #1626 row 3: 12px apart at 1280px). */
nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
/* Each environment is one row: the guest card takes four fifths, the admin key one fifth, in the
   same box style (Al, 1 November 2026). Two links side by side, since anchors cannot nest. */
.env { display: grid; grid-template-columns: 4fr 1fr; gap: 8px; }
.card, .key {
  text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.card { display: block; padding: 12px 16px; }
.card:hover, .key:hover { border-color: var(--color-accent); }
.card:focus-visible, .key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.label { font-weight: 600; color: var(--color-accent); }
/* The health word (item #1642): muted, after the label; the words say the state, so no colour. */
.health { margin-left: 12px; color: var(--color-text-muted); font-size: 14px; }
/* A small icon (Al: "admin is a smaller icon eg key"); the box is at least a 44px target. The
   glyph is 24px so it does not look lost in the one-fifth box (item #1626 row 2). */
.key {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  font-size: 24px; line-height: 1;
}

@media (max-width: 640px) {
  main { padding: 16px; }
  nav { grid-template-columns: 1fr; }
}