/* ============================================================================
   SIGN-IN SCREEN — GSB Design System v3 (#password-gate-overlay)
   Loaded after style.css, so these rules restyle the same classes the gate has
   always used (js/password-gate.js only shows / hides elements by id).
   Desktop: a pine field with the stacked wordmark (night colours: snow letters,
   forest half highlight under SHOOT, leaf seed) beside the form on snow.
   Phone: the field becomes a band above the form. Flat fills, square corners,
   Instrument Sans, moss for the primary action.
   ============================================================================ */
.password-gate {
  --g-snow: #F6F7F3; --g-frost: #ECF0EA; --g-mist: #D9E3D8; --g-sage: #A9C2AE;
  --g-moss: #4F7A5A; --g-forest: #2E4F3B; --g-pine: #1C3326; --g-ink: #1A1E1B;
  --g-leaf: #82BB90; --g-muted: #56625A; --g-muted-pine: #B2C4B7;
  --g-accent-text: #3E6348; --g-danger-text: #9A4423;
  --g-rule: rgba(26, 30, 27, 0.12); --g-rule-strong: rgba(26, 30, 27, 0.45);
  background: var(--g-snow);
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow-y: auto;
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--g-ink);
  -webkit-font-smoothing: antialiased;
}
.password-gate::before { display: none; }
.password-gate * { box-sizing: border-box; }

.password-gate .password-gate-inner {
  max-width: none;
  width: 100%;
  min-height: 100%;
  flex-direction: row;
  align-items: stretch;
  animation: gsbGateFade 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes gsbGateFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- the field ---- */
.password-gate .password-gate-hero {
  flex: 1 1 50%;
  margin: 0;
  padding: clamp(32px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  text-align: left;
  background: var(--g-pine);
  color: var(--g-snow);
}
.password-gate .gate-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 600;
  font-size: clamp(52px, 7.2vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--g-snow);
}
.password-gate .gate-wordmark > span { display: block; }
.password-gate .gate-wordmark__hl {
  background: linear-gradient(transparent 50%, var(--g-forest) 50%, var(--g-forest) 92%, transparent 92%);
  padding: 0 0.07em;
  margin: 0 -0.07em;
}
.password-gate .gate-seed {
  display: inline-block;
  width: 0.19em;
  height: 0.19em;
  margin-left: 0.05em;
  background: var(--g-leaf);
  vertical-align: baseline;
}
.password-gate .password-gate-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-muted-pine);
}

/* ---- the form ---- */
.password-gate .password-gate-card {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(32px, 6vw, 72px);
  background: var(--g-snow);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  overflow: visible;
}
.password-gate .password-gate-card::before { display: none; }
.password-gate .password-gate-form-wrap { width: 100%; max-width: 380px; }
.password-gate .password-gate-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--g-ink);
}
.password-gate .gate-hl {
  background: linear-gradient(transparent 58%, var(--g-mist) 58%, var(--g-mist) 96%, transparent 96%);
  padding: 0 0.08em;
  margin: 0 -0.08em;
}
.password-gate .password-gate-subtitle { margin: 0 0 28px; font-size: 15px; line-height: 1.5; color: var(--g-muted); }

.password-gate .ms-signin-btn {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: var(--g-mist);
  color: var(--g-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
  transition: background-color 0.15s ease;
}
.password-gate .ms-signin-btn:hover { background: var(--g-sage); border-color: transparent; box-shadow: none; transform: none; }
.password-gate .ms-signin-btn--primary { background: var(--g-moss); color: var(--g-snow); }
.password-gate .ms-signin-btn--primary:hover { background: var(--g-forest); }
.password-gate .ms-signin-btn--primary svg { background: #fff; border-radius: 0; padding: 3px; }
.password-gate .ms-signin-btn:disabled { opacity: 0.6; }

.password-gate #password-gate-fallback { margin-top: 10px; }
.password-gate .password-gate-divider { margin: 20px 0; color: var(--g-muted); font-size: 12px; }
.password-gate .password-gate-divider::before,
.password-gate .password-gate-divider::after { background: var(--g-rule); }

.password-gate #password-gate-form { gap: 10px; }
.password-gate .password-gate-field,
.password-gate #password-gate-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--g-rule-strong);
  border-radius: 0;
  background: var(--g-frost);
  color: var(--g-ink);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  box-shadow: none;
}
.password-gate .password-gate-field::placeholder,
.password-gate #password-gate-input::placeholder { color: var(--g-muted); }
.password-gate .password-gate-field:focus,
.password-gate #password-gate-input:focus { outline: 2px solid var(--g-moss); outline-offset: 2px; background: #fff; border-bottom-color: transparent; box-shadow: none; }

.password-gate .password-gate-btn {
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-radius: 0;
  background: var(--g-moss) !important;   /* .primary-btn carries its own fill */
  color: var(--g-snow) !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
  transform: none;
}
.password-gate .password-gate-btn:hover { background: var(--g-forest) !important; box-shadow: none; transform: none; }
.password-gate .ms-signin-btn:focus-visible,
.password-gate .password-gate-btn:focus-visible { outline: 2px solid var(--g-moss); outline-offset: 3px; }

.password-gate .password-gate-info {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--g-mist);
  color: var(--g-accent-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}
.password-gate .password-gate-error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: rgba(181, 83, 46, 0.12);
  color: var(--g-danger-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
.password-gate .password-gate-footer {
  margin: 28px 0 0;
  justify-content: flex-start;
  font-size: 12px;
  font-weight: 400;
  color: var(--g-muted);
}

/* ---- phone: the field becomes a band above the form ---- */
@media (max-width: 720px) {
  .password-gate .password-gate-inner { flex-direction: column; }
  .password-gate .password-gate-hero { flex: 0 0 auto; padding: 32px 24px 26px; gap: 26px; }
  .password-gate .gate-wordmark { font-size: 46px; }
  .password-gate .password-gate-card { flex: 1 1 auto; justify-content: flex-start; padding: 32px 24px 40px; }
  .password-gate .password-gate-form-wrap { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .password-gate .password-gate-inner { animation: none; } }