/* ==================================================================
   Sign in -- WAIO-61
   Shared by the sign in page (welcome.html) and the password reset
   page (reset_password.html), so the two stay one design.
   Rebuilt on the waio-ui tokens. Previously this screen pulled the
   Tailwind JIT CDN at runtime just to lay out one card, which meant
   the login page -- the one page every store hits first, sometimes on
   a flaky connection -- could not render its own form without a
   third-party round trip. Everything below is local.
   ================================================================== */
/* .welcome-page #page-content is hard-coded to width:800px with no
   responsive fallback (styles/src/screen/layouts/_welcome.scss), and
   body.welcome-page forces a flat white background. Both are undone
   here so the card can own the full viewport and centre itself. */
body.welcome-page {
  min-height: 100vh;
  margin: 0;
  background: var(--waio-ground) !important;
  font-family: var(--waio-font);
}

.welcome-page #page-content,
.welcome-page #page-content-wrapped {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.waio-auth {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--waio-s-6) var(--waio-s-4);
  /* A single soft wash of the portal blue behind the card, so the
     page reads as branded without competing with the form. */
  background: radial-gradient(900px 480px at 50% -8%, rgba(100, 151, 255, 0.16), transparent 70%), radial-gradient(620px 380px at 92% 102%, rgba(100, 151, 255, 0.1), transparent 70%);
}

.waio-auth * {
  box-sizing: border-box;
}

.waio-auth-card {
  width: 100%;
  max-width: 424px;
  padding: var(--waio-s-6) var(--waio-s-6) var(--waio-s-5);
  border: 1px solid var(--waio-line);
  border-radius: var(--waio-r-lg);
  background: var(--waio-surface);
  box-shadow: var(--waio-shadow-3);
}

.waio-auth-brand {
  margin-bottom: var(--waio-s-5);
  text-align: center;
}

/* The logo is store-configurable (system.custom_logo_path), so it can
   arrive at any aspect ratio -- bound the height, never the width. */
.waio-auth-brand img {
  display: inline-block;
  width: auto;
  max-width: 210px;
  height: auto;
  max-height: 58px;
}

.waio-auth-title {
  margin: 0 0 6px;
  color: var(--waio-ink);
  font-family: var(--waio-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
}

.waio-auth-sub {
  margin: 0 0 var(--waio-s-5);
  color: var(--waio-muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.waio-auth-form {
  margin: 0;
}

/* ---- error banner ---- */
/* js/src/forms.js writes the failed-login messages into .errors as a
   <ul class="errorlist">, so :empty is all that is needed to keep the
   banner out of the layout until there is something to say. The div is
   emitted with no whitespace inside it for exactly that reason. */
.waio-auth-errors:empty {
  display: none;
}

.waio-auth-errors {
  margin-bottom: var(--waio-s-4);
}

/* screen/_forms.scss styles `form .errors .errorlist` with a red 1px
   border, a 3em left inset and the i/cancel_16.png sprite, which drew
   a second box inside this one. Three classes outrank it, so the list
   itself becomes the banner rather than sitting in one. */
.waio-auth .waio-auth-errors .errorlist {
  margin: 0;
  padding: 11px var(--waio-s-3) 11px 38px;
  border: 1px solid var(--waio-danger-line);
  border-radius: var(--waio-r-sm);
  /* Inline so the banner has no second request to make. */
  background: var(--waio-danger-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.6v5'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E") no-repeat 13px 12px;
  color: var(--waio-danger);
  font-size: 13px;
  line-height: 1.45;
  list-style: none;
}

.waio-auth .waio-auth-errors .errorlist li {
  margin: 0;
}

/* ---- fields ---- */
.waio-auth-field {
  margin-bottom: var(--waio-s-4);
}

.waio-auth-label {
  display: block;
  margin: 0 0 6px;
  color: var(--waio-ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

/* Wrapper is unstyled on purpose: it only anchors the icons. A field
   error list injected after the input still flows below it. */
/* The field height is set as --waio-control-h, not as a plain height,
   because waio-ui/_field-adopt.scss gives every .waio-forms text input
   height: var(--waio-control-h, 36px) with a selector that outranks
   the one below. Redefining the token here is the escape hatch that
   rule documents; the icons are placed from the same value, so they
   stay centred whatever the height ends up being. */
.waio-auth-input {
  --waio-control-h: 44px;
  position: relative;
  display: block;
}

.waio-auth-input > input {
  display: block;
  width: 100%;
  height: var(--waio-control-h);
  margin: 0;
  padding: 0 44px 0 42px;
  border: 1px solid var(--waio-line-strong);
  border-radius: var(--waio-r-sm);
  background: var(--waio-surface);
  color: var(--waio-ink);
  font-family: var(--waio-font);
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  line-height: normal;
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.waio-auth-input > input::placeholder {
  color: var(--waio-muted);
}

.waio-auth-input > input:focus,
.waio-auth-input > input:focus:required:invalid {
  outline: none;
  border-color: var(--waio-accent);
  box-shadow: 0 0 0 3px rgba(69, 112, 198, 0.18);
  color: var(--waio-ink);
}

/* Chrome paints autofilled inputs with its own pale blue fill, which
   is what made the two fields read as one solid block before. */
.waio-auth-input > input:-webkit-autofill,
.waio-auth-input > input:-webkit-autofill:hover,
.waio-auth-input > input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--waio-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--waio-surface) inset;
  box-shadow: 0 0 0 1000px var(--waio-surface) inset;
}

/* Icons are pinned to the input's height, not centred on the wrapper:
   forms.js injects a field's error list inside the wrapper, after the
   input, and a 50% offset then slid the icons down onto the error. */
.waio-auth-icon {
  position: absolute;
  top: calc((var(--waio-control-h) - 16px) / 2);
  left: 14px;
  margin-top: 0;
  color: var(--waio-muted);
  pointer-events: none;
}

.waio-auth-reveal {
  position: absolute;
  top: calc((var(--waio-control-h) - 32px) / 2);
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--waio-r-sm);
  background: transparent;
  color: var(--waio-muted);
  cursor: pointer;
}

.waio-auth-reveal:hover {
  background: var(--waio-hover-surface);
  color: var(--waio-ink-2);
}

.waio-auth-reveal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 112, 198, 0.18);
}

.waio-auth-reveal .waio-auth-eye-off {
  display: none;
}

.waio-auth-reveal.is-shown .waio-auth-eye-off {
  display: block;
}

.waio-auth-reveal.is-shown .waio-auth-eye-on {
  display: none;
}

/* Per-field errors are injected straight after the input. */
.waio-auth-field .errorlist {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--waio-danger);
  font-size: 12.5px;
  line-height: 1.4;
}

/* ---- remember me / forgot password ---- */
.waio-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--waio-s-3);
  margin: 0 0 var(--waio-s-5);
}

