/* SKYNET live grid — layout only; tokens/primitives come from theme.css. */

/* Fixed layout: a top row of 3 Honeywells, then a centered row of 2 Tapos.
   Tiles keep the same width in both rows (basis = one third), so the bottom
   two sit centered under the top three. Wraps on narrow screens. */
.sk-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sk-grid-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.sk-grid-row .sk-tile {
  flex: 0 1 calc((100% - 32px) / 3);   /* 32px = 2 gaps between 3 tiles */
  min-width: 300px;
}
/* Mobile: one camera per row, full width, no horizontal overflow. */
@media (max-width: 760px) {
  .sk-grid { gap: 10px; }
  .sk-grid-row { gap: 10px; }
  .sk-grid-row .sk-tile { flex: 1 1 100%; min-width: 0; }
}

/* One camera tile: 16:9, sharp corners, deep surface behind the video. */
.sk-tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;
  /* isolate so CSS filter on .sk-media never bleeds onto overlays via blending */
  isolation: isolate;
}
.sk-tile:hover { border-color: var(--border-strong); }

/* Fullscreen: let the tile fill the screen (aspect-ratio would letterbox). */
.sk-tile.sk-fs {
  aspect-ratio: auto;
  width: 100vw;
  height: 100vh;
}

.sk-grid-empty {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  border: 1px dashed var(--border);
  background: var(--panel);
  font-size: 13px;
  letter-spacing: .04em;
}