/* StickerGo — shell layer: app frame, tab bar, capture stage, queue indicator.
 * Owned by module G. View-specific styles belong to the view modules.
 */

/* ----------------------------------------------------------------- frame -- */

#sg-app {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- header -- */

.sg-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: calc(var(--header-h) + var(--safe-t));
  padding: var(--safe-t) var(--sp-4) 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.97), rgba(10, 10, 12, 0.82));
  border-bottom: 2px solid var(--line-soft);
  backdrop-filter: blur(8px);
}

.sg-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  gap: 7px;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: 1.28rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.sg-logo b {
  display: inline-block;
  padding: 1px 7px;
  background: var(--acid);
  color: #10130a;
  transform: rotate(-3deg);
  border-radius: 3px;
}

.sg-level {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.sg-level strong { color: var(--acid); font-size: var(--fs-sm); }

.sg-header-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--ink-dim);
}
.sg-header-btn:active { background: var(--bg-3); }

/* --------------------------------------------------------------- banners -- */

.sg-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  border-bottom: 2px solid rgba(0, 0, 0, 0.35);
}
.sg-banner-offline { background: var(--warn); color: #241800; font-weight: 700; }
.sg-banner-update  { background: var(--cyan); color: #06201e; font-weight: 700; }
.sg-banner .btn-sm { border-color: currentColor; background: rgba(0, 0, 0, 0.14); color: inherit; }

/* --------------------------------------------------------- queue strip --- */

.sg-queue {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-3);
  border-bottom: 2px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.sg-queue[hidden] { display: none; }
.sg-queue-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px; height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--acid);
  color: #10130a;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: var(--fs-sm);
}
.sg-queue.is-failed .sg-queue-count { background: var(--danger); color: #fff; }
.sg-queue.is-syncing .sg-queue-count { background: var(--cyan); color: #06201e; }

/* ------------------------------------------------------------------ main -- */

.sg-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-4);
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + var(--sp-6));
}
.sg-main[data-view="catch"] { padding-left: var(--sp-3); padding-right: var(--sp-3); }

.view-head { margin-bottom: var(--sp-4); }
.view-head h1 { font-size: var(--fs-2xl); }
.view-head .eyebrow { margin-bottom: 4px; }

/* -------------------------------------------------------------- tab bar --- */

.sg-tabs {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(12, 12, 15, 0.96);
  border-top: 2px solid var(--line);
  backdrop-filter: blur(10px);
}
.sg-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tap);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.sg-tab svg { width: 24px; height: 24px; }
.sg-tab[aria-current="page"] { color: var(--acid); }
.sg-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 4px;
  background: var(--acid);
  border-radius: 0 0 3px 3px;
}
.sg-tab:active { background: rgba(255, 255, 255, 0.05); }
.sg-tab-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 6px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--hot);
  color: #fff;
  font-size: 0.62rem;
  line-height: 1;
}

/* ---------------------------------------------------------- capture view -- */

.cap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cap-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 62dvh;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: #000;
}
.cap-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.cap-stage.is-flash::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  animation: sg-flash 260ms var(--ease) forwards;
}
@keyframes sg-flash { from { opacity: 0.85; } to { opacity: 0; } }

/* corner brackets — "hier drauf halten" */
.cap-reticle {
  position: absolute;
  inset: 14%;
  pointer-events: none;
  border: 2px dashed rgba(214, 255, 43, 0.4);
  border-radius: 6px;
}
.cap-reticle span {
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid var(--acid);
}
.cap-reticle span:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.cap-reticle span:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; }
.cap-reticle span:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; }
.cap-reticle span:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }

.cap-hud {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  right: var(--sp-3);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  pointer-events: none;
}
.cap-hud .chip {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--ink);
  backdrop-filter: blur(4px);
}
.cap-gps-ok   { color: var(--ok) !important; }
.cap-gps-weak { color: var(--warn) !important; }
.cap-gps-none { color: var(--ink-faint) !important; }

.cap-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  text-align: center;
  color: var(--ink-dim);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 12px, transparent 12px 24px),
    var(--bg-2);
}

.cap-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
}

.cap-shutter {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 5px solid var(--ink);
  background: var(--acid);
  box-shadow: 0 0 0 5px rgba(214, 255, 43, 0.16), var(--shadow-hard);
  display: grid;
  place-items: center;
  color: #10130a;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: transform 120ms var(--ease);
  justify-self: center;
}
.cap-shutter:active { transform: scale(0.93); }
.cap-shutter[disabled] { opacity: 0.5; }
.cap-shutter.is-busy { background: var(--bg-4); color: var(--ink-dim); border-color: var(--line); }

.cap-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: var(--tap);
  padding: var(--sp-2);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  text-align: center;
}
.cap-side svg { width: 26px; height: 26px; }
.cap-side:active { background: var(--bg-3); }
.cap-side.is-on { color: var(--acid); }
.cap-side input[type="file"] { display: none; }

.cap-hint {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  text-align: center;
}

/* optimistic "analysing" cards */
.shot {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--sp-3);
  align-items: start;
}
.shot img, .shot .thumb-fallback {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-3);
  border: 2px solid var(--line);
}
.shot-title {
  font-family: var(--font-display);
  font-stretch: 82%;
  text-transform: uppercase;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
}
.shot-meta { font-size: var(--fs-xs); color: var(--ink-faint); }
.shot .progress { margin-top: var(--sp-2); }
.shot-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.shot[data-state="failed"] { border-color: var(--danger); }
.shot[data-state="queued"] { border-color: var(--warn); }
.shot[data-state="done"]   { border-color: var(--ok); }

.shot-loot { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ---------------------------------------------------------- placeholder --- */

.view-missing {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
}
.view-missing .empty-mark { color: var(--acid); opacity: 0.5; }

/* ---------------------------------------------------------------- boot ---- */

#sg-boot {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  background: var(--bg);
  text-align: center;
  padding: var(--sp-5);
}
#sg-boot .sg-logo { font-size: 2rem; }
#sg-boot.gone { display: none; }

/* --------------------------------------------------------------- tablet --- */

@media (min-width: 720px) {
  .sg-main { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .cap-stage { aspect-ratio: 4 / 3; }
}