/* ==========================================================================
   Opria — the sign-in picker (belepes.html, en/sign-in.html)

   Every tenant signs in on their own subdomain, so there is no single login
   URL to link to. This page is the one thing the landing site can offer: ask
   which workshop, then hand the browser over to that workshop's own host.

   Loaded after tokens.css + base.css — nothing here redefines a token, and the
   brand, .btn, .lang and focus primitives all come from base.css.
   ========================================================================== */

.auth {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 32px;
  padding-block: 22px 28px;
  /* A single soft pool of light behind the card. No photography here: the
     page is a door, not a pitch. */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(46, 107, 230, .10), transparent 62%),
    var(--bg);
}

.auth__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.auth__main {
  display: grid;
  place-items: center;
  /* Optical centering: a card sitting exactly mid-height reads as low. */
  padding-block: clamp(16px, 5vw, 56px) clamp(40px, 10vw, 104px);
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.auth__card {
  width: 100%;
  max-width: 424px;
  display: grid;
  gap: 26px;
  padding: clamp(28px, 6vw, 40px);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Two hairlines: a lit top edge, then depth under the whole plate. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 24px 64px -24px rgba(0, 0, 0, .9);
}

.auth__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.auth__mark { width: 40px; height: 40px; }
.auth__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.auth__sub {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   The address field: one input wearing a fixed suffix
   -------------------------------------------------------------------------- */

.auth__form { display: grid; gap: 18px; }

.field { display: grid; gap: 9px; }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The wrapper is what looks like the input; the <input> itself is bare so the
   suffix can sit inside the same box and never scroll away from the value. */
.combo {
  display: flex;
  align-items: stretch;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.combo:hover { border-color: var(--line-strong); }
.combo:focus-within {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.combo__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 4px 13px 14px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
  background: none;
  border: 0;
}
/* The ring lives on .combo so it can wrap the suffix too. */
.combo__input:focus,
.combo__input:focus-visible { outline: none; }
.combo__input::placeholder { color: var(--text-faint); font-weight: 400; }
/* Chrome's autofill wash would repaint the field white. */
.combo__input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px var(--surface-sunk) inset;
}

.combo__suffix {
  display: flex;
  align-items: center;
  padding-inline: 14px 15px;
  font-family: var(--font-mono);
  font-size: .9375rem;
  letter-spacing: -.01em;
  color: var(--text-faint);
  white-space: nowrap;
  user-select: none;
}

.field__hint {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-faint);
}

.auth__form .btn { width: 100%; justify-content: center; }

/* Empty submit: no navigation, just a nudge back to the field. */
.combo.is-nudged { border-color: var(--line-strong); animation: auth-nudge .42s var(--ease-io); }

@keyframes auth-nudge {
  0%, 100% { transform: translateX(0); }
  18%      { transform: translateX(-6px); }
  42%      { transform: translateX(5px); }
  68%      { transform: translateX(-3px); }
  86%      { transform: translateX(2px); }
}

/* --------------------------------------------------------------------------
   The operator's way out
   -------------------------------------------------------------------------- */

.auth__alt {
  padding-top: 22px;
  border-top: 1px solid var(--line-faint);
  text-align: center;
  font-size: .875rem;
  color: var(--text-faint);
}
.auth__alt a {
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.auth__alt a:hover { color: var(--text); border-bottom-color: var(--accent-line); }

/* --------------------------------------------------------------------------
   Footer line
   -------------------------------------------------------------------------- */

.auth__base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.auth__base a { transition: color .25s var(--ease-out); }
.auth__base a:hover { color: var(--text-dim); }

@media (max-width: 420px) {
  .auth__base { justify-content: center; text-align: center; }
}