/* The signed-out shell: one centred card on the wash gradient.
 *
 * Shared by /client-portal and /set-password so the two pages a customer meets
 * before they are logged in cannot drift apart. Linked AFTER ww-tokens.css and
 * ww.css, and like every other stylesheet here it defines no colour, radius or
 * shadow of its own. Everything comes from the tokens.
 */

.portal-back { min-height: 44px; }

.portal-main {
  min-height: 100vh;
  padding: 130px var(--ww-gutter) 72px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--ww-plate) 0%, var(--ww-wash) 58%, var(--ww-paper) 100%);
}

.portal-wrap { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 28px; }
/* The journey lockup and its way-back link carry their own margins for the
   pages that stack them in normal flow. Here the column's gap does that job,
   so the margins are dropped rather than added to it. */
.portal-wrap > .ww-journey-brand { margin-bottom: 0; }
.portal-wrap > .ww-journey-back { margin-top: 0; }
.portal-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ww-s-4); }
.portal-head p { margin: 0; color: var(--ww-ink-2); font-size: var(--ww-small); line-height: 1.45; }

.portal-card {
  padding: clamp(25px, 5vw, 38px);
  background: var(--ww-plate); border: 1px solid var(--ww-rule);
  border-radius: var(--ww-r-feature); box-shadow: var(--ww-sh-card);
}

.portal-form { display: flex; flex-direction: column; gap: 20px; }
.portal-form .ww-field { margin: 0; }
.portal-submit { width: 100%; margin-top: 2px; }
.portal-remember { display: flex; align-items: center; gap: 10px; margin: -6px 0 0; cursor: pointer; }
.portal-remember input { margin: 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ww-ink-strong); cursor: pointer; }
.portal-remember span { font-size: var(--ww-body); line-height: 1.4; color: var(--ww-ink); }
.portal-forgot-row { margin: -4px 0 0; text-align: center; }

.portal-forgot,
.portal-reset__back {
  display: inline; padding: 0; border: 0; background: none; color: var(--ww-signal);
  font: inherit; font-size: var(--ww-small); font-weight: 500; line-height: 1.45;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.portal-forgot:focus-visible,
.portal-reset__back:focus-visible { outline: 3px solid var(--ww-focus); outline-offset: 4px; border-radius: 2px; }

/* One status line per form, used for both the reassuring answer and the
   failure. Errors are marked with the accent on the left edge rather than with
   red, because the palette has no red and does not need one. */
.portal-status {
  margin: 0; padding: 14px 16px;
  color: var(--ww-ink); background: var(--ww-wash);
  border: 1px solid var(--ww-rule); border-radius: var(--ww-r-panel);
  font-size: var(--ww-small); line-height: 1.45; text-align: center;
}
.portal-status--error { border-left: 3px solid var(--ww-signal); text-align: left; }

.portal-reset { display: flex; flex-direction: column; gap: 20px; }
.portal-reset[hidden], .portal-form[hidden] { display: none; }
.portal-reset .ww-field { margin: 0; }
.portal-reset__head { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.portal-reset__head h2 { margin: 0; font-family: var(--ww-display); font-size: var(--ww-h6); line-height: 1.2; color: var(--ww-ink-strong); }
.portal-reset__head p { margin: 0; color: var(--ww-ink); font-size: var(--ww-small); line-height: 1.45; }
.portal-reset__back-row { margin: -4px 0 0; text-align: center; }

/* The address the link was issued to, shown so the customer can see which
   account they are about to set a password on. */
.portal-identity {
  margin: 0; padding: 12px 16px;
  background: var(--ww-wash); border: 1px solid var(--ww-rule); border-radius: var(--ww-r-control);
  color: var(--ww-ink); font-size: var(--ww-small); line-height: 1.45; text-align: center;
}
.portal-identity b { color: var(--ww-ink-strong); font-weight: 600; overflow-wrap: anywhere; }

.portal-footer {
  padding: 22px var(--ww-gutter); border-top: 1px solid var(--ww-rule);
  text-align: center; color: var(--ww-ink-2); font-size: var(--ww-ui);
}
.portal-footer a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 599.98px) {
  .portal-main { padding-top: 105px; padding-bottom: 48px; align-items: flex-start; }
  .portal-back { padding-inline: 14px; }
}