/* Studio Mynz · Video Guestbook — in-page camera (camera.js)
   A full-screen viewfinder over the guest page. Everything here is UI only:
   the corner marks, prompt and controls are never drawn into the recording. */

.cam {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  background: var(--night);
  color: var(--pearl);
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cam:focus { outline: none; }

.cam-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ─── Top bar: close · prompt · switch ───────────────────────────────────── */

.cam-top {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  min-height: 64px;  /* room for a two-line prompt, so shuffling never resizes the stage */
  padding: 10px 12px 2px;
}

.cam-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(244, 239, 233, .08);
  color: var(--pearl);
  font: 300 30px/1 var(--body);
}
.cam-icon:disabled { opacity: .4; cursor: default; }
.cam-close { grid-column: 1; }
.cam-switch { grid-column: 3; }

.cam-prompt {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--night-2);
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.cam-prompt svg { flex: none; color: var(--champagne); }
.cam-prompt:active { transform: scale(.97); }

/* ─── Stage: the live canvas inside viewfinder corner marks ──────────────── */

.cam-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 16px 18px;
  touch-action: none;  /* sideways swipes change filter */
}

.cam-view { position: relative; width: 0; height: 0; }  /* sized by camera.js to the frame's shape */

.cam .cam-marks { position: absolute; inset: -9px; margin: 0; padding: 0; --l: 20px; pointer-events: none; }  /* margin/padding: undo .guest .frame */

.cam-src,
.cam-canvas,
.cam-review,
.cam-review video,
.cam-review img,
.cam-flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
/* The raw camera feed sits under the (opaque) canvas that draws it. Keeping it
   rendered at full size stops iOS from pausing it as an invisible video. */
.cam-src { object-fit: cover; pointer-events: none; }
.cam-canvas { display: block; background: var(--night-2); }
.cam-review { overflow: hidden; background: #000; }
.cam-review video,
.cam-review img { display: block; object-fit: contain; }

.cam-playbtn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  display: grid;
  place-items: center;
}
.cam-playbtn svg { width: 68px; height: 68px; opacity: 0; transition: opacity .15s; }
.cam-playbtn.paused svg { opacity: 1; }

/* Recording readout: ● 00:12 / 01:00 (blinking dot comes from .osd.live) */
.cam .cam-rec {
  top: 10px;
  left: 10px;
  padding: 7px 10px 7px 9px;
  border-radius: 999px;
  background: rgba(28, 23, 32, .62);
  color: var(--pearl);
  font-size: 12px;
  letter-spacing: .08em;
}

/* Filter name, faded in over the picture when it changes */
.cam-fname {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 16px;
  font: italic 500 clamp(30px, 9vw, 40px)/1.1 var(--display);
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
}
.cam-fname.show { animation: cam-fname 1.1s ease-out both; }

@keyframes cam-fname {
  0% { opacity: 0; }
  20%, 65% { opacity: 1; }
  100% { opacity: 0; }
}

.cam-flash { background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: cam-flash .4s ease-out; }

@keyframes cam-flash {
  from { opacity: .85; }
  to { opacity: 0; }
}

/* Starting / error message */
.cam-msg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 32px;
  text-align: center;
}
.cam-msg-text { margin: 0; max-width: 28ch; font-size: 17px; text-wrap: balance; }
.cam-msg-sub { margin: 0; max-width: 28ch; font-size: 14px; color: var(--mist); }
.cam-msg-actions { display: grid; gap: 10px; width: 100%; max-width: 300px; margin-top: 18px; }

.cam-alert {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: max-content;
  max-width: calc(100% - 48px);
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--pearl);
  color: var(--night);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transform: translateX(-50%);
}

.cam-note { margin: -4px 0 0; padding: 0 20px 4px; text-align: center; font-size: 13px; color: var(--mist); }

/* ─── Filter strip ────────────────────────────────────────────────────────── */

.cam-filters {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 6px 0 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cam-filters::-webkit-scrollbar { display: none; }
/* Spacers let the first and last chips scroll to the centre. */
.cam-filters::before,
.cam-filters::after { content: ''; flex: 0 0 calc(50% - 44px); }

.cam-chip {
  flex: none;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 5px 0 2px;
  border: 0;
  background: none;
  scroll-snap-align: center;
  color: var(--mist);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.cam-chip[aria-pressed="true"] { color: var(--pearl); }
.cam-chip:focus-visible { outline: none; }
.cam-chip:focus-visible .cam-swatch { outline: 2px solid var(--champagne); outline-offset: 6px; }

.cam-swatch {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 233, .14);
  transition: box-shadow .15s, transform .15s;
}
.cam-chip:active .cam-swatch { transform: scale(.94); }
.cam-chip[aria-pressed="true"] .cam-swatch { box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--champagne); }

