/**
 * Login surface.
 *
 * Only the login column lives here. The header, the drawer, the motion rules
 * and the colour tokens all come from onboarding.css, so the two screens stay
 * one surface rather than two that merely resemble each other.
 *
 * No card, no shadow around the form: the page is the surface. The form sits
 * directly on the canvas, which is what keeps it from reading as a boxed SaaS
 * login.
 */

/* Narrower and a little tighter than the first pass, which read as
   form-heavy. The generous gutters stay - the density comes out of the field
   sizing, not out of the whitespace around the column. */
.lg-canvas {
  width: 100%;
  max-width: 530px;
  margin: 0 auto;
  padding-top: 64px;
}

.lg-login { text-align: center; }

/* ---------- customer identity ---------- */

/*
 * The gap to the form. 30px measured, but it read as more: the name sat on a
 * 1.45 line box and could run to two lines, so the identity floated instead of
 * introducing the form under it. Tightened here and in the name below - the
 * composition matters more than the number.
 */
.lg-identity { margin-bottom: 26px; }

/*
 * The tenant's logo, on the auth canvas directly.
 *
 * No plate, no card, no border and no shadow: a frame around a customer's mark
 * reads as a container the design does not otherwise have, and it made small
 * logos look mounted rather than placed. Nothing gives the image a background
 * either - a white ground behind a transparent logo would show as a rectangle
 * on the grey canvas, which is the thing a frame was supposed to avoid.
 *
 * BOUNDED, NOT SIZED. max-* only ever shrinks: a 600x120 wordmark comes down to
 * 200x40, while a 96x96 mark is left at 96x96 rather than stretched to fill a
 * box it was never drawn for. contain keeps the ratio in every case, so no
 * shape is squashed or cropped.
 */
.lg-identity__logo {
  display: block;
  max-width: 200px;
  max-height: 56px;
  width: auto;
  height: auto;
  margin: 0 auto 10px;
  object-fit: contain;
}

/*
 * Secondary identity. The logo carries the brand, so the name says which
 * workspace this is rather than competing for the same job - small and regular,
 * a shade more legible than the muted token was without becoming a headline.
 *
 * ONE LINE. It used to clamp at two, which meant the block's height changed
 * with the tenant and a long name pushed the form down. A single line with an
 * ellipsis keeps the composition identical for every customer, and the full
 * name stays in the title attribute for anyone who needs it. Never scaled to
 * fit: type that shrinks with the length of a string makes every tenant's
 * screen a slightly different design, and the registry's own casing is printed
 * exactly as it stands.
 */
.lg-identity__company {
  display: block;
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--onb-ink-soft);
  letter-spacing: 0;
}

/*
 * Without a logo the name is the identity, not a caption, so it takes back the
 * weight it had when it stood alone.
 */
.lg-identity:not(:has(.lg-identity__logo)) .lg-identity__company {
  font-size: 17px;
  font-weight: 500;
  color: var(--onb-ink-soft);
  letter-spacing: -0.01em;
}

/* ---------- alerts ---------- */

.lg-alert {
  margin: 0 0 20px;
  padding: 12px 15px;
  border-radius: 11px;
  font-size: 14px;
  text-align: left;
}

.lg-alert--err { background: #fdeeee; color: #a12a2a; }
.lg-alert--ok  { background: #eaf6ef; color: #16704a; }

/* ---------- form ---------- */

.lg-form { text-align: left; }

.lg-field { margin-bottom: 14px; }

.lg-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--onb-ink);
}

.lg-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--onb-surface);
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  transition: border-color 160ms var(--onb-ease), box-shadow 160ms var(--onb-ease);
}

.lg-input:focus-within {
  border-color: var(--onb-blue);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.10);
}

.lg-input__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: var(--onb-muted);
}

.lg-input__icon svg { width: 18px; height: 18px; display: block; }

.lg-input input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 10px 0 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  color: var(--onb-ink);
  outline: none;
}

.lg-input input::placeholder { color: #a4b0c2; }

.lg-input__reveal {
  flex: none;
  width: 40px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--onb-muted);
  cursor: pointer;
  border-radius: 0 10px 10px 0;
  transition: color 160ms var(--onb-ease);
}

.lg-input__reveal:hover { color: var(--onb-ink-soft); }
.lg-input__reveal svg { width: 18px; height: 18px; display: block; }

