/* Formelle — Sign In (Auth 01) — matched to Figma full-bleed layout */

.auth-screen {
  position: relative;
  overflow: hidden; /* safety net so the cover-fit background layer never spills past .auth-screen's own edges */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Background photo, on its own layer instead of directly on .auth-screen.
   FIX: this was `position:fixed`, sized against the mobile browser's
   layout viewport — but on real phones that viewport resizes as the
   address bar shows/hides on scroll, so the fixed layer didn't reliably
   track the actual visible screen and left gaps. `position:absolute`
   instead ties it to .auth-screen's own box (which is already
   position:relative and grows with the page), so it always covers
   exactly the content behind it, mobile included.
   FIX: an extra `transform: scale(1.12)` used to sit on top of
   `background-size:cover` here, added on the theory that plain `cover`
   left the photo looking too small/distant on very wide screens. In
   practice that transform re-zooms the ALREADY cover-cropped box from
   its own center, on every side at once — regardless of
   `background-position` — which is what was pushing the models' heads
   up above the header and eating extra height off the bottom that
   `cover` alone wasn't cropping. Measured against the reference at the
   client's actual 1440×812 window: plain `cover` + `background-position:
   center 15%` alone already reproduces the reference almost exactly
   (heads sit just under the header with the same small margin the
   reference shows, legs crop at roughly the same point) — the 1.12
   zoom was pure extra crop with no matching need. Removed.
   FIX (client-reported, 2026-09-25): this was `inset: 0`, so on any
   screen where .auth-screen's content is taller than one viewport —
   only happens on mobile, where Create Account's two-column layout
   collapses to a single stacked column (plan cards + form) tall enough
   to scroll — the pseudo-element stretched to that FULL scrollable
   height, not just one screen's worth. `background-size: cover` then
   had to fit the photo's normal 1920×1200 (landscape) aspect ratio into
   an extremely tall, narrow box, which forced a huge zoom and left only
   a ~15% sliver of the photo's width on screen — on a phone this reads
   as barely-recognizable texture, not the intended photo, exactly the
   "not properly visible" the client reported. Desktop/tablet never grow
   past ~1 viewport here (measured), so this never showed there. Capped
   to `height: 100vh` (was stretching via `inset:0`'s implicit height)
   so `cover` always sizes against a normal viewport-like box, however
   tall the page's actual content gets. Below that first 100vh the page
   shows through to `body`'s own `--color-page-bg` — but a flat height
   cutoff alone left a visible hard edge where the photo/wash layer
   stopped (screenshotted and confirmed), so a third gradient layer
   (listed first = painted on top of the wash + photo) fades this layer
   itself to `--color-page-bg` over its last 20%, blending it into the
   plain background below instead of ending in a hard line. */
.auth-screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 0;
  background-image:
    linear-gradient(to bottom, rgba(245, 243, 241, 0) 80%, #F5F3F1 100%),
    linear-gradient(rgba(255, 255, 255, 0.53), rgba(255, 255, 255, 0.53)),
    url('/assets/hero-background.jpg');
  background-size: cover;
  background-position: center 15%;
}

/* FIX (client-reported follow-up, 2026-09-25): the 100vh cap above fixed
   the "barely-recognizable sliver" bug (photo was stretching to the
   page's full scrollable height), but a capped box is still a landscape
   photo (1920×1200, aspect ~1.6) squeezed into a tall/narrow portrait box
   — `cover` still has to zoom in hard to fill that shape. At an exact
   375×812 phone viewport that only leaves ~29% of the photo's width
   visible (box aspect 0.46 ÷ photo aspect 1.6), which the client is still
   seeing as an overly tight, badly-composed crop (a single face/arm
   filling the frame) rather than a proper hero shot. Shortening the box
   on narrow screens moves its aspect ratio closer to the photo's own, so
   `cover` needs less zoom and shows proportionally more of the photo's
   width — at 58vh on a 375×812 phone this raises the visible width to
   ~50%, and higher still on shorter phone viewports (browser chrome
   collapsed, or a resized window like the one in the reported
   screenshot). Scoped to the same <=480px breakpoint this file already
   uses for other phone-only fixes below. */
@media (max-width: 480px) {
  .auth-screen::before {
    height: 58vh;
  }
}

.auth-header,
.auth-hero {
  position: relative;
  z-index: 1;
}

/* Top bar: logo left, "SECURE SIGN IN" label right — measured ~63px tall.
   NOTE: sampled pixels directly off the reference PNG show this bar as a
   flat, opaque cream with no photo texture behind it — I can't confirm
   "image visible through the header" from the image itself. Implementing
   it anyway per your note: the hero photo now runs a full page height
   (starts at y:0, behind the header) and the header is dropped to ~55%
   opacity so it blends into the photo instead of sitting on a hard edge. */
.auth-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 63px;
  padding: 0 48px;
  background: rgba(247, 243, 237, 0.55); /* TODO: exact hex/opacity not given — approximated */
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.auth-header__logo {
  height: 24px;
}

.auth-header__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-link-muted);
  text-transform: uppercase;
}

/* Positioning container only now — the photo itself lives on .auth-screen
   so it runs continuously behind the header too.
   FIX: card/signup used to be position:absolute with a fixed top offset
   measured for one specific viewport height. On any taller browser window
   that leftover height ALL landed below the card, doubling the bottom gap
   instead of the ~78px top / ~70px bottom split the reference actually
   has. Centering them with flexbox instead splits any extra space evenly
   top+bottom, at any viewport height, matching that near-symmetric ratio. */
.auth-hero {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  /* FIX: `justify-content: space-between` was pushing the signup panel all
     the way to the container's right edge, so the gap between the two
     panels grew with the viewport instead of staying fixed — 418px wide
     on a 1440px screen. The reference screenshot shows a constant ~168px
     gap between the sign-in card's right edge and the signup panel's left
     edge (measured directly off the image, normalized against the sign-in
     card's own known 535px width so the result doesn't depend on the
     screenshot's export scale). `flex-start` + a fixed gap keeps the
     sign-in card exactly where it was (still 80px from the left, per
     padding below) and puts the signup panel a constant 168px after it,
     matching the reference instead of stretching with window width. */
  justify-content: flex-start;
  gap: 168px;
  padding: 0 80px;
}

/* Sign-in card — translucent glass, measured directly off the reference:
   535 × 538px, corner radius ~23px, ~35% white over the washed photo
   (input fields stay solid #FFFFFF per the brand spec). Content column
   inside is measured at 28px from the card's left edge / 58px from its
   right edge (447px wide) — inputs, button and helper text all align to
   that column, not to the card's true center.
   FIX: this was a hard `height: 538px`. In the normal state the content
   (eyebrow → title → fields → helper text) already lands at ~538px, so
   it looked fine — but the moment an error message renders above the
   fields (e.g. "Email or password is incorrect."), that extra ~50px
   pushes the "One login connects..." helper text right down to the
   card's fixed bottom edge, swallowing the margin/padding that's
   supposed to sit under it — exactly the missing-space bug reported.
   `min-height` keeps the card at the same 538px in the normal case
   (nothing here changes what the reference shows) but lets it grow
   instead of clipping its own bottom padding whenever the content is
   taller than that. */
.auth-card {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 23px;
  box-shadow: 0 12px 32px -16px rgba(32, 32, 32, 0.12);
  padding: 32px 58px 20px 28px;
  width: 535px;
  min-height: 538px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.auth-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-eyebrow);
  margin: 0 0 46px; /* measured off the reference: ~56px glyph-to-glyph gap above the heading */
  text-transform: uppercase;
}

.auth-title {
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  margin: 0 0 37px; /* measured off the reference: ~47px glyph-to-glyph gap below the heading */
  line-height: 1.3;
}

.auth-field {
  margin-bottom: 31px; /* measured off the reference: ~40px gap between the email input and the password label */
}

.auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 10px; /* measured off the reference: ~18-22px gap between label and input */
}

.auth-field-input-wrap {
  position: relative;
}

.auth-field input {
  width: 100%;
  height: 47px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid #E3E0DD;
  border-radius: 15px;
  background: var(--color-panel-bg);
  color: var(--color-text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.auth-field input::placeholder {
  color: var(--color-placeholder);
}

.auth-field input:focus {
  border-color: var(--color-text);
}

.auth-field-input-wrap input {
  padding-right: 44px;
}

.auth-toggle-visibility {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-link-muted);
  display: flex;
  align-items: center;
  padding: 4px;
}

.auth-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 20px;
}

/* Google reCAPTCHA v2 checkbox — sits between the last field/checkbox
   row and the submit button on the sign-in, create-account and
   forgot-password forms. The widget renders its own fixed-size iframe
   (~304x78px), so this wrapper only needs to give it breathing room
   consistent with .auth-field's own rhythm; it renders nothing (0
   height) when the site key isn't configured. */
.auth-recaptcha {
  margin-bottom: 24px;
}
.auth-recaptcha:empty {
  margin-bottom: 0;
}

.auth-forgot {
  font-size: 13px;
  font-weight: 600; /* semi-bold, per client request */
  color: var(--color-placeholder);
}
.auth-forgot:hover {
  color: var(--color-text);
}

.auth-error {
  background: #FBEAEA;
  color: #9A3B3B;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Inline per-field status text — added for the Full Name
   duplicate-username check (client request, 2026-09-22). Reuses
   .auth-error's own text color for the "already exists" state so it
   reads as an error without introducing a new color. Empty/no text by
   default; only ever holds "Checking availability…" or the duplicate
   error, both set from views/auth/create-account.ejs's own script. */
.auth-field-hint {
  display: block;
  min-height: 16px;
  font-size: 12px;
  margin-top: 6px;
  color: var(--color-link-muted);
}

.auth-field-hint--error {
  color: #9A3B3B;
}

.auth-submit {
  width: 100%;
  height: 47px;
  /* FIX (mobile, 2026-09-26): forgot-password's .two-btn-row places this
     button directly as a flex item with flex:1, and switches to
     flex-direction:column under 560px (see forgot-password.css) — without
     a min-height floor, flex-basis:0% from that flex:1 wins over the
     height above during layout, collapsing the button down to its text's
     own line-height (~19px) instead of the intended 47px. min-height is a
     separate clamp flex-basis can't override, so it restores the floor
     without affecting this button's look on any other screen that
     doesn't use a column-direction flex row (signin, create-account,
     reset-password all render this full-width, unaffected). */
  min-height: 47px;
  box-sizing: border-box;
  padding: 0 16px;
  border: none;
  border-radius: 15px;
  background: var(--color-button);
  color: var(--color-button-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.auth-submit:hover {
  opacity: 0.9;
}

.auth-helper {
  text-align: center;
  margin-top: 26px;
  font-size: 12px;
  color: var(--color-link-muted);
  line-height: 1.4;
}

/* Signup panel, right side — same translucent glass treatment. Both this
   and .auth-card are centered by the hero's own align-items:center, so
   they share the same vertical center automatically, at any height. */
.auth-signup-card {
  flex-shrink: 0;
  min-width: 327px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: 0 12px 32px -16px rgba(32, 32, 32, 0.12);
  padding: 26px 34px;
  text-align: center;
}

.auth-signup-card p {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-link-muted);
}

/* Measured ~257 × 41px in the reference — same glass treatment as the
   two main panels, not a solid button */
.auth-signup-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 257px;
  height: 41px;
  box-sizing: border-box;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

/* Breakpoint raised from 960px: card(535) + signup(327) + hero gap(48) +
   hero padding(160) needs ~1070px minimum before they'd start touching —
   960px was inside that danger zone. 1140px gives real breathing room. */
/* Mobile/tablet: stacked column. justify-content:center (not flex-start)
   for the same reason as the desktop row — whatever slack space the
   viewport has beyond the content's own height should split evenly
   above and below the stack, not all pile up at the bottom. When content
   is taller than the screen (a short phone, or a keyboard open on a
   password field), centering simply has no extra space to distribute
   and the page scrolls normally from the top — nothing gets clipped. */
@media (max-width: 1140px) {
  .auth-hero {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    gap: 24px;
  }
  .auth-card {
    width: 100%;
    max-width: 480px;
    height: auto;
    /* FIX (client-reported, 2026-09-25 — see the max-height block below
       for the full story): the base `.auth-card` rule (sized for the
       fixed-width desktop card) carries `min-height: 538px`. `height:
       auto` here doesn't cancel that — a min-height keeps enforcing a
       538px floor even in the stacked mobile layout, padding the card
       with blank space well past what its own content needs and pushing
       everything below it (including the "Create an account" panel)
       down by however much of that 538px the actual content doesn't
       use. The card should just size to its content on mobile. */
    min-height: 0;
    padding: 32px 28px;
  }
  .auth-signup-card {
    text-align: center;
    width: 100%;
    max-width: 480px;
    min-width: 0;
  }
  .auth-signup-card a {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .auth-header {
    padding: 0 16px;
  }
  .auth-header__label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .auth-card {
    padding: 26px 18px;
  }
  .auth-eyebrow {
    margin-bottom: 28px;
  }
  .auth-title {
    font-size: 21px;
    margin-bottom: 26px;
  }
  .auth-field {
    margin-bottom: 20px;
  }
  /* 16px stops iOS Safari from auto-zooming the page when a field is focused */
  .auth-field input {
    font-size: 16px;
  }
  .auth-recaptcha {
    margin-bottom: 20px;
  }
}

/* FIX (client-reported, 2026-09-25): "Create an account button is not
   visible properly" on Sign In, at "100% screen". Reproduced: the stacked
   mobile layout (auth-card + auth-signup-card, one under the other) adds
   up to ~812px tall regardless of viewport height — that's taller than
   several genuinely common phones in portrait (iPhone SE 375×667, and any
   browser window with enough on-screen chrome to shrink the usable
   height), so the "Create an account" panel sits below the fold and
   needs a scroll to reach. Scrolling itself works fine (verified — the
   page isn't clipped, `.auth-screen`'s `overflow: hidden` only guards its
   own absolutely-positioned photo layer, not the document's normal flow),
   but the client's expectation is that this short, two-field form fits on
   one screen without scrolling, which is a reasonable bar for a login
   page specifically (unlike Create account below, which has three plan
   cards plus the same form and can't realistically fit one screen no
   matter how tight the spacing gets — confirmed still needs a scroll at
   every tested height, so left alone).
   This only tightens vertical spacing when the viewport itself is short
   (`max-height`), not just narrow — a short *landscape* window gets the
   same relief a short portrait phone does, and a tall narrow phone keeps
   the normal, more spacious spacing. Scoped to the same <=1140px stacked
   layout this spacing belongs to. Trimmed hero/card/signup-card padding,
   heading margins and field spacing throughout — shaves ~190px off the
   Sign In page's ~812px total, bringing it to ~624px, comfortably under
   the 667px iPhone SE height with room for real browser chrome. Forgot
   password / Reset password share this same `.auth-card`/`.auth-hero`
   markup, so they get the same relief for free. */
@media (max-width: 1140px) and (max-height: 700px) {
  .auth-hero {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 10px;
  }
  .auth-card {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .auth-eyebrow {
    margin-bottom: 12px;
  }
  .auth-title {
    margin-bottom: 12px;
  }
  .auth-field {
    margin-bottom: 10px;
  }
  .auth-field label {
    margin-bottom: 6px;
  }
  .auth-row {
    margin: -4px 0 10px;
  }
  .auth-recaptcha {
    margin-bottom: 10px;
  }
  .auth-helper {
    margin-top: 12px;
  }
  .auth-signup-card {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .auth-signup-card p {
    margin-bottom: 8px;
  }
}

@media (max-width: 340px) {
  .auth-header__label {
    display: none; /* "SECURE SIGN IN" no longer fits next to the logo below ~340px */
  }
}