/* /login — buyer and seller, one clay tile each.
   The surface comes from seller.css (canvas, tokens) and
   realize-bai.css (the tile and its corner pin). This file adds the
   page frame and skins the buyer panel, whose markup is shared with
   the landing hero but whose hero styling is deliberately not loaded
   here — only the screen-swapping rules are reproduced. */

.lg-page {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 5vh, 44px);
  padding: clamp(28px, 6vh, 64px) 20px;
}

.lg-head { text-align: center; }
.lg-mark img { height: 32px; width: auto; display: block; margin: 0 auto; }
.lg-lede { margin: 14px 0 0; font-size: 14px; color: var(--rzb-ink-2); }

/* One matte-glass sheet holds both columns — the same panel the portal
   floats over the vineyard, rather than two separate tiles. */
.lg-panel {
  width: 100%; max-width: 880px;
  padding: 30px;
  background: var(--sl-glass-panel, rgba(240, 233, 223, 0.28));
  backdrop-filter: blur(30px) saturate(1.1);
  -webkit-backdrop-filter: blur(30px) saturate(1.1);
  border: 1px solid var(--sl-glass-border, rgba(255, 255, 255, 0.5));
  border-radius: 26px;
  box-shadow: 0 24px 60px -26px rgba(22, 20, 18, 0.45);
}
.lg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
/* Equal padding either side of the hairline, so the two columns come
   out the same width. */
.lg-box { padding-right: 30px; }
.lg-grid > .lg-box + .lg-box {
  padding-right: 0; padding-left: 30px;
  border-left: 1px solid rgba(120, 114, 100, 0.22);
}
.lg-box { display: flex; flex-direction: column; }
.lg-box__head { margin-bottom: 18px; }
.lg-box__title {
  display: block;
  font-family: var(--sl-serif, serif);
  font-size: 21px; font-weight: 600;
  color: var(--rzb-ink);
}
.lg-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--rzb-muted); }

/* This page is sign-in only; the code-request route is offered as
   "Request access" in the footer instead. */
.lg-box [data-screen-go="otp"],
.lg-box .hero-form__foot-sep { display: none; }
.lg-box .hero-form__foot--split { justify-content: center; }

/* ── Fields and buttons, shared by both boxes ────────────────────── */
.lg-form { display: flex; flex-direction: column; gap: 14px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-label {
  font-family: var(--sl-mono, monospace);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--rzb-muted);
}
.lg-input {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--sl-sans, sans-serif); font-size: 14px;
  color: var(--rzb-ink);
  background: var(--sl-surface, #fff);
  border: 1px solid rgba(22, 20, 18, 0.16);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lg-input::placeholder { color: var(--rzb-muted); }
.lg-input:focus {
  border-color: var(--sl-brand, #6E4658);
  box-shadow: 0 0 0 3px var(--sl-ring, rgba(110, 70, 88, 0.28));
}
.lg-submit {
  margin-top: 4px;
  padding: 14px 18px;
  font-family: var(--sl-sans, sans-serif); font-size: 14px; font-weight: 600;
  color: #fff;
  background: var(--sl-brand, #6E4658);
  border: 1px solid transparent; border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--sl-clay-raise);
  transition: transform .12s, background .15s;
}
.lg-submit:hover { background: var(--sl-brand-deep, #573648); transform: translateY(-1px); }
.lg-submit:active { transform: translateY(1px); box-shadow: var(--sl-clay-press); }

.lg-foot {
  /* auto so the closing rule lands at the same height in both columns,
     even though only the buyer has a password-reset line above it. */
  margin: 16px 0 0; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--rzb-line-2);
  font-size: 12.5px; color: var(--rzb-muted);
}
.lg-foot a { color: var(--rzb-gold); }

/* ── Buyer panel ─────────────────────────────────────────────────
   Its markup is the landing hero's, but landing.css is not loaded on
   this page — so the four-screen visibility rules are reproduced here
   and the fields are skinned to match the seller box exactly. */
.signin-modal__screen { display: none; }
.signin-modal[data-screen="otp"]    .signin-modal__screen[data-screen-id="otp"],
.signin-modal[data-screen="verify"] .signin-modal__screen[data-screen-id="verify"],
.signin-modal[data-screen="signin"] .signin-modal__screen[data-screen-id="signin"],
.signin-modal[data-screen="forgot"] .signin-modal__screen[data-screen-id="forgot"] {
  display: block;
}
/* The box already carries the heading, and the seller column has no
   lede — so the panel's own headings go, and the two forms start level. */
.lg-box .signin-modal__eyebrow,
.lg-box .signin-modal__title,
.lg-box .signin-modal__lede { display: none; }

.lg-box .hero-form { display: flex; flex-direction: column; gap: 14px; }
.lg-box .hero-form__row { display: flex; flex-direction: column; gap: 6px; }
.lg-box .hero-form__input {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--sl-sans, sans-serif); font-size: 14px;
  color: var(--rzb-ink);
  background: var(--sl-surface, #fff);
  border: 1px solid rgba(22, 20, 18, 0.16);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lg-box .hero-form__input::placeholder { color: var(--rzb-muted); }
.lg-box .hero-form__input:focus {
  border-color: var(--sl-brand, #6E4658);
  box-shadow: 0 0 0 3px var(--sl-ring, rgba(110, 70, 88, 0.28));
}
.lg-box .hero-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  font-family: var(--sl-sans, sans-serif); font-size: 14px; font-weight: 600;
  color: #fff;
  background: var(--sl-brand, #6E4658);
  border: 1px solid transparent; border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--sl-clay-raise);
  transition: transform .12s, background .15s;
}
.lg-box .hero-form__submit:hover { background: var(--sl-brand-deep, #573648); transform: translateY(-1px); }
.lg-box .hero-form__submit:active { transform: translateY(1px); box-shadow: var(--sl-clay-press); }
.lg-box .hero-form__submit-arrow { display: none; }

.lg-box .hero-form__error {
  font-size: 12px;
  color: var(--sl-wine, #A34E52);
}
.lg-box .hero-form__consent {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--rzb-ink-2);
}
.lg-box .hero-form__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: var(--sl-surface, #fff);
  border: 1px solid rgba(22, 20, 18, 0.28);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.lg-box .hero-form__consent input[type="checkbox"]:checked {
  background: var(--sl-brand, #6E4658);
  border-color: var(--sl-brand, #6E4658);
}
.lg-box .hero-form__consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lg-box .hero-form__consent a { color: var(--rzb-gold); }

.lg-box .hero-form__foot {
  margin-top: auto; padding-top: 12px;
  text-align: center;
}
.lg-box .signin-modal__inline-link {
  padding: 0;
  font-family: var(--sl-sans, sans-serif); font-size: 12.5px; font-weight: 600;
  color: var(--rzb-gold);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline;
}
/* Let the panel fill the tile so both boxes end level. */
.lg-box .signin-modal,
.lg-box .signin-modal__screen,
.lg-box .hero-form { flex: 1 1 auto; }

@media (max-width: 820px) {
  .lg-panel { max-width: 440px; padding: 24px; }
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-box { padding-right: 0; }
  .lg-grid > .lg-box + .lg-box {
    padding-left: 0; margin-top: 24px; padding-top: 24px;
    border-left: 0; border-top: 1px solid rgba(120, 114, 100, 0.22);
  }
}