:root {
  /* Aeroklub Točná colours, taken from the club's shield */
  --brand-blue: #1c75f3;
  --brand-red: #e30613;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --text: #15181e;
  --muted: #5d6573;
  --border: #d9dde4;
  --accent: #1667d9;
  --accent-text: #ffffff;
  --ok: #1a7f37;
  --warn: #b26a00;
  --err: #cf222e;
  --stage-bg: #e3e6eb;
  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .06);
  --radius: 10px;
  --gap: clamp(8px, 1.2vw, 20px);
  --pad: max(clamp(8px, 1.5vw, 28px), env(safe-area-inset-left));
  --topbar-h: 52px;
  --tile: 320px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --surface: #181b21;
    --surface-2: #22262e;
    --text: #e6e8ec;
    --muted: #9aa3b2;
    --border: #2c313a;
    --accent: #5a9bff;
    --accent-text: #0b0d10;
    --ok: #3fb950;
    --warn: #d29922;
    --err: #f85149;
    --stage-bg: #000000;
    --shadow: 0 1px 2px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #181b21;
  --surface-2: #22262e;
  --text: #e6e8ec;
  --muted: #9aa3b2;
  --border: #2c313a;
  --accent: #5a9bff;
  --accent-text: #0b0d10;
  --ok: #3fb950;
  --warn: #d29922;
  --err: #f85149;
  --stage-bg: #000000;
  --shadow: 0 1px 2px rgb(0 0 0 / .4);
  color-scheme: dark;
}

