/*
 * The onboarding gateway's skin.
 *
 * ## It is a GUEST in Commerce — My Account's sign-in card
 *
 * `avista-commerce-myaccount`'s `templates/woocommerce/myaccount/form-login.php`
 * renders `[avista_account]` INSIDE `.acma-login__card` — step 2c, "Apply for a
 * business account" — rather than linking out, so the visitor does not lose what
 * they typed. That is the widget's primary home, and it means the widget does not
 * get a look of its own: it has to read as part of the object it sits in.
 *
 * It did not. Measured on the bed 2026-09-18: the host card renders small muted
 * labels, filled 44px inputs and a full-width 48px primary, while this file drew
 * 18px bold black labels, transparent underline inputs and a black
 * content-width pill. Two design languages, one card.
 *
 * ## The design is Avista Core's, and the geometry is the wp-login mask's
 *
 * Owner, 2026-09-18: *"the truth should be the core's design colour scheme mixed
 * with the design of the login mask we are using for example wp-login.php"*.
 *
 * So every number below comes from Core's `assets/css/login.css` — the
 * wp-login.php takeover, itself ported from the `WordPress Login.dc.html`
 * artboard — and every value from the token set that file renders against,
 * `assets/css/tokens.css`. Card 400px at `--space-6`, fields 44px at 15px,
 * primary 48px. Nothing here is a size I chose.
 *
 * **This reverses the note that used to head this file**, which said to keep away
 * from Core's tokens because wp-login.php is "a different surface". The surfaces
 * are different; the sign-in object is meant to be the same one at three
 * addresses — wp-login.php, My Account, and here.
 *
 * ## Why the literals are Core's and not a client's
 *
 * Core has two colour systems and only one of them is the default:
 *
 * - `Design\Tokens` is the per-site SETTABLE palette. Its own defaults are
 *   `#1a1612` / `#b5202a` — IÐNÚ's warm ink and red, which was the reference
 *   client when that set was drawn. A client's brand is the wrong thing to bake
 *   in as everyone's fallback.
 * - `assets/css/tokens.css` is the design system proper — indigo `#3858e9` and
 *   the wp-admin grey ramp, chosen so the login screen sits natively on
 *   WordPress rather than fighting it. That is the default.
 *
 * Hence the chain on every value, highest priority first:
 *
 *     var(--av-accent,                   ← Core's emitted per-site token
 *       var(--bde-brand-primary-color,   ← the host theme's palette
 *         #3858e9))                      ← Core's tokens.css default
 *
 * A site that has a palette still renders in it; a site that has none renders
 * Core's, not a client's. `--av-*` is Core's own published vocabulary
 * (`Design\Consumers`) and is read here, never written — Core owns those values,
 * and a module re-deriving them from the theme would quietly clobber a site's
 * deliberate override.
 *
 * Nothing new is enqueued for any of this. The widget needs about fifteen values
 * and carries them as fallbacks, so it renders correctly whether or not Core ever
 * publishes tokens on the front end — and picks them up the day it does. Core's
 * `tokens.css` is registered for the ADMIN only today
 * (`avista_core_enqueue_design()` hangs off `admin_enqueue_scripts`), and
 * wp-login.php enqueues it directly; there is no front-end route to it.
 */

