/* =====================================================================
   Sign in. Two columns: the form on the left, a photo panel on the
   right. Values from design/login.html, which is a React bundle — the
   markup is rebuilt in Alpine per UI_HANDOFF.md §0, matching its
   inline styles.
   ===================================================================== */

.auth{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:720px}

/* ---------- Form column ---------- */
.auth .form-col{display:flex;align-items:center;justify-content:flex-end;padding:56px 72px 72px 48px}
.auth form{width:100%;max-width:440px;display:flex;flex-direction:column;gap:22px}
.auth .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.auth h1{margin:8px 0 0;font-size:44px;line-height:1;letter-spacing:-.03em;font-weight:800}
.auth .lede{margin:14px 0 0;font-size:16px;line-height:1.55;color:#475569;text-wrap:pretty}

.auth .banner{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.45}
.auth .banner i{flex:none;width:18px;height:18px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;font-style:normal}
.auth .banner.err{background:#FEF2F2;color:#991B1B}
.auth .banner.err i{background:#DC2626}
.auth .banner.info{background:var(--blue-10);color:var(--navy)}
.auth .banner.info i{background:var(--blue)}
.auth .banner.ok{background:var(--green-10);color:#065F46}
.auth .banner.ok i{background:var(--green)}

.auth .fields{display:flex;flex-direction:column;gap:8px}
.auth label.f{display:block;background:var(--bg);border-radius:12px;padding:12px 16px;border:1.5px solid transparent;position:relative}
.auth label.f:focus-within{border-color:var(--blue)}
.auth label.f > span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.auth label.f input{width:100%;border:0;background:none;font:inherit;font-size:16px;font-weight:700;margin-top:3px;color:var(--ink);outline:0;padding:0;min-height:24px}
/* Room for the eye, which is round and 40px wide. It used to read
   "Show"/"Hide" and needed 70. */
.auth label.f.has-toggle input{padding-right:48px}
/* Anchored to the input's line, not the field's centre.
   12px of padding + the caption + half a 24px input puts the input's
   middle 41px down, and it stays there whether or not the strength bar
   is showing underneath. Centring on the field meant the button drifted
   down over the bar as soon as somebody typed — and sat 7px high even
   before that. */
.auth .pw-toggle{position:absolute;right:8px;top:41px;transform:translateY(-50%);
  border:0;background:#fff;color:var(--mute);padding:0;
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:999px;cursor:pointer;box-shadow:0 1px 3px rgba(15,31,74,.1)}

/* The hover MUST restate translateY(-50%).
   mesteel.css lifts every button by 1px on hover —
   `button:not(:disabled):hover{transform:translateY(-1px)}` — and
   transform is one property, not two, so that rule replaced the
   centring instead of adding to it. The button dropped about 19px the
   moment the pointer touched it, then sprang back. Any absolutely
   centred button in this codebase has to reassert its own transform
   here, or inherit the same bug. */
.auth .pw-toggle:hover,
.auth .pw-toggle:focus-visible{transform:translateY(-50%);
  background:var(--blue-10);color:var(--blue)}
.auth .pw-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.auth .pw-toggle svg{display:block}
/* Field-level validation, so the message sits with the input it blames. */
.auth label.f.bad{border-color:var(--error, #DC2626)}
.auth .field-err{font-size:12.5px;font-weight:600;color:#B91C1C;padding:2px 4px}

.auth .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:#334155}
.auth .row label{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:44px}
.auth .row input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue);margin:0}
.auth .row a{font-weight:700;display:inline-flex;align-items:center;min-height:44px}

.auth .submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font-weight:800;font-size:15px;border-radius:999px;padding:14px 18px;min-height:52px;cursor:pointer;border:0;font-family:inherit;background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(31,63,143,.3)}
.auth .submit:hover:not(:disabled){background:var(--navy)}
.auth .submit:disabled{opacity:.7;cursor:progress}
.auth .spinner{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.auth .sep{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.auth .sep span.line{flex:1;height:1px;background:var(--line)}

.auth .plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth .plans a{border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);color:inherit;background:#fff;min-height:44px}
.auth .plans a:hover{border-color:var(--blue);transform:none}
.auth .plans .t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.auth .plans b{font-size:14px}
.auth .plans .price{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;white-space:nowrap}
.auth .plans .price.full{color:var(--blue);background:var(--blue-10)}
.auth .plans .price.brief{color:var(--mute);background:#F1F5F9}
.auth .plans .d{font-size:12.5px;color:var(--mute);margin-top:4px;line-height:1.4}

/* Password rules for the set-a-new-password step. */
.auth .rules{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mute)}
.auth .rules div{display:flex;gap:8px;align-items:center}
.auth .rules i{width:16px;height:16px;border-radius:50%;background:#E2E8F0;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;font-style:normal;flex:none}
.auth .rules div.met{color:var(--green)}
.auth .rules div.met i{background:var(--green)}

/* ---------- Visual column ---------- */
.auth .visual{position:relative;overflow:hidden;background:url(../img/hero-warehouse.jpg) center/cover}
.auth .visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.55) 30%,rgba(255,255,255,.15) 100%)}
.auth .visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(255,255,255,.9) 100%)}
.auth .visual-text{position:absolute;left:48px;right:72px;bottom:64px;display:flex;flex-direction:column;gap:18px;z-index:1}
.auth .panel{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;border-radius:22px;padding:24px 26px;box-shadow:0 12px 40px rgba(15,31,74,.18);max-width:520px}
.auth .panel p{margin:0;font-size:18px;line-height:1.5;font-weight:600;letter-spacing:-.01em;text-wrap:pretty}
.auth .panel .stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.auth .panel .stats div{font-size:13.5px;line-height:1.35;color:#B8C4E6}
.auth .panel .stats b{display:block;font-size:22px;color:#fff;letter-spacing:-.02em}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth .form-col{padding:40px 24px 48px;justify-content:center}
  .auth .visual{min-height:420px}
  .auth .visual-text{left:24px;right:24px;bottom:32px}
}
@media (max-width:639px){
  .auth .form-col{padding:32px 16px 40px}
  .auth h1{font-size:36px}
  .auth .plans{grid-template-columns:1fr}
  .auth .visual{min-height:360px}
  .auth .visual-text{left:16px;right:16px;bottom:24px}
  .auth .panel{padding:20px}
  .auth .panel p{font-size:16px}
}