/**
 * What: The login form's own styling — layout and states only.
 * Why:  This form is dropped into a Breakdance page whose theme already decides what a button and
 *       an input look like. Styling it opinionatedly means it looks like a plugin bolted on; the
 *       goal is that a customer cannot tell it is one.
 * How:  Custom properties for everything an author might change, inheriting the theme's font and
 *       colours by default. The Breakdance element's css.twig overrides these same properties, so
 *       an author's design controls and this file cannot fight.
 *
 * BUSINESS RULE: no !important anywhere, and no element selectors outside .bss-auth. A login form
 * that wins specificity fights against the theme is the thing that makes a page look broken.
 */

.bss-auth {
  --bss-auth-gap: 0.75rem;
  --bss-auth-radius: 6px;
  --bss-auth-border: #d5d8dd;
  --bss-auth-focus: #2563eb;
  --bss-auth-error: #b91c1c;
  --bss-auth-muted: #6b7280;

  display: flex;
  flex-direction: column;
  gap: var(--bss-auth-gap);
  max-width: min(26rem, 100%);
  /*
   * Contained: the form never asks its container for more room than it has. The 2026-10 trial
   * showed scroll bars inside the Breakdance "Login" popup (21784). It could not be reproduced
   * outside that popup, so this removes the ways the form itself could overflow; if the bars
   * remain, the popup's own overflow setting is the cause.
   */
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bss-auth *,
.bss-auth *::before,
.bss-auth *::after {
  box-sizing: border-box;
}

.bss-auth__title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.bss-auth__subtitle,
.bss-auth__sent {
  margin: 0;
  color: var(--bss-auth-muted);
  font-size: 0.9375rem;
}

.bss-auth__step {
  display: flex;
  flex-direction: column;
  gap: var(--bss-auth-gap);
  margin: 0;
}

.bss-auth__step[hidden] {
  display: none;
}

.bss-auth__label {
  font-size: 0.875rem;
  font-weight: 600;
}

/* The country code sits inside the field's border so the two read as one control. */
.bss-auth__phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--bss-auth-border);
  border-radius: var(--bss-auth-radius);
  overflow: hidden;
}

.bss-auth__phone-row:focus-within {
  border-color: var(--bss-auth-focus);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
}

.bss-auth__cc {
  display: flex;
  align-items: center;
  padding: 0 0.625rem;
  background: rgb(0 0 0 / 4%);
  color: var(--bss-auth-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bss-auth__phone-row .bss-auth__input {
  border: 0;
  border-radius: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.bss-auth__phone-row .bss-auth__input:focus {
  box-shadow: none;
  outline: none;
}

.bss-auth__input {
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus, and the customer is
     then looking at a form they have to pinch out of. */
  font-size: max(1rem, 16px);
  font-family: inherit;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--bss-auth-border);
  border-radius: var(--bss-auth-radius);
  background: #fff;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.bss-auth__input:focus {
  border-color: var(--bss-auth-focus);
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
}

/* Spaced digits so a six-figure code can be read back at a glance. */
.bss-auth__input--code {
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bss-auth__button {
  font: inherit;
  font-weight: 600;
  padding: 0.6875rem 1rem;
  border: 0;
  border-radius: var(--bss-auth-radius);
  background: var(--bss-auth-focus);
  color: #fff;
  cursor: pointer;
}

.bss-auth__button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.bss-auth__link {
  font: inherit;
  font-size: 0.875rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bss-auth-focus);
  text-decoration: underline;
  cursor: pointer;
}

.bss-auth__alternatives {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.bss-auth__alternatives[hidden] {
  display: none;
}

.bss-auth__alt-label {
  color: var(--bss-auth-muted);
}

.bss-auth__error {
  margin: 0;
  color: var(--bss-auth-error);
  font-size: 0.875rem;
}

.bss-auth__error[hidden],
.bss-auth__status[hidden] {
  display: none;
}

.bss-auth__status {
  margin: 0;
  color: var(--bss-auth-muted);
  font-size: 0.875rem;
}

.bss-auth.is-busy {
  cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
  .bss-auth__button,
  .bss-auth__phone-row,
  .bss-auth__input {
    transition: box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
  }
}

/*
 * The sign-in step's way past.
 *
 * Deliberately a link rather than a second button: two buttons of equal weight make a customer
 * stop and choose, and the choice this one offers is "skip the thing we just asked for". It has to
 * be findable and unmissable without competing with the code they came here to request.
 */
.bss-auth-step__skip {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
}

.bss-auth-step__skip a,
.bss-auth-step__skip .bss-auth__link {
  color: var(--bss-auth-muted);
  font-size: inherit;
  text-underline-offset: 0.2em;
}

.bss-auth-step__skip a:hover,
.bss-auth-step__skip a:focus-visible,
.bss-auth-step__skip .bss-auth__link:hover,
.bss-auth-step__skip .bss-auth__link:focus-visible {
  color: inherit;
}

/*
 * Derived address fields.
 *
 * BUSINESS RULE: tinted, never disabled. A locked field reads as broken and leaves a customer with
 * no way to correct a dataset that has a publication date; a tinted, editable one reads as "we
 * filled this in — change it if we got it wrong", which is the truth.
 */
.bss-pin-filled input,
.bss-pin-filled select,
.bss-pin-filled .select2-selection {
  background-color: rgba(16, 132, 116, 0.06);
  border-color: rgba(16, 132, 116, 0.45);
}

.bss-pin-note {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bss-auth-muted);
}

/*
 * The signed-in account menu (owner, 2026-10-25): what the header's profile popup shows a customer
 * who is already signed in. One line saying who they are, the places they go next, sign out apart.
 */
.bss-auth--signed-in {
  min-width: min(18rem, 100%);
  gap: 0.5rem;
}

.bss-auth--signed-in .bss-auth__signed-in {
  margin: 0;
  color: var(--bss-auth-muted);
  font-size: 0.875rem;
}

.bss-auth__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bss-auth-border);
}

.bss-auth__menu li {
  margin: 0;
  border-bottom: 1px solid var(--bss-auth-border);
}

.bss-auth__menu a,
.bss-auth__signout a {
  display: block;
  padding: 0.7rem 0;
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
}

.bss-auth__menu a:hover,
.bss-auth__menu a:focus-visible,
.bss-auth__signout a:hover,
.bss-auth__signout a:focus-visible {
  text-decoration: underline;
}

.bss-auth__signout {
  margin: 0;
}