.avista-onb {
  /*
   * ---- Palette: site, then the HOST CARD, then the theme, then Core's default
   *
   * The `--acma-*` link was missing until 2026-09-22, and its absence showed up
   * as the primary button rendering indigo inside a card painted in the client's
   * brand. Measured on the bed: the two plugins publish Core's tokens by
   * different rules, and on an unbranded site they disagree.
   *
   *   - `avista-commerce-myaccount` pulls `properties(':root', 'acma')` — the
   *     FULL block, schema defaults included — so `--acma-accent` is always
   *     defined wherever its stylesheet loads. That is what the host card paints
   *     with.
   *   - this widget pulls `properties('.avista-onb', '', true)`, i.e. SOURCED
   *     ONLY, and rightly: `--av-accent`'s schema default is `#b5202a`, IÐNÚ's
   *     red, and publishing a reference client's brand to every site that never
   *     set one is not a default, it is a mistake with a colour.
   *
   * So on a site with no accent sourced there is no `--av-accent` anywhere, and
   * the chain used to jump straight past the thing the widget is sitting inside.
   * `--acma-*` is Core's own vocabulary re-emitted under the host's prefix, not
   * a second opinion — reading it is how a guest matches the object it is a
   * guest in, which is the whole premise at the top of this file.
   *
   * Order is the authority order and each link is a strictly weaker claim: a
   * token this site deliberately set, then what the host card is actually
   * painting, then the theme's palette, then Core's own neutral default. Where
   * the site HAS sourced a value, `--av-*` still wins and nothing below is
   * consulted. Where ACMA is absent — the widget standalone on a Breakdance page
   * — `--acma-*` is undefined and the `--bde-*` link answers exactly as before.
   */
  --onb-ink: var(--av-ink, var(--acma-ink, var(--bde-body-text-color, #1d2327)));
  --onb-body: var(--av-ink, var(--acma-ink, var(--bde-body-text-color, #2c3338)));
  --onb-accent: var(--av-accent, var(--acma-accent, var(--bde-brand-primary-color, #3858e9)));
  --onb-surface: var(--av-surface, var(--acma-surface, #ffffff));
  --onb-font: var(--av-font-body, var(--acma-font-body, var(--bde-body-font-family, "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)));

  /* Derived, so a site that overrides the ink gets borders and secondary text
     that follow it. Over Core's own defaults these land within a shade of
     --grey-200 / --grey-600, which is what the mask uses. */
  --onb-line: color-mix(in srgb, var(--onb-ink) 12%, transparent);
  --onb-line-strong: color-mix(in srgb, var(--onb-ink) 22%, transparent);
  --onb-muted: color-mix(in srgb, var(--onb-ink) 58%, transparent);
  --onb-faint: color-mix(in srgb, var(--onb-ink) 40%, transparent);
  /* Readable ink ON the accent. Not hardcoded white: a light accent needs dark
     text, and contrast-color() is not shipping yet. */
  --onb-on-accent: color-mix(in srgb, var(--onb-surface) 92%, var(--onb-accent));
  --onb-accent-hover: color-mix(in srgb, var(--onb-accent) 84%, var(--onb-ink));

  --onb-radius-card: var(--av-radius-card, var(--acma-radius-card, var(--bde-woo-wrappers__border-radius, 10px)));
  --onb-radius-control: var(--av-radius-btn, var(--acma-radius-btn, var(--bde-button-border-radius, 4px)));

  /* ---- The card — login.css's, at 400px and --space-6 ------------------- */
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 24px;
  background: var(--onb-surface);
  border: 1px solid var(--onb-line);
  border-radius: var(--onb-radius-card);
  box-shadow: 0 1px 2px rgb(29 35 39 / 0.06), 0 0 0 1px rgb(29 35 39 / 0.04);
  box-sizing: border-box;
  font-family: var(--onb-font);
  color: var(--onb-body);
}

/*
 * Inside a host card there must not be a second one. ACMA already draws the
 * border, the padding and the 400px; drawing them again is the nested-box look
 * that makes an embedded widget read as a foreign object.
 */
.acma-login__card .avista-onb,
.acma-card .avista-onb,
.av-card .avista-onb {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.avista-onb *,
.avista-onb *::before,
.avista-onb *::after {
  box-sizing: border-box;
}

/* ---- Steps ----------------------------------------------------------------
 * The mask's card is a flex column at --space-4. Each step is that column.
 */
.avista-onb__form,
.avista-onb__result,
.avista-onb__contact,
.avista-onb__choose,
.avista-onb__retry,
.avista-onb__b2bapply,
.avista-onb__b2cregister,
.avista-onb__done,
.avista-onb__enrol,
.avista-onb__enrol-form,
.avista-onb__register-form,
/* The typed code. Left off this list until 2026-09-23, so its field, its button
   and its status line stacked with no rhythm at all — the input sat directly on
   top of the Confirm button. Exactly the omission the note below records for
   .avista-apply, and it stayed invisible because the step is revealed only after
   an email has gone out. */
.avista-onb__code-form,
/* The B2B application. Added 2026-09-22 with the rest of that form's move onto
   these classes — without it the form is one child of the step's column and its
   own six fields get no rhythm at all, which is not visible until somebody looks
   at the step it is embedded in. */
.avista-apply,
.avista-onb--account {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

/* A hidden step stays hidden even though it is display:flex above.
 *
 * ⚠ The code form needs naming here as well as in the list, and forgetting it
 * would be worse than the spacing bug it fixes. `[hidden]` is the browser's own
 * rule at specificity (0,1,0) — the SAME as a class — so the `display:flex`
 * above ties with it and wins on source order. The form carries `hidden` in the
 * markup and is revealed by JS only once the email has gone out; without this it
 * would render the code box from the first paint, on a step that has not sent
 * anything yet. It has no `data-step`, so the existing selector does not reach
 * it. Same tie that made `[hidden]` a no-op in wp-admin-bridge.css.
 */
.avista-onb [data-step][hidden],
.avista-onb__code-form[hidden] {
  display: none;
}

/* ---- Heading and lede -----------------------------------------------------
 * --text-2xl / --weight-semibold, matching the host card's title, so a step
 * inside it does not introduce a third heading scale.
 */
.avista-onb__company {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--onb-ink);
}

.avista-onb__hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--onb-muted);
}

/* No company, no heading. Every turn-away leaves it empty (a blocked company is
   not named since 2026-09-23), and an empty <p> in a flex column still takes a
   gap, so the sentence sat 16px lower than on any other step. */
.avista-onb__company:empty {
  display: none;
}

/* A heading and its lede belong together, so they close up rather than taking
   the step gap. `:not(:empty)` because a sibling selector still matches the
   hidden heading above, and would pull the lede up into whatever precedes it. */
.avista-onb__company:not(:empty) + .avista-onb__hint {
  margin-top: -12px;
}

.avista-onb__greeting {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--onb-muted);
}

/* ---- Fields ---------------------------------------------------------------
 * --type-label is 500 13px/1.35; the mask's inputs are 44px at 15px with the
 * label 6px (--space-15) above.
 */
.avista-onb__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.avista-onb__label {
  display: block;
  margin: 0;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--onb-ink);
}

/*
 * The required marker.
 *
 * Accent-coloured rather than red: on a form where most fields are required an
 * error colour on every second label reads as six things already being wrong.
 * It sits at the label's own size so it does not pull the eye off the words it
 * qualifies, and the legend above the fields is what gives it a meaning — an
 * asterisk with nothing explaining it is a convention, not an instruction.
 */
.avista-onb__req {
  color: var(--onb-accent);
  font-weight: 600;
}

/* The legend leads the form, so it reads before the fields it describes rather
   than being a footnote to them. */
.avista-onb__note--legend {
  margin-bottom: -4px;
}

.avista-onb__input {
  width: 100%;
  max-width: none;
  display: block;
  height: 44px;
  padding: 0 12px;
  margin: 0;
  font-family: var(--onb-font);
  font-size: 15px;
  line-height: 1;
  color: var(--onb-body);
  background: var(--onb-surface);
  border: 1px solid var(--onb-line-strong);
  border-radius: var(--onb-radius-control);
  box-shadow: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.avista-onb__input::placeholder {
  color: var(--onb-faint);
  opacity: 1;
}

.avista-onb__input:hover {
  border-color: color-mix(in srgb, var(--onb-ink) 32%, transparent);
}

/* The mask uses --ring-focus, which resolves through --azure-500 — broken
   upstream in the design system and patched in Core's vendored copy. An accent
   ring is the same idea without inheriting that bug. */
.avista-onb__input:focus {
  outline: none;
  border-color: var(--onb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--onb-accent) 20%, transparent);
}

.avista-onb__input:disabled {
  color: var(--onb-muted);
  background: color-mix(in srgb, var(--onb-ink) 4%, var(--onb-surface));
  cursor: not-allowed;
}

/* Two-up rows (first/last name, postcode + city). */
.avista-onb__field-row {
  display: flex;
  gap: 12px;
}

.avista-onb__field-row > .avista-onb__field {
  flex: 1 1 0;
}

.avista-onb__field-row > .avista-onb__field--postcode {
  flex: 0 1 9rem;
}

@media (max-width: 26rem) {
  .avista-onb__field-row {
    flex-direction: column;
  }

  .avista-onb__field-row > .avista-onb__field--postcode {
    flex: 1 1 auto;
  }
}

/* Small print belonging to the field above it — hugs that field rather than
   taking the step gap, so it reads as part of it. */
.avista-onb__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--onb-muted);
}

.avista-onb__field > .avista-onb__note {
  margin-top: -2px;
}

/* The one note that is a warning rather than small print. Marked with the accent
   down its edge rather than shouted in red: the customer has done nothing wrong,
   they are being asked to check something before it costs them a support call. */
.avista-onb__note--warn {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--onb-accent);
  background: color-mix(in srgb, var(--onb-accent) 6%, var(--onb-surface));
  border-radius: 0 var(--onb-radius-control) var(--onb-radius-control) 0;
  color: var(--onb-body);
}

/* ---- The checkbox ---------------------------------------------------------
 * `accent-color` brands the native control instead of replacing it: a hand-built
 * checkbox loses the platform's focus ring, keyboard behaviour and
 * high-contrast rendering, and this is the one control on the card a customer is
 * asked to make a decision with.
 */
.avista-onb__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--onb-body);
  cursor: pointer;
}

.avista-onb__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--onb-accent);
  cursor: pointer;
}

/* ---- Buttons --------------------------------------------------------------
 * The mask's primary: full width, 48px, 15px/500, accent fill.
 */
.avista-onb__btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  margin: 0;
  font-family: var(--onb-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--onb-on-accent);
  background: var(--onb-accent);
  border: 1px solid var(--onb-accent);
  border-radius: var(--onb-radius-control);
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.avista-onb__btn:hover {
  background: var(--onb-accent-hover);
  border-color: var(--onb-accent-hover);
  color: var(--onb-on-accent);
}

.avista-onb__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--onb-accent) 20%, transparent);
}

.avista-onb__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The alternative route (electronic ID, the personal account, sign out) —
   components.css's `.av-btn--secondary`: surface fill, default border, body ink.
   A second accent-filled button would give the card two primaries. */
.avista-onb__btn--alt {
  color: var(--onb-body);
  background: var(--onb-surface);
  border-color: var(--onb-line-strong);
}

.avista-onb__btn--alt:hover {
  color: var(--onb-body);
  background: color-mix(in srgb, var(--onb-ink) 4%, var(--onb-surface));
  border-color: color-mix(in srgb, var(--onb-ink) 32%, transparent);
}

/* ---- Messages ------------------------------------------------------------- */
.avista-onb__msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--onb-muted);
}