/* One button, two glyphs: the state is the icon, so nothing has to be
   re-rendered when it flips.
   Scoped under .lg-input__reveal so these beat the `.lg-input__reveal svg`
   rule above - a bare `.lg-eye--hide` loses to it on specificity and both
   glyphs end up visible at once. */
.lg-input__reveal .lg-eye--hide { display: none; }
.lg-input__reveal[aria-pressed='true'] .lg-eye--show { display: none; }
.lg-input__reveal[aria-pressed='true'] .lg-eye--hide { display: block; }

/* ---------- remember ---------- */

.lg-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--onb-ink-soft);
}

/* The real control stays in the accessibility tree and keeps keyboard
   behaviour; only its rendering is replaced. */
.lg-remember__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.lg-remember__box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cdd6e3;
  border-radius: 5px;
  background: var(--onb-surface);
  color: #fff;
  transition: background-color 140ms var(--onb-ease), border-color 140ms var(--onb-ease);
}

.lg-remember__box svg { width: 12px; height: 12px; display: block; opacity: 0; }

.lg-remember__input:checked + .lg-remember__box {
  background: var(--onb-blue);
  border-color: var(--onb-blue);
}

.lg-remember__input:checked + .lg-remember__box svg { opacity: 1; }

.lg-remember__input:focus-visible + .lg-remember__box {
  outline: 2px solid var(--onb-blue);
  outline-offset: 2px;
}

/* ---------- primary action ---------- */

.lg-submit {
  width: 100%;
  height: 49px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--onb-navy);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--onb-ease), transform 160ms var(--onb-ease);
}

.lg-submit:hover { background: #0d1c4a; }
.lg-submit:active { transform: translateY(1px); }
.lg-submit svg { width: 17px; height: 17px; }

/* ---------- switch tenant ---------- */

.lg-or {
  position: relative;
  margin: 26px 0 20px;
  text-align: center;
}

.lg-or::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--onb-border);
}

.lg-or span {
  position: relative;
  padding: 0 14px;
  background: var(--onb-canvas);
  font-size: 14px;
  color: var(--onb-muted);
}

.lg-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--onb-blue);
  text-decoration: none;
}

.lg-switch:hover { text-decoration: underline; }
.lg-switch svg { width: 17px; height: 17px; }

/* ---------- reassurance / legal ---------- */

/* Block-level flex, not inline-flex: as an inline box it would sit on the same
   line as the switch link that precedes it. */
.lg-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 38px 0 0;
  font-size: 14px;
  color: var(--onb-muted);
}

.lg-secure svg { width: 18px; height: 18px; display: block; }

.lg-legal {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--onb-muted);
}

.lg-legal a { color: var(--onb-blue); text-decoration: none; }
.lg-legal a:hover { text-decoration: underline; }
.lg-legal__sep { margin: 0 10px; color: #ccd5e2; }

.lg-copy {
  margin: 26px 0 0;
  padding-bottom: 40px;
  font-size: 13px;
  color: #9aa7b8;
}

/* ---------- focus ---------- */

.lg-submit:focus-visible,
.lg-switch:focus-visible,
.lg-input__reveal:focus-visible,
.lg-legal a:focus-visible {
  outline: 2px solid var(--onb-blue);
  outline-offset: 3px;
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .lg-canvas { padding-top: 42px; }
  .lg-identity { margin-bottom: 24px; }
  /* The plate scales with the viewport rather than overflowing it; the logo's
     own bounds come down with it so the padding stays proportional. */
  .lg-identity__logo { max-width: min(176px, 62vw); max-height: 46px; margin-bottom: 9px; }
  .lg-identity__company { max-width: min(300px, 84vw); font-size: 13.5px; }
  .lg-identity:not(:has(.lg-identity__logo)) .lg-identity__company { font-size: 16px; }
  .lg-input input { height: 45px; font-size: 14.5px; }
  .lg-input__icon { width: 38px; }
  .lg-input__reveal { width: 38px; height: 45px; }
  .lg-submit { height: 47px; margin-top: 16px; }
  .lg-secure { margin-top: 34px; }
  .lg-legal { font-size: 13.5px; }
  .lg-legal__sep { margin: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-input,
  .lg-submit,
  .lg-input__reveal,
  .lg-remember__box { transition: none !important; }
  .lg-submit:active { transform: none; }
}