/* SeatLink v3 logged-out pages (3.02.004): one centred panel under an ink brand bar. Markup: lib/auth_layout.php. */
@layer components {
  .auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s-5) var(--s-4); }
  .auth__col { width: min(100%, 26rem); display: flex; flex-direction: column; gap: var(--s-4); }

  .auth__card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2); overflow: hidden; }
  .auth__brand {
    display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5);
    background: var(--teal); color: var(--surface); text-decoration: none;
    font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em;
  }
  .auth__brand .logo { width: 2rem; height: 2rem; }
  .auth__body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); }
  .auth__body:focus { outline: none; }
  .auth__title { margin: 0; font-size: var(--text-2xl); }
  .auth__lede { margin: 0; color: var(--ink-2); }

  .auth__form { display: flex; flex-direction: column; gap: var(--s-4); }
  .auth__form .btn { margin-top: var(--s-1); }

  .auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin: 0; font-weight: 650; max-width: none; }
  .auth__foot { margin: 0; text-align: center; color: var(--ink-2); font-size: var(--text-sm); max-width: none; }

  /* password field with a show/hide button inside it */
  .input-reveal { position: relative; display: flex; }
  .input-reveal .input { padding-right: calc(var(--control-h) + var(--s-1)); }
  .input-reveal__btn {
    position: absolute; top: 50%; right: var(--s-1); translate: 0 -50%;
    display: inline-grid; place-items: center; width: calc(var(--control-h) - 0.5rem); height: calc(var(--control-h) - 0.5rem);
    border: 0; border-radius: var(--r-1); background: transparent; color: var(--ink-2); cursor: pointer;
  }
  .input-reveal__btn:hover { background: var(--neutral-bg); color: var(--ink); }
  .input-reveal__btn[aria-pressed="true"] { color: var(--ink); }
  .input-reveal__btn .icon + .icon { display: none; }
  .input-reveal__btn[aria-pressed="true"] .icon:first-child { display: none; }
  .input-reveal__btn[aria-pressed="true"] .icon + .icon { display: inline-block; }

  /* the two-step code: big, centred, tabular, so six digits are easy to check against the phone */
  .code-input {
    min-height: 3.5rem; text-align: center; font-size: var(--text-2xl); font-weight: 750;
    font-variant-numeric: tabular-nums; letter-spacing: 0.25em; padding-inline: var(--s-3);
  }
  .code-input::placeholder { letter-spacing: 0.25em; color: var(--ink-3); }

  .auth__facts { margin: 0; padding: var(--s-3) var(--s-4); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-1); font-size: var(--text-sm); color: var(--ink-2); }
  .auth__facts strong { color: var(--ink); }
  .auth__list { margin: 0; padding-left: 1.25rem; color: var(--ink-2); font-size: var(--text-sm); }

  @media (max-width: 30rem) {
    .auth { padding: 0; place-items: stretch; }
    .auth__col { width: 100%; gap: var(--s-3); }
    .auth__card { border-radius: 0; border-inline: 0; }
    .auth__links, .auth__foot { padding-inline: var(--s-4); }
    .auth__foot { padding-bottom: var(--s-4); }
  }
}