/* ============================================================
   SIGN IN — one card on an open page
   ============================================================ */

.login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s5) var(--s4);
}
.login__slipwrap { width: min(400px, 100%); }

.login__slip {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-2);
  overflow: hidden;
  /* The card rises into place. Deliberately transform and opacity only: an
     entrance animation must never be what makes an element visible or
     clickable, because anything that stops it running (a stalled frame, a
     throttled tab) then leaves the form unusable rather than unpretty. */
  animation: slip-print 380ms var(--ease);
}
@keyframes slip-print {
  from { transform: translateY(10px) scale(.985); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.login__body { padding: var(--s5) var(--s5) var(--s4); }

.login__head { text-align: center; }
.login__mark { display: inline-block; }
.login__title {
  margin-top: var(--s3);
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: var(--track-hero);
}
.login__store {
  font-size: var(--t-small);
  color: var(--text-2);
  margin-top: 2px;
}
.login__strap {
  font-size: var(--t-small);
  color: var(--text-3);
  margin-top: var(--s1);
}

.login__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-micro);
  color: var(--text-3);
}

.login form { margin-top: var(--s4); }

.login .field { position: relative; }
.login .input { min-height: 52px; font-size: var(--t-body); }

.pw-toggle {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.pw-toggle:hover { color: var(--text); background: var(--fill); }

.login .btn--key { width: 100%; min-height: 56px; font-size: var(--t-body); margin-top: var(--s2); }

/* The rejection pill sits over the card. It is the error message, and it is
   also announced to screen readers by the live region beside it. */
.void-stamp {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--lift-2);
  pointer-events: none;
  animation: stamp-down 260ms var(--ease);
}
/* The pill is mirrored in Arabic, so the centring is `translate` and the
   entrance animates `scale` alone: a transform in the keyframe would carry the
   LTR offset with it and slide the pill across the card for 260ms before
   landing. */
:dir(rtl) .void-stamp { translate: 50% -50%; }
/* The pill says what happened, so accepting one is a different colour and
   not a different element. This used to be an inline style carried over
   from the outlined rubber stamp, which painted green text onto the solid
   red ground the pill now has. */
.void-stamp--ok { background: var(--green); }
@keyframes stamp-down {
  from { opacity: 0; scale: .9; }
  to   { opacity: 1; scale: 1; }
}

/* The wrapper exists only to hang the stamp off; it must never sit between a
   finger and the form. Without this it covers the slip and swallows the click
   on SIGN IN — which looks exactly like a broken password. */
.login__slipwrap { position: relative; pointer-events: none; }
.login__slip { pointer-events: auto; }

/* Accepted: the card steps back as the counter loads. */
.login__slip--accepted { animation: tear-off 420ms var(--ease) forwards; }

@keyframes tear-off {
  to { transform: translateY(-16px) scale(.98); opacity: 0; }
}

.login__foot {
  padding: 0 var(--s5) var(--s5);
  text-align: center;
}
.login__note { font-size: var(--t-micro); color: var(--text-3); }
.login__note + .login__note { margin-top: var(--s1); }
.login__link { color: inherit; text-underline-offset: 2px; }
.login__link:hover,
.login__link:focus-visible { color: var(--accent); }

.login__lang { display: flex; justify-content: center; }

/* ── Connect to your back office (connect.html), the same card ── */
.connect__title { font-size: var(--t-lead); }
.connect__lead { max-width: 34ch; margin-inline: auto; }
.connect__said { margin-top: var(--s4); display: grid; gap: var(--s2); }
.connect__said p { font-size: var(--t-small); color: var(--text-2); }
.connect__said .connect__done { font-size: var(--t-body); color: var(--text); font-weight: 600; }
/* How the link stands, for the owner: a few ruled lines, the values in the
   reading order of their address (left to right in Arabic too). */
.connect__status { margin: var(--s4) 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); font-size: var(--t-small); }
.connect__status dt { color: var(--text-3); }
.connect__status dd { margin: 0; overflow-wrap: anywhere; }
.connect__again { margin-top: var(--s5); font-size: var(--t-body); font-weight: 600; }
.login .connect__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.login__body .hint { font-size: var(--t-micro); color: var(--text-3); margin-top: 4px; }
.connect__link { display: block; text-align: center; margin-top: var(--s3); font-size: var(--t-small); }

@media (max-width: 420px) {
  .login__body { padding: var(--s4); }
  .login__foot { padding: 0 var(--s4) var(--s4); }
}