/* ps-login-v1.0.0.css */
/* ============================================================
   ps-login-v1.0.0.css
   INBXIFY · Publisher Portal · the /portal-login page

   An inbxify surface, not a publisher one (we do not know the
   publisher until after login), so it wears ix-brand: --bx-*
   tokens only. Load AFTER ix-brand-v1.0.0.css.

   v1.0.0 (2 Nov 2026, Publisher Portal S2) — FIRST BUILD, from the
   approved mockup "Publisher Portal Login" (canvas).
   Every rule is scoped under .ps-login so nothing leaks into the
   Webflow page around the Embed.
   ============================================================ */

.ps-login {
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--bx-mist);
  color: var(--bx-text);
  font-family: var(--bx-font-body);
  -webkit-font-smoothing: antialiased;
}
.ps-login *, .ps-login *::before, .ps-login *::after { box-sizing: border-box; }

.ps-login-wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; }

/* header: wordmark left, family name right */
.ps-login-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--bx-border);
}
.ps-login-mark { font-family: 'Unbounded', var(--bx-font-display); font-weight: 600; font-size: 18px; letter-spacing: .01em; color: var(--bx-ink); }
.ps-login-family { font-size: 13px; color: var(--bx-text-mid); }

/* the column: title first, flush left */
.ps-login-main { max-width: 420px; padding: 88px 0 64px; }
.ps-login-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bx-accent-deep); }
.ps-login-title { margin: 0 0 12px; font-family: var(--bx-font-display); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--bx-text); }
.ps-login-lede { margin: 0 0 32px; font-size: 16px; line-height: 1.55; color: var(--bx-text); }
.ps-login-lede strong { font-weight: 600; }

.ps-login-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.ps-login-field { display: flex; flex-direction: column; gap: 8px; }
.ps-login-label { font-size: 14px; font-weight: 500; color: var(--bx-text); }
.ps-login-input {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--bx-text);
  background: var(--bx-surface); border: 1px solid var(--bx-idle); border-radius: var(--bx-radius-sm);
  transition: border-color var(--bx-ease), box-shadow var(--bx-ease);
}
.ps-login-input:focus { outline: none; border-color: var(--bx-blue-deep); box-shadow: var(--bx-shadow-blue); }
.ps-login-input--code { max-width: 220px; font-size: 22px; letter-spacing: .4em; }
.ps-login-input[aria-invalid="true"] { border: 2px solid var(--bx-danger); }
.ps-login-error { margin: 0; font-size: 14px; line-height: 1.5; color: var(--bx-danger); }
.ps-login-error:empty { display: none; }
.ps-login-error a { color: var(--bx-danger); font-weight: 600; }

/* the button, with a moving bar while a request runs */
.ps-login-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 180px; height: 48px; padding: 0 28px;
  font: inherit; font-size: 16px; font-weight: 600; color: #FFFFFF;
  background: var(--bx-blue-deep); border: 0; border-radius: var(--bx-radius-sm); cursor: pointer;
}
.ps-login-btn:hover { background: var(--bx-ink-mid); }
.ps-login-btn:focus-visible { outline: none; box-shadow: var(--bx-shadow-blue); }
.ps-login-btn[aria-busy="true"] { cursor: progress; }
.ps-login-btn[aria-busy="true"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 40%;
  background: var(--bx-blue-lift); animation: ps-login-run 1s ease-in-out infinite;
}
@keyframes ps-login-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .ps-login-btn[aria-busy="true"]::after { animation: none; width: 100%; opacity: .6; } }

.ps-login-help { margin: 24px 0 0; font-size: 14px; line-height: 1.6; color: var(--bx-text); }
.ps-login a { color: var(--bx-blue-deep); }
.ps-login a:hover { color: var(--bx-ink); }
.ps-login-linkbtn { padding: 0; font: inherit; color: var(--bx-blue-deep); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.ps-login-linkbtn:hover { color: var(--bx-ink); }
.ps-login-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--bx-ok); }
.ps-login-note:empty { display: none; }
.ps-login-foot { margin: 40px 0 0; font-size: 13px; line-height: 1.5; color: var(--bx-text-mid); }
.ps-login [hidden] { display: none !important; }

@media (max-width: 600px) {
  .ps-login-wrap { padding: 0 24px; }
  .ps-login-main { padding: 48px 0 40px; }
  .ps-login-title { font-size: 32px; }
}