/* Auth pages — login, magic link, etc. */

@layer components {
  body.auth-body {
    padding-block-start: 0;
  }

  body.auth-body main {
    align-items: center;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    justify-content: center;
    margin: 0;
    max-inline-size: none;
    padding: 1rem;
  }

  body.auth-body footer {
    inline-size: 100%;
    margin: 0;
    max-inline-size: none;
    padding: 1.5rem 2rem;
    text-align: center;
  }

  /* Page wrapper */
  .auth-page {
    align-items: center;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    justify-content: center;
    padding: 2rem 1rem;
  }

  /* Card */
  .auth-card {
    inline-size: 100%;
    max-inline-size: 440px;
    padding: 2.5rem 2rem;
    position: relative;
    z-index: 1;
  }

  /* Page-level watermark — fixed to viewport bottom-right corner, behind card */
  .auth-watermark {
    block-size: 280px;
    inline-size: 280px;
    inset-block-end: -48px;
    inset-inline-end: -48px;
    opacity: 0.07;
    pointer-events: none;
    position: fixed;
    z-index: 0;
  }

  /* Logo */
  .auth-card__logo {
    display: flex;
    justify-content: center;
    margin-block-end: 1.75rem;
  }

  .auth-card__logo .nav-logo {
    display: inline-flex;
    margin: 0;
    padding: 0;
  }

  .auth-card__logo .nav-logo__img {
    block-size: 32px;
    inline-size: auto;
  }

  /* Title */
  .auth-card__title {
    color: var(--color-ink);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.375rem;
  }

  /* Subtitle */
  .auth-card__subtitle {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1.75rem;
  }

  /* Flash messages */
  .auth-alert {
    background: var(--color-negative-tint);
    border-radius: var(--radius-sm);
    color: var(--color-negative-strong);
    font-size: 0.875rem;
    margin-block-end: 1rem;
    padding: 0.625rem 0.875rem;
  }

  /* The errors a rejected form lists inside the alert. */
  .auth-alert__list {
    margin: 0;
    padding-inline-start: 1.25rem;
  }

  .auth-notice {
    background: var(--color-positive-tint);
    border-radius: var(--radius-sm);
    color: var(--color-positive);
    font-size: 0.875rem;
    margin-block-end: 1rem;
    padding: 0.625rem 0.875rem;
  }

  /* Form */
  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Field */
  .auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  /* A field the form can do without, folded under a link-like line until
     asked for. */
  .auth-disclosure {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .auth-disclosure__summary {
    color: var(--color-link);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    inline-size: fit-content;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      color: var(--color-brand-strong);
    }
  }

  .auth-disclosure[open] .auth-disclosure__summary {
    color: var(--color-ink-muted);
  }

  .auth-label {
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 500;
  }

  /* Input wrapper — owns the icon via ::before so autofill can't cover it */
  .auth-input-wrap {
    position: relative;
  }

  .auth-input-wrap::before {
    background-repeat: no-repeat;
    background-size: 18px 18px;
    block-size: 18px;
    content: '';
    inline-size: 18px;
    inset-block-start: 50%;
    inset-inline-start: 0.875rem;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
  }

  .auth-input-wrap--email::before {
    background-image: var(--icon-envelope);
  }

  .auth-input-wrap--password::before {
    background-image: var(--icon-shield);
  }

  /* The icon in front of the field takes the room the base gives its text. */
  .auth-input {
    padding-inline-start: 2.75rem;
  }

  /* Fix autofill background — large inset shadow overrides Chrome's yellow/blue */
  .auth-input:-webkit-autofill,
  .auth-input:-webkit-autofill:hover,
  .auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset;
    -webkit-text-fill-color: var(--color-ink);
    box-shadow: 0 0 0 1000px var(--color-surface) inset;
    transition: background-color 9999s ease-in-out 0s;
  }

  .auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset, var(--shadow-focus);
    box-shadow: 0 0 0 1000px var(--color-surface) inset, var(--shadow-focus);
  }

  /* Links row */
  .auth-form__links {
    display: flex;
    justify-content: flex-end;
    margin-block-start: -0.25rem;
  }

  /* Links */
  .auth-link {
    color: var(--color-brand);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
  }

  .auth-link:hover {
    text-decoration: underline;
  }

  .auth-link--muted {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    text-decoration: none;
  }

  .auth-link--muted:hover {
    color: var(--color-brand);
  }

  /* Submit button */
  .auth-btn {
    block-size: 52px;
    inline-size: 100%;
    margin-block-start: 0.5rem;
  }

  .auth-btn:active {
    transform: scale(0.99);
  }

  /* "optional" beside the password label: the field may be left empty. */
  .auth-label__hint {
    color: var(--color-ink-muted);
    font-weight: 400;
  }

  /* Terms agreement fine print */
  .auth-terms {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 1rem 0 0;
    text-align: center;
  }

  /* Sign-up prompt */
  .auth-signup {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin: 1.25rem 0 0;
    text-align: center;
  }

  /* "or" divider — separates the email form from the Google button */
  .auth-divider {
    align-items: center;
    color: var(--color-ink-faint);
    display: flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.75rem;
    letter-spacing: 0.06em;
    margin: 1.25rem 0;
    text-transform: uppercase;
  }

  .auth-divider::before,
  .auth-divider::after {
    background: var(--color-border);
    block-size: 1px;
    content: '';
    flex: 1;
  }

  /* Google button — a white counterpart to the purple submit button, in ink
     rather than the brand. The surrounding button_to emits a form, which must
     not add vertical rhythm of its own. */
  .auth-btn--google {
    color: var(--color-ink);
    margin-block-start: 0;
  }

  .auth-btn__icon {
    block-size: 20px;
    flex: none;
    inline-size: 20px;
  }

  @media (width < 480px) {
    .auth-card {
      border-radius: var(--radius-lg);
      padding: 2rem 1.25rem;
    }
  }

  /* ─── Finishing a login ─────────────────── */

  .auth-fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .auth-fieldset + .auth-fieldset {
    border-block-start: 1px solid var(--color-border-subtle);
    padding-block-start: 1.25rem;
  }

  .auth-fieldset__legend {
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    margin-block-end: 0.75rem;
    padding: 0;
  }

  .auth-fieldset__hint {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin: -0.5rem 0 0;
  }

  .auth-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);

    @media (width >= 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* A field with no icon in front of it keeps the input's own padding. */
  .auth-input--plain {
    padding-inline-start: 1rem;
  }

  /* The avatar's two faces (initials, photo) sit in the card's row as if
     the slot were not there. */
  .auth-avatar-slot {
    display: contents;
  }

  /* ─── Invitation page ───────────────────── */
  .auth-card--wide {
    max-inline-size: 44rem;
  }

  .auth-link--button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
  }

  /* A `button_to` standing in a sentence: its form flows with the words. */
  .auth-inline-form {
    display: inline;
  }

  /* ─── Signing up as a client or an accountant ─── */

  .auth-kind {
    background: var(--color-surface-tint);
    border-radius: var(--radius-pill);
    display: flex;
    gap: 0.25rem;
    margin-block-end: 1.5rem;
    padding: 0.25rem;
  }

  .auth-kind__tab {
    align-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-ink-secondary);
    display: flex;
    flex: 1;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.625rem 1rem;
    text-decoration: none;
  }

  .auth-kind__tab--current {
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: var(--color-brand);
  }

  /* ─── The link is on its way ────────────── */

  .auth-card__icon {
    align-items: center;
    background: var(--color-brand-tint);
    block-size: 3.5rem;
    border-radius: var(--radius-lg);
    color: var(--color-brand);
    display: flex;
    inline-size: 3.5rem;
    justify-content: center;
    margin-block-end: 1.25rem;
  }

  /* The code a registration's mail carries, typed back here: spaced out
     the way the mail prints it, so a misread digit stands out. */
  .auth-code {
    margin-block-start: 1.5rem;
  }

  .auth-code__input {
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
  }

  .auth-hint {
    align-items: center;
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
    display: flex;
    gap: 1rem;
    margin-block: 1.5rem;
    padding: 1rem 1.25rem;
  }

  .auth-hint__mark {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 2.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    inline-size: 2.5rem;
    justify-content: center;
  }

  .auth-hint__text {
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    font-size: 0.9375rem;
    gap: 0.25rem;
    margin: 0;

    span {
      color: var(--color-ink-muted);
      font-size: 0.875rem;
    }
  }

  .auth-card__foot {
    align-items: center;
    border-block-start: 1px solid var(--color-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding-block-start: 1.25rem;

    .auth-link {
      align-items: center;
      display: inline-flex;
      gap: 0.375rem;
    }
  }

  .auth-card__resend {
    color: var(--color-ink-muted);
  }

  /* ─── Name and password ─────────────────── */

  .auth-card__eyebrow {
    color: var(--color-brand);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
  }

  .auth-badge {
    align-items: center;
    background: var(--color-brand-tint);
    border-radius: var(--radius-pill);
    color: var(--color-brand);
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.375rem;
    margin: 0 0 1rem;
    padding: 0.25rem 0.75rem;
  }

  .auth-label__required {
    color: var(--color-brand);
  }

  /* The eye at the end of the password field shows what was typed. */
  .auth-input-wrap--revealable .auth-input {
    padding-inline-end: 3rem;
  }

  .auth-reveal {
    align-items: center;
    background: none;
    block-size: 2.25rem;
    border: none;
    border-radius: 50%;
    color: var(--color-ink-muted);
    cursor: pointer;
    display: flex;
    inline-size: 2.25rem;
    inset-block-start: 50%;
    inset-inline-end: 0.5rem;
    justify-content: center;
    position: absolute;
    transform: translateY(-50%);
  }

  .auth-reveal[aria-pressed="true"],
  .auth-reveal:hover {
    color: var(--color-brand);
  }

  /* Four bars, lit as many as the password is strong: red, amber, then
     green twice. */
  .auth-strength {
    --strength-color: var(--color-border);

    display: grid;
    gap: 0.375rem;
    grid-template-columns: repeat(4, 1fr);
    margin-block-start: 0.75rem;
  }

  .auth-strength[data-strength="1"] {
    --strength-color: var(--color-negative);
  }

  .auth-strength[data-strength="2"] {
    --strength-color: var(--color-warning);
  }

  .auth-strength[data-strength="3"],
  .auth-strength[data-strength="4"] {
    --strength-color: var(--color-positive);
  }

  .auth-strength__bar {
    background: var(--color-border);
    block-size: 0.25rem;
    border-radius: var(--radius-pill);
  }

  .auth-strength[data-strength="1"] .auth-strength__bar:nth-child(-n + 1),
  .auth-strength[data-strength="2"] .auth-strength__bar:nth-child(-n + 2),
  .auth-strength[data-strength="3"] .auth-strength__bar:nth-child(-n + 3),
  .auth-strength[data-strength="4"] .auth-strength__bar {
    background: var(--strength-color);
  }

  .auth-strength__label {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin: 0.375rem 0 0;
    min-block-size: 1.2em;
  }
}