/* buka-watch · gate.css - the arm-specific overlay.

   The gate sits on top of the player, which is already mounted and
   buffering behind it. That is deliberate: the download and the viewer's
   decision happen at the same time, so clearing the gate starts playback
   with no spinner. Nothing here may differ between arms except the panel
   contents themselves. */

.gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.gate-sheet {
  width: 100%;
  max-width: 520px;
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  max-height: 92svh;
  overflow-y: auto;
}

.gate-panel { display: grid; gap: 12px; }

.gate-h {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.gate-h .price { color: var(--amber); white-space: nowrap; }
.gate-sub { color: var(--text-mut); font-size: 14px; margin-bottom: 4px; }

/* ---- ad playback ----
   Fills the sheet edge to edge at the master's aspect ratio. No controls:
   the ad is not skippable for the POC, and ad length is a step-2
   variable rather than something the viewer sets. */
.gate-panel--ad { gap: 8px; }
.ad-mount {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 68svh;
  margin-inline: auto;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 12px;
}
.ad-mount .video-frame { width: 100%; height: 100%; border: 0; }
.ad-note {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  text-align: center;
}

/* ---- signup form ---- */
.gate-form { display: grid; gap: 14px; }

.field { display: grid; gap: 6px; }
.field-label { font-size: 13px; color: var(--text-mut); }
.field-label em { font-style: normal; color: var(--ink-400); }

.field input {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  background: var(--ink);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-md);
  color: var(--white);
  font: 400 16px/1.4 var(--sans); /* 16px keeps iOS from zooming on focus */
}
.field input:focus { border-color: var(--amber); outline: none; }

/* POPIA: never pre-ticked, and the purpose sits next to the box rather
   than behind a link. */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-mut);
}
.consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--amber);
}

.form-error {
  color: #FF8A7A;
  font-size: 13px;
  margin: -4px 0 0;
}