@import url('/site-v41.css');

:root {
  --camera-toolbar-height: calc(76px + env(safe-area-inset-bottom));
  --poster-paper: #f4efe4;
  --poster-ink: #171714;
}

/* A single 1080 × 1536 poster geometry is used before and after capture. */
.camera-overlay {
  grid-template-rows: minmax(0, 1fr) var(--camera-toolbar-height) !important;
  background: #080a09 !important;
}

.camera-stage-poster {
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: #080a09 !important;
  overflow: hidden !important;
}

.live-poster-preview {
  --available-h: calc(100dvh - var(--camera-toolbar-height));
  width: min(100vw, calc(var(--available-h) * 1080 / 1536)) !important;
  height: min(var(--available-h), calc(100vw * 1536 / 1080)) !important;
  max-width: 100vw !important;
  max-height: var(--available-h) !important;
  aspect-ratio: 1080 / 1536 !important;
  margin: 0 auto !important;
  background: var(--poster-paper) !important;
  grid-template-rows: 128fr 450fr 70fr 700fr 188fr !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.live-poster-preview > * {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.live-poster-brand {
  display: grid !important;
  place-items: center !important;
  padding: 10px 8px 6px !important;
  background: var(--poster-paper) !important;
}

.brand-lockup-poster {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transform: none !important;
}

.brand-lockup-poster .brand-ring {
  width: 15px !important;
  height: 15px !important;
  border-width: 4px !important;
  flex: none !important;
}

.brand-lockup-poster .brand-wordmark {
  color: var(--poster-ink) !important;
  font-size: clamp(18px, 4.35vw, 24px) !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.live-poster-artwork,
.live-poster-camera {
  width: 92.2222% !important;
  justify-self: center !important;
  padding: 0 !important;
  background: #ded5c5 !important;
}

.live-poster-artwork img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

.live-poster-caption {
  display: grid !important;
  place-items: center !important;
  padding: 0 16px !important;
  background: var(--poster-paper) !important;
}

.live-poster-caption span {
  color: #5f5a52 !important;
  font-size: clamp(12px, 2.8vw, 16px) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.live-poster-camera {
  position: relative !important;
  overflow: hidden !important;
  background: #222522 !important;
}

.live-poster-camera .camera-feed,
.live-poster-camera img,
.live-poster-camera video,
.live-poster-camera canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.live-poster-footer {
  position: relative !important;
  padding: 0 !important;
  background: var(--poster-paper) !important;
}

.live-poster-footer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Keep the action area compact so the poster fills the screen. */
.capture-preview-actions,
.camera-controls-minimal {
  height: var(--camera-toolbar-height) !important;
  min-height: var(--camera-toolbar-height) !important;
  padding: 4px max(14px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  margin: 0 !important;
  display: grid !important;
  align-content: center !important;
  background: #080a09 !important;
}

.camera-actions-minimal {
  max-width: 300px !important;
  grid-template-columns: 42px 58px 42px !important;
  gap: 18px !important;
}

.camera-tool-button {
  width: 42px !important;
  height: 42px !important;
}

.shutter-button {
  width: 58px !important;
  height: 58px !important;
}

.shutter-button > span {
  width: 44px !important;
  height: 44px !important;
}

.pair-share-actions {
  width: min(100%, 330px) !important;
  max-width: 330px !important;
  margin: 0 auto !important;
}

.pair-share-actions button {
  width: 100% !important;
  min-height: 54px !important;
}

.camera-back-floating {
  top: max(8px, env(safe-area-inset-top)) !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  width: 48px !important;
  height: 48px !important;
}

@media (max-width: 760px) {
  .live-poster-brand {
    padding-top: 8px !important;
  }

  .brand-lockup-poster {
    gap: 6px !important;
  }

  .brand-lockup-poster .brand-ring {
    width: 14px !important;
    height: 14px !important;
  }

  .brand-lockup-poster .brand-wordmark {
    font-size: clamp(17px, 5.1vw, 23px) !important;
  }

  .live-poster-caption span {
    font-size: clamp(11px, 3.2vw, 15px) !important;
  }
}