.cam-swatch[data-f="natural"] { background: radial-gradient(circle at 34% 30%, #f4efe9, #b8adbf 48%, #5f5466); }
.cam-swatch[data-f="golden"] { background: radial-gradient(circle at 34% 30%, #ffeec4, #f3b468 50%, #b25f2c); }
.cam-swatch[data-f="blush"] { background: radial-gradient(circle at 34% 30%, #fff1f5, #f5a8be 52%, #b5617c); }
.cam-swatch[data-f="film"] { background: linear-gradient(155deg, #9db3ac, #4b5d61 52%, #4a3247); }
.cam-swatch[data-f="mono"] { background: linear-gradient(135deg, #f2f0ee 50%, #2b2b2b 50%); }
.cam-swatch[data-f="dreamy"] { background: radial-gradient(circle at 40% 36%, #fff, #e6dbff 34%, #a08ed6); }
.cam-swatch[data-f="hearts"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") 50% 54% / 26px no-repeat,
    radial-gradient(circle at 34% 30%, #ffd3de, #f07f9f 72%);
}
.cam-swatch[data-f="confetti"] {
  background:
    radial-gradient(circle at 30% 30%, #d4b57d 0 3px, transparent 3.5px),
    radial-gradient(circle at 66% 24%, #f4b6c4 0 2.5px, transparent 3px),
    radial-gradient(circle at 74% 58%, #a9c1a0 0 3px, transparent 3.5px),
    radial-gradient(circle at 42% 70%, #f4efe9 0 2.5px, transparent 3px),
    radial-gradient(circle at 22% 56%, #f4b6c4 0 2px, transparent 2.5px),
    radial-gradient(circle at 56% 46%, #d4b57d 0 2px, transparent 2.5px),
    #3a3140;
}
.cam-swatch[data-f="sparkle"] {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ecd5a3' d='M12 1C12.9 7.6 16.4 11.1 23 12 16.4 12.9 12.9 16.4 12 23 11.1 16.4 7.6 12.9 1 12 7.6 11.1 11.1 7.6 12 1Z'/%3E%3C/svg%3E") 50% 50% / 30px no-repeat,
    radial-gradient(circle, #54464d, #2a2330);
}
.cam-swatch[data-f="keepsake"] {
  background:
    linear-gradient(160deg, #8d7a96, #c8a98f) 50% 36% / 26px 24px no-repeat,
    linear-gradient(#f8f4ee, #f8f4ee) 50% 44% / 32px 38px no-repeat,
    #3a3140;
}

/* ─── Mode switch and shutter ─────────────────────────────────────────────── */

.cam-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px 0 16px;
}

.cam-modes {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--night-2);
}
.cam-mode {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist);
}
.cam-mode[aria-pressed="true"] { background: var(--night-3); color: var(--pearl); }
.cam-mode:disabled { cursor: default; }
.cam-mode:disabled:not([aria-pressed="true"]) { opacity: .4; }
/* The pills stay slim; an invisible margin makes each tap target 44px tall */
.cam-mode, .cam-prompt { position: relative; }
.cam-prompt { z-index: 1; }  /* above the stage's top padding */
.cam-mode::after, .cam-prompt::after { content: ''; position: absolute; inset: -5px 0; }

/* Pearl ring + red dot, as on the guest page; the dot squares off while recording. */
.cam-shutter {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
}
.cam-shutter::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 3px solid var(--pearl);
  border-radius: 50%;
}
.cam-shutter-dot {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--rec);
  transition: width .2s ease, height .2s ease, border-radius .2s ease, background-color .2s, opacity .2s, transform .1s;
}
.cam-shutter:active .cam-shutter-dot { transform: scale(.92); }
.cam-shutter.is-rec .cam-shutter-dot { width: 28px; height: 28px; border-radius: 7px; }
.cam-shutter.is-photo .cam-shutter-dot { width: 64px; height: 64px; background: var(--pearl); }
.cam-shutter:disabled { cursor: default; }
.cam-shutter:disabled .cam-shutter-dot { opacity: .45; }

.cam-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  opacity: 0;
  pointer-events: none;
}
.cam-ring circle {
  fill: none;
  stroke: var(--rec);
  stroke-width: 3;
  stroke-dasharray: 241.9;
  stroke-dashoffset: 241.9;
}
.cam-shutter.is-rec .cam-ring { opacity: 1; }

/* ─── Review ──────────────────────────────────────────────────────────────── */

.cam-review-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 10px;
  padding: 6px 18px 18px;
}

.cam-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Sizes ───────────────────────────────────────────────────────────────── */

@media (max-height: 700px) {
  .cam-top { padding-top: 6px; }
  .cam-stage { padding: 12px 16px; }
  .cam-chip { width: 58px; }
  .cam-swatch { width: 48px; height: 48px; }
  .cam-filters::before,
  .cam-filters::after { flex-basis: calc(50% - 41px); }
  .cam-bottom { gap: 10px; padding-bottom: 12px; }
  .cam-shutter { width: 70px; height: 70px; }
  .cam-shutter-dot { width: 52px; height: 52px; }
  .cam-shutter.is-photo .cam-shutter-dot { width: 56px; height: 56px; }
  .cam-shutter.is-rec .cam-shutter-dot { width: 24px; height: 24px; border-radius: 6px; }
}

@media (min-width: 600px) and (min-height: 640px) {
  .cam-stage { padding: 24px 26px; }
  .cam .cam-marks { inset: -12px; }
  .cam-src,
  .cam-canvas,
  .cam-review,
  .cam-review video,
  .cam-review img,
  .cam-flash { border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cam-shutter-dot, .cam-swatch, .cam-playbtn svg { transition: none; }
}