/* gate.css — the password gate (templates/_gate.html, server/app.py).

   Linked by the canvas and the review window only while a visitor is
   locked out. The page underneath renders as usual and this layer sits
   over all of it, blurring what is behind; the modal is the app's own
   (demo.css .dm-modal: white, the brand line on top) and the field takes
   the island's pill with the arrow in its circle, like "Let's chat!" on
   the landing page. Uses the tokens both pages define (app.css,
   review.css); --sh-4 is only in app.css, hence the fallback. */

html.is-gated { overflow: hidden; }
.dm-gate {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  background: rgba(245, 246, 248, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(0.9); backdrop-filter: blur(14px) saturate(0.9);
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dm-gate-modal {
  width: 380px; max-width: 100%; margin: 0; padding: 24px 26px 20px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4, 0 20px 48px rgba(16, 24, 40, 0.16), 0 4px 12px rgba(16, 24, 40, 0.08));
  font-family: var(--font); color: var(--ink);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dm-gate-label { display: block; margin: 0 0 14px; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.dm-gate-row {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 16px; box-sizing: border-box;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dm-gate-row:focus-within { border-color: var(--brand); background: var(--surface); }
.dm-gate.is-wrong .dm-gate-row { border-color: var(--red); background: var(--red-tint); animation: dm-gate-shake 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.dm-gate-input {
  flex: 1; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 15px; letter-spacing: 0.12em;
  color: var(--ink); background: none; border: 0; outline: none;
}
.dm-gate-go {
  flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--brand); color: var(--ink-on-color, #fff); display: grid; place-items: center;
  transition: background var(--t-fast), transform var(--t), opacity var(--t-fast);
}
.dm-gate-go svg { width: 15px; height: 15px; display: block; }
.dm-gate-go:hover { background: var(--brand-hover); transform: translateX(2px); }
.dm-gate-go:disabled { background: var(--border-strong); cursor: default; transform: none; }
.dm-gate-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dm-gate-error { min-height: 17px; margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--red-ink); }

/* The password was right: the layer fades and the page behind is itself again. */
html.is-opening .dm-gate { opacity: 0; pointer-events: none; }
html.is-opening .dm-gate-modal { transform: translateY(-8px); }

@keyframes dm-gate-shake {
  0%, 100% { transform: none; }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .dm-gate, .dm-gate-modal, .dm-gate-go { transition: none; }
  .dm-gate.is-wrong .dm-gate-row { animation: none; }
}
@media (max-width: 480px) {
  .dm-gate-modal { padding: 20px 18px 18px; }
}