/* Larger tiles on big screens so a 4K display shows sharp, sizeable images. */
@media (min-width: 1700px) { :root { --tile: 400px; --topbar-h: 56px; } }
@media (min-width: 2500px) { :root { --tile: 560px; --topbar-h: 64px; } html { font-size: 18px; } }
@media (min-width: 3400px) { :root { --tile: 720px; } html { font-size: 22px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
[hidden] { display: none !important; }

svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  height: calc(var(--topbar-h) + 3px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--pad) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar { border-top: 3px solid var(--brand-red); }
.brand { display: flex; align-items: center; gap: .6em; color: var(--text); text-decoration: none; min-width: 0; }
.brand .logo { height: calc(var(--topbar-h) - 14px); width: auto; flex: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand .club { font-weight: 700; font-size: 1.05em; white-space: nowrap; }
.brand .sub { color: var(--muted); font-size: .85em; }
.topbar-center { display: flex; align-items: center; gap: 4px; min-width: 0; }
.topbar-right { grid-column: 3; display: flex; justify-content: flex-end; gap: 6px; }
#fit-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.icon-btn, select {
  font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  height: 2.4em; min-width: 2.4em; padding: 0 .5em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
}
.icon-btn:hover, select:hover { border-color: var(--muted); }
.icon-btn:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
select { padding-right: 1.6em; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
#cam-select { max-width: min(60vw, 26em); font-weight: 600; text-overflow: ellipsis; }

#theme-btn .ic-light, #theme-btn .ic-dark { display: none; }
:root[data-theme="light"] #theme-btn .ic-auto, :root[data-theme="dark"] #theme-btn .ic-auto { display: none; }
:root[data-theme="light"] #theme-btn .ic-light { display: block; }
:root[data-theme="dark"] #theme-btn .ic-dark { display: block; }

/* ---------------- Overview grid ---------------- */
#grid-view { padding: var(--gap) var(--pad) calc(var(--gap) + env(safe-area-inset-bottom)); }
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile)), 1fr));
}
.card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  border: 1px solid var(--border); color: inherit; text-decoration: none;
}
.card .thumb { aspect-ratio: 16 / 9; background: var(--surface-2); display: block; width: 100%; object-fit: cover; }
.card .thumb.missing { visibility: hidden; }
.card .placeholder { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .9em; }
.card:has(.thumb:not(.missing)) .placeholder { display: none; }
.card .meta { display: flex; align-items: center; gap: 8px; padding: .5em .75em; min-width: 0; }
.card .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card .when { margin-left: auto; }
.card .when { color: var(--muted); font-size: .9em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card:hover { border-color: var(--muted); }
/* The whole card is clickable through a stretched link; the source link sits above it. */
.card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.src-link { position: relative; z-index: 2; flex: none; font-size: .78em; color: var(--muted); text-decoration: none; white-space: nowrap; }
.src-link:hover { text-decoration: underline; color: var(--accent); }
.card .badge { z-index: 2; }
.badge {
  display: inline-block; padding: .15em .55em; border-radius: 4px;
  font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
}
.badge.offline { background: var(--err); color: #fff; }
.badge.frozen { background: var(--warn); color: #fff; }
.card .badge { position: absolute; top: .6em; left: .6em; box-shadow: 0 1px 3px rgb(0 0 0 / .4); }
.stage-bar .badge { flex: none; }
.status { width: .6em; height: .6em; border-radius: 50%; background: var(--ok); flex: none; }
.status.stale { background: var(--warn); }
.status.dead { background: var(--err); }

/* "Fit to screen": all cameras visible without scrolling; tile size is computed in app.js. */
body.fit #grid-view { height: calc(100dvh - var(--topbar-h) - 3px - env(safe-area-inset-top)); overflow: hidden; display: flex; align-items: center; justify-content: center; }
body.fit .grid { grid-template-columns: repeat(var(--cols), var(--tile-w)); justify-content: center; }
body.fit .card .meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2em .6em .35em;
  background: linear-gradient(transparent, rgb(0 0 0 / .65)); color: #fff; font-size: .9em;
}
body.fit .card .when, body.fit .card .src-link { color: rgb(255 255 255 / .8); }

/* ---------------- Viewer ---------------- */
#viewer { height: calc(100dvh - var(--topbar-h) - 3px - env(safe-area-inset-top)); }
.stage {
  position: relative; height: 100%;
  background: var(--stage-bg); display: flex; align-items: center; justify-content: center;
  touch-action: pan-y pinch-zoom; user-select: none; overflow: hidden;
}
.stage img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage-msg { position: absolute; color: var(--muted); padding: 1em; text-align: center; }
.stage-nav {
  position: absolute; top: 0; bottom: 3.5em; width: 14%; max-width: 160px;
  background: none; border: 0; color: #fff; opacity: 0; cursor: pointer; transition: opacity .15s;
  display: flex; align-items: center;
}
.stage-nav svg { width: 2.6em; height: 2.6em; filter: drop-shadow(0 0 3px rgb(0 0 0 / .8)); }
.stage-nav.left { left: 0; justify-content: flex-start; padding-left: 1em; }
.stage-nav.right { right: 0; justify-content: flex-end; padding-right: 1em; }
.stage:hover .stage-nav { opacity: .85; }
@media (hover: none) { .stage-nav { display: none; } }

.stage-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .6em;
  padding: 1.6em var(--pad) calc(.6em + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / .65));
  color: #fff; font-variant-numeric: tabular-nums;
}
.stage-bar .v-when { font-weight: 600; white-space: nowrap; }
.stage-bar .v-err { color: rgb(255 255 255 / .7); font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.stage-bar .spacer { flex: 1; }
.stage-bar .src-link { color: rgb(255 255 255 / .85); font-size: .9em; }
.icon-btn.ghost { background: rgb(0 0 0 / .35); color: #fff; border-color: rgb(255 255 255 / .25); flex: none; }
.icon-btn.ghost:hover { background: rgb(0 0 0 / .6); border-color: rgb(255 255 255 / .6); }
.stage:fullscreen { background: #000; }

@media (max-width: 900px) { body.viewing .brand-text { display: none; } }
.back-btn { padding: 0 .8em; font-weight: 600; white-space: nowrap; flex: none; }
/* Phones */
@media (max-width: 640px) {
  .back-btn .label { display: none; }
  .back-btn { padding: 0 .5em; }

  .topbar { grid-template-columns: auto 1fr auto; }
  .topbar-center { justify-content: center; }
  #cam-select { max-width: none; flex: 1; min-width: 0; }
}
/* Portrait phones/tablets: image at full width, info bar directly below it */
@media (orientation: portrait) and (max-width: 1000px) {
  #viewer { height: auto; }
  .stage { height: auto; flex-direction: column; align-items: stretch; background: var(--bg); }
  .stage img { height: auto; aspect-ratio: 16 / 9; background: var(--stage-bg); }
  .stage-msg { position: static; aspect-ratio: 16 / 9; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--stage-bg); }
  .stage-bar { position: static; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); padding-top: .6em; flex-wrap: wrap; }
  .stage-bar .v-err { color: var(--muted); order: 10; flex-basis: 100%; white-space: normal; }
  .stage-bar .src-link { color: var(--muted); }
  .stage-bar .icon-btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
}
/* Phone in landscape: give the image as much height as possible */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --topbar-h: 44px; }
}