/* The lock's own few styles: the login card a visitor sees while the
   site is closed, and the padlock staff see once it is open to them.
   The site's real stylesheet is inside the sealed file (see gate.js),
   so nothing here is shared with it: the colors are written out. */

html.locked,
html.locked body {
  margin: 0;
  min-height: 100%;
  background: #05080f;
  color: #e9eefb;
  font-family: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

#gate {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
#gate *,
#gate *::before,
#gate *::after { box-sizing: border-box; }

.gate-card {
  width: min(27rem, 100%);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(160deg, #101a2e, #0b1220) padding-box,
    linear-gradient(140deg, rgba(79, 140, 255, 0.95), rgba(34, 211, 255, 0.15) 45%, rgba(34, 211, 255, 0.8)) border-box;
  /* drawn to end inside the 16px beside the card on a phone */
  box-shadow: 0 20px 46px -30px rgba(47, 107, 255, 0.95);
}
.gate-card h1 {
  margin: 0 0 0.35em;
  font-size: 1.7rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.gate-lede { margin: 0; color: #94a1bc; }
.gate-card form { margin-top: 1.6rem; }
.gate-label {
  margin: 0 0 0.9rem;
  color: #22d3ff;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gate-field { margin-bottom: 1.1rem; }
.gate-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.gate-field input {
  width: 100%;
  padding: 0.8em 0.95em;
  border: 1px solid rgba(128, 170, 255, 0.2);
  border-radius: 9px;
  background: #03050a;
  color: #e9eefb;
  font: inherit;
}
.gate-field input:focus {
  outline: none;
  border-color: #22d3ff;
  box-shadow: 0 0 0 3px rgba(34, 211, 255, 0.22);
}
.gate-button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: 9px;
  background: linear-gradient(90deg, #4f8cff, #22d3ff);
  color: #03101c;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(34, 211, 255, 0.35);
}
.gate-button:focus-visible { outline: 2px solid #22d3ff; outline-offset: 3px; }
.gate-button:disabled { opacity: 0.45; cursor: not-allowed; }
.gate-error {
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 107, 107, 0.55);
  border-radius: 9px;
  background: rgba(255, 90, 90, 0.09);
  color: #ffb3b3;
  font-size: 0.94rem;
}
.gate-plain { margin: 2rem 1rem; }

/* Staff preview: the padlock at the top right of every page logs the
   staff account off and locks the site. It sits in the page's
   right-hand gutter, clear of the menu, and its glow stays inside the
   8px between it and the corner of the screen. */
#staff-lock {
  position: fixed;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 50;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(34, 211, 255, 0.55);
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.85);
  color: #22d3ff;
  box-shadow: 0 0 7px rgba(34, 211, 255, 0.45);
  cursor: pointer;
}
#staff-lock:hover { background: rgba(34, 211, 255, 0.16); }
#staff-lock:focus-visible { outline: 2px solid #22d3ff; outline-offset: 2px; }
#staff-lock:disabled { opacity: 0.5; cursor: default; }
#staff-lock svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.staff-preview .masthead > .wrap {
  padding-right: max(clamp(1.1rem, 4vw, 3rem), 3.6rem);
}
/* the order page's cart buttons (its top corner on a phone, and the copy
   pinned there once the masthead is scrolled away) sit left of it */
html.staff-preview .masthead .cart-top { right: 3.35rem; }
html.staff-preview .cart-top--pin { right: calc(3.35rem + env(safe-area-inset-right, 0px)); }