/* p48 (2026-11-08) — the sign-in page. Its own file: the rest of the app is being restyled on p46/dark-web, and nothing
   here reaches outside #gate.lg. Composition and colours measured off Albert's reference
   (design-refs/login-reference-zeromark.webp, 2000×1094): ground #161718; pinstripes every ~6.7 px, blue at 45 % of
   the height (51,87,143) and fading to almost nothing at the top and bottom; a serif line in warm light grey (#c9c6bb)
   at ~44 % of the height; the wordmark (#b3afa3) 85 % of the width, 3.5 % above the bottom edge, with the same stripes
   running faintly over its letters. Only the copy and the wordmark are Patron's own.
   p48b (2026-11-08), Albert: "remove the blue stripes it should be black with the letters and just a ... invite only
   thing and then request access button": the ground is black, no stripes anywhere (nor over the letters), the
   tagline is gone, and the middle holds the thin "Invite only" beside "Request access". */

.lg {
  --lg-ground: #000;
  --lg-type: #c9c6bb;
  --lg-word: #b3afa3;
  --lg-soft: #9a978d;
  --lg-faint: #75736c;
  --lg-pitch: 6.7px;
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--lg-ground); color: var(--lg-type);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg[hidden] { display: none; }

/* Made in + the flag (3:5, black red gold), small, top right */
.lg-made {
  position: absolute; top: 22px; right: 28px; z-index: 2; margin: 0;
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; letter-spacing: .01em; color: var(--lg-soft);
}
.lg-flag { display: block; width: 15px; height: 9px; box-shadow: 0 0 0 .5px rgb(255 255 255 / .22); }

/* the middle: the two controls, or the one field they open, in the black above the letters */
.lg-center {
  position: relative; z-index: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10vh 24px 0; text-align: center;
}
.lg-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.lg-act {
  width: min(360px, calc(100vw - 44px)); min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px;
}
/* "Invite only": words, a little bigger than the button's, above it */
.lg-only { margin: 0 0 4px; font-size: 17px; font-weight: 400; letter-spacing: .01em; color: var(--lg-type); }
.lg[data-state="wait"] .lg-act { visibility: hidden; }

/* "Invite only": a quiet pill; pressed, it becomes the email field */
.lg-pill, .lg-join {
  height: 40px; padding: 0 22px; border-radius: 999px;
  font: 500 14px/1 inherit; font-family: inherit; letter-spacing: .005em;
  color: var(--lg-type); background: transparent;
  border: 1px solid rgb(201 198 187 / .34);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.lg-pill:hover { border-color: rgb(201 198 187 / .62); background: rgb(201 198 187 / .06); }
.lg-join { background: var(--lg-type); color: #141516; border-color: var(--lg-type); font-weight: 600; }
.lg-join:hover:not(:disabled) { background: #dedbd1; border-color: #dedbd1; }
.lg-join:disabled, .lg-pill:disabled { opacity: .55; cursor: default; }

.lg-form {
  position: relative; width: 100%; max-width: 340px; margin: 0;
  animation: lg-in .18s ease-out;
}
.lg-form label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.lg-email {
  display: block; width: 100%; height: 44px; box-sizing: border-box;
  padding: 0 52px 0 20px; border-radius: 999px;
  font: 400 15px/1 inherit; font-family: inherit; color: #e4e1d8;
  background: #0b0b0b; border: 1px solid rgb(201 198 187 / .38);
  outline: none; caret-color: var(--lg-type);
}
.lg-email::placeholder { color: var(--lg-faint); }
.lg-email:focus { border-color: rgb(201 198 187 / .7); }
.lg-send {
  position: absolute; top: 5px; right: 5px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  background: var(--lg-type); color: #141516; border: 0; cursor: pointer;
}
.lg-send:hover:not(:disabled) { background: #e2dfd5; }
.lg-send:disabled { opacity: .5; cursor: default; }
.lg-send svg { width: 16px; height: 16px; }

.lg-head { margin: 0; font-size: 15px; font-weight: 500; color: #e2dfd6; line-height: 1.4; }
.lg-text { margin: 0; max-width: 340px; font-size: 13px; line-height: 1.55; color: var(--lg-soft); }
.lg-text b { font-weight: 500; color: var(--lg-type); }
.lg-text.bad { color: #d99a8c; }
.lg-link {
  padding: 2px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--lg-faint);
  text-decoration: underline; text-decoration-color: rgb(117 115 108 / .5); text-underline-offset: 3px;
}
.lg-link:hover { color: var(--lg-type); }
.lg-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.lg-code { letter-spacing: .12em; }

.lg-pill:focus-visible, .lg-join:focus-visible, .lg-send:focus-visible, .lg-link:focus-visible {
  outline: 2px solid rgb(201 198 187 / .7); outline-offset: 3px;
}

/* PATRON across the bottom, edge to edge, solid */
.lg-word {
  position: relative; z-index: 0;
  margin: 0 7.5vw 3.5vh; color: var(--lg-word); line-height: 0;
}
.lg-wordsvg { display: block; width: 100%; height: auto; }

@keyframes lg-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lg-form { animation: none; } }

/* a phone: the same composition, the wordmark still across the whole width */
@media (max-width: 600px) {
  .lg-made { top: 16px; right: 18px; font-size: 12px; }
  .lg-center { padding: 6vh 22px 0; }
  .lg-word { margin: 0 6vw 3vh; }
}
@media (max-height: 560px) {
  .lg-center { justify-content: flex-start; padding-top: 40px; }
}

/* the step-up sheet (login_stepUp) — the one rule here that is not inside #gate: its QR code */
.sheet .lg-qr { display: block; margin: 14px auto 10px; padding: 8px; border-radius: 10px; background: #fff; }