/* The passcode gate. Loaded by index.html and demo.html, after tokens.css and
   bundle.css so .ar-field and .ar-btn are already defined - this file only
   lays the gate out and never restyles a design-system component.

   Why it is its own file rather than part of app.css: demo.html does not load
   app.css at all, and the gate has to look the same on both pages. See
   js/gate.js for what the gate is for and what it does not do. */

/* WHY "ar-passgate" AND NOT "ar-gate"
   ----------------------------------
   `.ar-gate` is already taken: it is the DESIGN SYSTEM's prescription-gate
   block, the "Consultation required" panel with the price on it, rendered on
   all seven peptide pages (bundle.css line 267, screens.js line 229).

   This file first called the passcode overlay `.ar-gate` too, and
   `position: fixed; inset: 0; z-index: 9000` on an opaque background then
   applied to that panel - turning the compliance UI into a full-screen cover
   and burying the back button on every prescription product. The render
   guards caught it, 7 routes, with the overlay check Nina's badge finding
   created. scripts/check_css_collisions.py now makes this class of mistake
   impossible to commit quietly. */

html.ar-passgate-on,
html.ar-passgate-on body { overflow: hidden; }

.ar-passgate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  /* Opaque, not a scrim. Behind this sits a price list that the viewer has not
     yet been cleared to read, so none of it may show through. */
  background: var(--surface-000);
  overflow-y: auto;
}

.ar-passgate__card {
  width: 100%;
  max-width: 380px;
  background: var(--surface-100);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
  padding: var(--space-6);
  text-align: left;
}

.ar-passgate__mark {
  display: block;
  width: 180px;
  height: auto;
  margin-bottom: var(--space-6);
}

.ar-passgate__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--gold-400);
}

.ar-passgate__title {
  margin: 0 0 var(--space-3);
  color: var(--ink-100);
}

.ar-passgate__body {
  margin: 0 0 var(--space-5);
  color: var(--ink-300);
}

/* The field's own margin-bottom is space-4; the button wants a little more
   air than that under an error message. */
.ar-passgate .ar-field { margin-bottom: var(--space-5); }

/* A 6-digit code reads better spaced out, and the numeric face is the one the
   design system reserves for figures. */
.ar-passgate .ar-field__input {
  font-family: var(--font-numeric);
  font-size: 17px;
  letter-spacing: 0.22em;
}

@media (min-width: 1200px) {
  .ar-passgate__card { max-width: 420px; padding: var(--space-8); }
}