/* The sign-in screen — the first thing a new device sees. Built from the
   style guide's parts (packages/ui/styles/parts.css: `.field`, `.btn`),
   which reach it because `.gate` is in their list of surfaces outside
   #stage. What is here is only its layout: a record on the desk, with
   the tavern behind it (theme.css, beside the list sketches). */
.gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background-color: var(--board);
  padding: var(--sp-5, 24px) var(--sp-4, 16px);
  color: var(--ink);
}
.gate[hidden] { display: none; }
/* The parts give a button its display, which would beat the attribute:
   on this screen, hidden is hidden — the local-only skip above all. */
.gate [hidden] { display: none !important; }
/* Square: it is a record, not an action. */
.gate-card {
  width: 100%; max-width: 420px; box-sizing: border-box;
  border: 1px solid var(--edge, var(--rule)); background: var(--card);
  padding: var(--sp-5, 24px);
  box-shadow: 0 18px 50px color-mix(in srgb, #000 28%, transparent);
}
.gate-mark { font: 600 var(--fs-stat, 30px)/1.1 var(--display, var(--serif)); letter-spacing: -.01em; color: var(--ink); }
.gate-sub  { color: var(--ink-dim); font: 400 var(--fs-body, 15px)/1.4 var(--sans); margin: var(--sp-1, 4px) 0 var(--sp-4, 16px); }
.gate-step { display: grid; gap: var(--sp-2, 8px); }
.gate-step[hidden] { display: none; }
.gate-label {
  font-family: var(--caps); text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; color: var(--ink-dim);
}
/* 16px stops iOS zooming in on focus. The page under the card, so the
   field reads as a place to write on the card's paper. */
.gate .gate-field { font-size: 16px; background: var(--board); }
.gate .gate-field.code { height: auto; padding: var(--sp-2, 8px); font: 600 28px/1.2 var(--sans); text-align: center; letter-spacing: .35em; }
.gate-step > .btn { justify-self: stretch; }
/* A choice you set is filled with ink (style guide, "three kinds of on"). */
.gate input[type='checkbox'] { accent-color: var(--ink); }
.gate .account-choices { border-color: var(--edge, var(--rule)); }
.gate-err {
  margin: var(--sp-3, 12px) 0 0; padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-left: 2px solid var(--oxblood); color: var(--ink);
  font: 400 13px/1.5 var(--sans);
}
.gate-err[hidden] { display: none; }
.gate-note {
  margin: var(--sp-4, 16px) 0 0; color: var(--ink-dim);
  font: 400 12px/1.5 var(--sans);
}