/* ==========================================================================
   Clae Pest Control — login.css (owned by task 11)

   The /login and /login/code split panel: a night-olive column on the left
   carrying the mark and a line of copy, the sign-in form on bone on the
   right — "the light mark on the login panel's dark side" from the
   follow-up brief, replacing the old heading-and-form-in-standard-chrome
   page. Only used by layouts/login.html.erb, which SessionsController
   swaps in for #new and #code alone; every other action redirects and
   never renders, so the rest of the app is untouched.

   Class vocabulary is its own, prefixed .login-split — deliberately not
   sharing names with landing/dist/login's own CSS. Same shape (this file
   mirrors landing/dist/assets/login-*.css's .shell/.panel-ink/.panel-form),
   but two codebases; reusing its class names would be a trap later if
   either one changes independently. Everything else on the page — the
   form, the fields, the buttons, the banner — is reused straight from
   base.css, unchanged.
   ========================================================================== */

.login-split {
  display: grid;
  grid-template-columns: 44% 1fr;
  min-height: 100dvh;
}

/* -----------------------------------------------------------------------
   The dark column
   ----------------------------------------------------------------------- */

.login-split__dark {
  position: relative;
  overflow: hidden;
  background: var(--clae-night);
  color: var(--clae-paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--clae-gap-xl);
  padding: 56px 48px;
}
/* Keep the brand link, copy and footer above the faint mark behind them. */
.login-split__dark > * { position: relative; z-index: 1; }

.login-split__dark .brand__mark { color: var(--clae-paper); }

.login-split__copy { max-width: 360px; }
.login-split__copy .eyebrow { color: rgb(var(--clae-paper-rgb) / 0.62); }
.login-split__line {
  font: 400 28px / 1.28 var(--clae-font-sans);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.login-split__sub {
  font-size: 15px;
  color: rgb(var(--clae-paper-rgb) / 0.62);
  max-width: 320px;
  margin: 0;
}

/* Task E — two quiet links under the night-side copy: the house tour and
   the pitch deck, the second visually receding behind the first. */
.login-split__links { display: flex; gap: 18px; margin: 14px 0 0; font: 500 13px / 1 var(--clae-font-mono); }
.login-split__links a { text-decoration: underline; text-underline-offset: 3px; }
.login-split__links a.is-quiet { color: rgb(var(--clae-paper-rgb) / 0.5); text-decoration: none; }

.login-split__footer {
  font: 500 13px / 1 var(--clae-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.login-split__footer a { color: rgb(var(--clae-paper-rgb) / 0.78); }
.login-split__footer a:hover { color: var(--clae-paper); }

/* The four-limb mark, large and quiet in the corner (amendment rule 4: the
   mark does the work on dark). A background-color block masked by the
   mark's own silhouette — Propshaft rewrites this relative url() to the
   fingerprinted asset path, same file shared/_mark.html.erb inlines
   elsewhere for the small, solid, currentColor nav mark. */
.login-split__mark {
  position: absolute;
  z-index: 0;
  right: clamp(-40px, -4vw, 0px);
  bottom: clamp(-40px, -4vw, 0px);
  width: clamp(220px, 28vw, 380px);
  aspect-ratio: 1 / 1;
  opacity: 0.16;
  background-color: var(--clae-paper);
  -webkit-mask: url("/assets/clae-mark-986c8060.svg") no-repeat center / contain;
  mask: url("/assets/clae-mark-986c8060.svg") no-repeat center / contain;
  pointer-events: none;
  user-select: none;
}

/* -----------------------------------------------------------------------
   The form column
   ----------------------------------------------------------------------- */

.login-split__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--clae-paper);
}

.login-split__col { width: 100%; max-width: 400px; }

/* Task E — the demo's path, above the sign-in form; .stack's own gap gives
   it room below without an extra margin rule here. */
.login-breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; font: 400 12px / 1 var(--clae-font-mono); letter-spacing: 0.04em; color: var(--clae-stone); }
.login-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.login-breadcrumb a:hover, .login-breadcrumb__current { color: var(--clae-ink); }

/* -----------------------------------------------------------------------
   Responsive — one column under 900px; the dark side collapses to a
   header strip and gives up its copy and footer rather than push the form
   below the fold.
   ----------------------------------------------------------------------- */

@media (max-width: 900px) {
  .login-split {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100dvh;
  }
  .login-split__dark {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 120px;
    min-height: 120px;
    padding: 0 24px;
    gap: 0;
  }
  .login-split__copy,
  .login-split__footer { display: none; }
  .login-split__form { padding: 32px 20px 40px; }
}