/* The sign-in page: one plate on pure black, under the monogram. */

body.gate { min-height: 100vh; }
.gate-main {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  padding: 36px 16px calc(36px + env(safe-area-inset-bottom));
}

.gate-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; width: 100%; }
.gate-hero { display: none; }
.gate-tag { color: var(--ink-2); font-size: 15px; letter-spacing: .02em; text-align: center; max-width: 32ch; animation: gate-rise .7s var(--ease) .2s both; }
.gate-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--gold-hi); }
.gate-brand .mark { width: 64px; height: 64px; border-radius: 50%; filter: drop-shadow(0 0 22px rgba(var(--glow), .7)); animation: gate-mark .9s var(--ease) both; }
.gate-word { font: 700 clamp(38px, 8vw, 52px)/1 var(--f-display); letter-spacing: .22em; padding-left: .22em; color: var(--ink); animation: gate-rise .7s var(--ease) .1s both; }
.gate-line { height: 1px; width: 0; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); box-shadow: 0 0 18px rgba(var(--glow), .85); animation: gate-line 1s var(--ease) .15s forwards; }
@keyframes gate-mark { from { opacity: 0; transform: scale(.9); } }
@keyframes gate-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes gate-line { to { width: min(300px, 64vw); } }

.gate-card { width: min(440px, 100%); animation: gate-rise .7s var(--ease) .3s both; }
.gate-plate > .pb { padding: 26px 26px 24px; }
.gate-title { font: 700 36px/1.04 var(--f-display); letter-spacing: .01em; }
.gate-lead { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.gate-lead b { color: var(--ink); font-weight: 600; }

.gate-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.gate-form .field { min-height: 44px; font-size: 16px; }
.gate-form .label { font-size: 13.5px; }
.gate-form .code { font: 600 20px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.pw { position: relative; }
.pw .field { padding-right: 48px; }
.pw .reveal {
  position: absolute; right: 2px; top: 2px; bottom: 2px; width: 42px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ink-3);
}
.pw .reveal:hover { color: var(--gold-hi); }
.pw .reveal svg { width: 19px; height: 19px; }
.pw .reveal[aria-pressed="true"] { color: var(--gold-hi); }

.gate-msg:empty { display: none; }
.gate-msg .notice { padding: 10px 12px; font-size: 13.5px; }
.btn.wide { width: 100%; min-height: 46px; font-size: 15px; }
.gate-actions { display: flex; flex-direction: column; gap: 10px; }

.gate-help { margin-top: 18px; color: var(--ink-3); font-size: 13px; }
.gate-help summary { cursor: pointer; width: fit-content; color: var(--ink-2); }
.gate-help summary:hover { color: var(--gold-hi); }
.gate-help p { margin-top: 8px; line-height: 1.6; }
.gate-help code { font: 500 12px ui-monospace, "SF Mono", Menlo, monospace; background: var(--slate); padding: 1px 6px; border: 1px solid var(--hair); overflow-wrap: anywhere; }
.gate-foot { color: var(--ink-3); font-size: 12.5px; }

@media (max-width: 480px) {
  .gate-main { justify-content: flex-start; gap: 24px; padding-top: 44px; }
  .gate-plate > .pb { padding: 22px 18px 20px; }
  .gate-title { font-size: 32px; }
}
@media (max-height: 640px) and (min-width: 481px) {
  .gate-main { justify-content: flex-start; padding-top: 28px; gap: 20px; }
  .gate-brand .mark { width: 48px; height: 48px; }
}

/* a wide screen: Habib on the left, the form on the right */
@media (min-width: 960px) {
  .gate-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); align-content: center; align-items: center; gap: 24px 36px; width: min(1240px, 100%); margin: 0 auto; padding: 36px 40px; }
  .gate-hero { display: grid; place-items: center; position: sticky; top: 0; height: 100vh; align-self: start; }
  .gate-hero::before {
    content: ""; position: absolute; left: 50%; top: 42%; width: min(78%, 62vh); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    border: 1px solid rgba(var(--glow), .16);
    box-shadow: 0 0 0 36px rgba(var(--glow), .025), 0 0 0 37px rgba(var(--glow), .09), 0 0 0 78px rgba(var(--glow), .015), 0 0 0 79px rgba(var(--glow), .06), inset 0 0 140px rgba(var(--glow), .10);
  }
  .gate-hero .habib-figure { position: relative; z-index: 1; width: min(100%, 78vh); max-width: 620px; }
  .gate-brand .mark { display: none; }
}

.gate-face { display: flex; justify-content: center; }
.gate-face .face { filter: drop-shadow(0 0 18px rgba(var(--glow), .45)); }