/* Zarządzane przez Ansible (rola edge_proxy). Duże przyciski i wysoki kontrast - dla starszej osoby. */
:root {
  --bg: #111214;
  --panel: #1d1f23;
  --text: #f2f0ec;
  --muted: #a9aeb6;
  --accent: #3d8f77;
  --accent-text: #ffffff;
  --rec: #c62828;
  --ok: #7ccf82;
  --err: #ff8a80;
  --mark: #ffd54f;
  --border: #33363c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 22px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}
h1 { font-size: 1.8rem; margin: 0 0 8px; }
.muted { color: var(--muted); margin: 0; }
.big { font-size: 1.6rem; }

.screen { min-height: 100%; }
.center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}

/* ── albumy ── */
#screen-sets { padding: max(24px, env(safe-area-inset-top)) 20px 40px; max-width: 1100px; margin: 0 auto; }
.sets-head { margin-bottom: 24px; }
.sets {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}
.set {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: var(--panel); color: var(--text); border: 2px solid var(--border);
  border-radius: 18px; overflow: hidden; font: inherit;
}
.set:active { border-color: var(--accent); }
.set img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; background: #000; }
.set .meta { padding: 14px 16px 16px; }
.set .title { font-weight: 700; font-size: 1.15rem; }
.set .progress { color: var(--muted); font-size: 1rem; margin-top: 4px; }
.set .progress.full { color: var(--ok); }

/* ── zdjęcie ── */
.photo-screen {
  height: 100%; display: flex; flex-direction: column;
  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: 12px; padding: 10px 14px; background: var(--panel); }
.bar.top { justify-content: space-between; }
.where { text-align: center; flex: 1; }
#counter { font-weight: 700; display: block; }
.status { display: block; font-size: 0.95rem; color: var(--ok); min-height: 1.3em; }

.btn {
  font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
  background: #2b2e34; border: 2px solid var(--border); border-radius: 16px;
  min-height: 64px; padding: 0 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  touch-action: manipulation;
}
.btn:active { filter: brightness(1.3); }
.btn:disabled { opacity: 0.35; }

.bar.bottom { padding: 14px; gap: 14px; }
.btn.nav { flex: 0 0 auto; min-height: 96px; min-width: 150px; font-size: 1.2rem; }
.btn.rec {
  flex: 1; min-height: 96px; font-size: 1.4rem;
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}
.btn.rec .dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.btn.rec.recording { background: var(--rec); border-color: var(--rec); animation: pulse 1.4s ease-in-out infinite; }
.btn.rec.recording .dot { border-radius: 4px; }
.btn.rec.busy { opacity: 0.7; }
@keyframes pulse { 50% { filter: brightness(1.25); } }

.stage {
  flex: 1; min-height: 0; position: relative; overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.frame { position: relative; line-height: 0; }
.frame img { display: block; -webkit-touch-callout: none; }
/* rozmiar ramki liczy skrypt (fitFrame), żeby znaczniki trafiały dokładnie w zdjęcie */
.stage.zoomed { overflow: auto; display: block; -webkit-overflow-scrolling: touch; }
.stage.zoomed .frame { width: max-content; margin: 0 auto; }

.marks { position: absolute; inset: 0; pointer-events: none; }
.mark {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; border: 4px solid #000; background: var(--mark); color: #000;
  font: 700 26px/44px -apple-system, sans-serif; text-align: center;
  pointer-events: auto; cursor: pointer; box-shadow: 0 0 0 2px var(--mark);
}

.hint { margin: 0; padding: 8px 14px 0; color: var(--muted); font-size: 1rem; text-align: center; background: var(--panel); }

.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  background: rgba(20, 20, 22, 0.94); color: var(--text); border: 2px solid var(--border);
  padding: 18px 28px; border-radius: 18px; font-size: 1.3rem; font-weight: 600;
  max-width: 90vw; text-align: center; z-index: 10;
}
.toast.ok { border-color: var(--ok); }
.toast.err { border-color: var(--err); }

@media (max-width: 700px) {
  body { font-size: 19px; }
  .btn.nav { min-width: 0; padding: 0 14px; }
  .btn.nav span { display: none; }
  .btn.rec { font-size: 1.15rem; }
}