.waio-auth-check {
  display: inline-flex;
  align-items: center;
  gap: var(--waio-s-2);
  margin: 0;
  color: var(--waio-ink-2);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

.waio-auth-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--waio-accent-fill);
  cursor: pointer;
}

.waio-auth-link {
  color: var(--waio-accent-ink);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.waio-auth-link:hover,
.waio-auth-link:focus {
  color: var(--waio-accent-fill);
  text-decoration: underline;
}

/* ---- submit ---- */
.waio-auth .waio-auth-submit {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--waio-s-4);
  border: 1px solid var(--waio-accent-fill);
  border-radius: var(--waio-r-sm);
  background: var(--waio-accent-fill);
  color: var(--waio-on-accent);
  font-family: var(--waio-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  box-shadow: var(--waio-shadow-1);
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.waio-auth .waio-auth-submit:hover {
  background: var(--waio-accent-ink);
  border-color: var(--waio-accent-ink);
}

.waio-auth .waio-auth-submit:active {
  box-shadow: none;
}

.waio-auth .waio-auth-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 112, 198, 0.35);
}

/* forms.js disables the form while the request is in flight. */
.waio-auth .waio-auth-submit[disabled],
.waio-auth .waio-auth-submit.waiting {
  opacity: 0.65;
  cursor: default;
}

/* ---- footer ---- */
.waio-auth-foot {
  margin-top: var(--waio-s-5);
  color: var(--waio-muted);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.waio-auth-foot a {
  color: var(--waio-muted);
  text-decoration: none;
}

.waio-auth-foot a:hover {
  color: var(--waio-ink-2);
  text-decoration: underline;
}

/* ---- responsive ---- */
@media (max-width: 480px) {
  .waio-auth {
    justify-content: flex-start;
    padding: var(--waio-s-5) var(--waio-s-4) var(--waio-s-6);
  }
  .waio-auth-card {
    max-width: none;
    padding: var(--waio-s-5) var(--waio-s-4);
  }
  .waio-auth-title {
    font-size: 20px;
  }
  .waio-auth-brand img {
    max-height: 48px;
  }
}
/* Below ~360px "Remember me" and the reset link no longer fit on one
   line without one of them truncating, so stack them. */
@media (max-width: 359px) {
  .waio-auth-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--waio-s-2);
  }
}
/* Short landscape phones: let the page scroll instead of clipping the
   card against a viewport shorter than the form. */
@media (max-height: 620px) {
  .waio-auth {
    justify-content: flex-start;
    padding-top: var(--waio-s-5);
  }
}