/* No reserved line. A min-height here put a blank row under every step that
   carries a status element, which is most of them. */
.avista-onb__msg:empty {
  display: none;
}

.avista-onb__msg--error {
  color: #b32d2e; /* --red-600 */
}

/* ---- The back link --------------------------------------------------------
 * The mask's footer link: centred, --text-xs, quiet until hovered.
 */
.avista-onb__back {
  align-self: center;
  width: auto;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--onb-muted);
  cursor: pointer;
}

.avista-onb__back::before {
  content: "\2190\00a0"; /* ← + non-breaking space */
}

.avista-onb__back:hover {
  color: var(--onb-accent);
}

/* ---- Toast ----------------------------------------------------------------
 * Fixed to the viewport, so it sits outside the card and cannot read the scoped
 * tokens above — it carries its own copy of the same chain.
 */
.avista-onb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: min(90vw, 400px);
  padding: 12px 16px;
  border-radius: var(--av-radius-btn, var(--bde-button-border-radius, 4px));
  font-family: var(--av-font-body, var(--bde-body-font-family, "Public Sans", -apple-system, sans-serif));
  font-size: 13px;
  line-height: 1.5;
  color: #fff;
  box-shadow: 0 6px 24px rgb(29 35 39 / 0.18);
}

.avista-onb-toast--error {
  background: #b32d2e; /* --red-600 */
}

.avista-onb-toast--pending,
.avista-onb-toast--notice {
  background: var(--av-accent, var(--bde-brand-primary-color, #3858e9));
}

/* The address-confirmation prompt: a toast that waits for a press, so it reads
 * as a light card with one button rather than as a status line. */
.avista-onb-toast--confirm {
  background: #fff;
  color: #1d2327;
  border: 1px solid #dcdcde;
}

.avista-onb-toast--confirm p {
  margin: 0 0 10px;
}

.avista-onb-toast__btn {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--av-radius-btn, var(--bde-button-border-radius, 4px));
  background: var(--av-accent, var(--bde-brand-primary-color, #3858e9));
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.avista-onb-toast__btn:focus-visible {
  outline: 2px solid var(--av-accent, var(--bde-brand-primary-color, #3858e9));
  outline-offset: 2px;
}