/* The passcode page (rendered by worker/gate.js). It borrows the card, eyebrow, title and
   button from design.css and deliberately avoids .pressed/.embossed-copy: those depend on the
   inline SVG filters, which exist only in index.html. Served without the cookie, so nothing
   here may say more than the gate page itself does. */
.gate{min-height:calc(100vh - 48px);align-content:center;margin-top:24px}
.gate .paper{max-width:520px;width:100%;margin-inline:auto}
.gate .eyebrow{color:var(--muted)}
.gate .section-title{margin-top:12px;color:var(--ink)}
.gate-form{display:grid;justify-items:start;gap:12px;margin-top:36px}
.gate-input{
  width:100%;max-width:280px;min-height:48px;padding:10px 14px;
  border:1px solid var(--rule);border-radius:0;background:rgba(255,255,255,.55);color:var(--ink);
  font:300 18px/1.5 var(--sans);letter-spacing:.3em;
  box-shadow:inset 0 1px 2px rgba(77,73,58,.12);
}
.gate-input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gate-input[aria-invalid="true"]{border-color:var(--ink)}
.gate-error{font-size:13px;letter-spacing:.04em;color:var(--ink)}
.gate .button{margin-top:12px;cursor:pointer;font-family:var(--sans);font-weight:300}
@media(forced-colors:active){.gate-input{border-color:CanvasText;background:Canvas}}