/* Sign in / sign up — a split page: brand art on the left, the form on the right.

   Both the logo and the illustration are masks rather than coloured images, so
   their greens come from the colour library and follow it if it changes. */

/* Logo and illustration share the neon green, straight from the colour library. */

.auth-page { min-height: 100vh; background: var(--paper); }

.auth-shell {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  min-height: 100vh;
}

/* ---------- left: dark green, oversized art ---------- */
.auth-art {
  position: relative;
  overflow: hidden;
  background: var(--nav-green);
  padding: clamp(24px, 3vw, 44px);
}

.auth-brand {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(112px, 12vw, 148px);
  height: 46px;
  background-color: var(--lime);
  -webkit-mask: url(/assets/merle-wordmark-transparent.png) left center / contain no-repeat;
  mask: url(/assets/merle-wordmark-transparent.png) left center / contain no-repeat;
}

/* Oversized on purpose: the illustration runs past the bottom and right of the
   panel so it reads as artwork rather than a picture sat in a box.

   Scoped to the two-column layout rather than switched off below it: turning a
   pseudo-element off with `content: none` still leaves the mask URL in a rule
   that matches, and the browser fetches the image anyway. Written this way, a
   phone never requests the 128 KB illustration it would not show. */
@media (min-width: 861px) {
  .auth-art::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 54%;
    width: 112%;
    aspect-ratio: 1000 / 967;
    transform: translate(-50%, -50%);
    background-color: var(--lime);
    -webkit-mask: url(/assets/auth-illustration.png) center / contain no-repeat;
    mask: url(/assets/auth-illustration.png) center / contain no-repeat;
    pointer-events: none;
  }
}

/* ---------- right: white, the form ---------- */
.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
}

.auth-form-wrap { width: 100%; max-width: 396px; }

.auth-eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.auth-form-wrap h1 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.1;
}

.auth-sub { margin: 0 0 28px; color: var(--muted); font-size: 15px; }

.auth-field { display: block; margin-bottom: 16px; }
.auth-field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
}
.auth-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(21,21,21,.24);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
}
.auth-field input:focus {
  border-color: var(--nav-green);
  outline: 2px solid var(--nav-green);
  outline-offset: 1px;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 22px;
  font-size: 13px;
}
.auth-check { display: inline-flex; align-items: center; gap: 8px; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--nav-green); }
.auth-link { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.auth-link:hover { color: var(--ink); }

.auth-submit { width: 100%; }
.auth-text-button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.auth-form button:disabled { cursor: wait; opacity: .65; }

.auth-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.auth-alt { margin: 26px 0 0; font-size: 14px; }

.auth-legal {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- narrow: one column, art panel becomes a brand band ---------- */
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; min-height: 0; }
  .auth-art {
    min-height: 132px;
    display: flex;
    align-items: center;
    padding: 22px clamp(20px, 5vw, 32px);
  }
  .auth-brand { height: 38px; }
  .auth-panel { align-items: flex-start; padding: 36px clamp(20px, 5vw, 32px) 56px; }
}