/* auth.css - login/registration screen, logout button, boot gating */

  /* the app stays unmounted until we know who is looking at it */
  .app.pre-boot { display: none; }

  .auth-screen {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
  }
  .auth-screen.hidden { display: none; }

  /* over the running app (expired session): frost it, Apple-style */
  .auth-screen.over-app {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
  }

  .auth-card {
    width: min(520px, 100%);
    padding: 48px 44px 34px;
    /* auto margins center the card on both axes and still allow
       scrolling when the viewport is shorter than the card */
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: auth-in 0.5s var(--ease-out) both;
  }
  @keyframes auth-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }

  .auth-logo { width: 64px; height: 64px; display: block; }

  .auth-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 18px;
  }

  .auth-sub {
    font-size: 15px;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    margin-top: 6px;
    text-align: center;
  }

  .auth-tabs { margin-top: 26px; }
  .auth-tabs .tab-btn { width: 140px; padding: 8px 0; font-size: 13.5px; }

  .auth-form {
    width: 100%;
    margin-top: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .auth-field {
    appearance: none;
    width: 100%;
    border: 1px solid transparent;
    outline: none;
    background: var(--chip-bg);
    color: var(--text);
    font: inherit;
    font-size: 17px;
    letter-spacing: -0.01em;
    padding: 14px 16px;
    border-radius: 13px;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  }
  .auth-field::placeholder { color: var(--text-tertiary); }
  .auth-field:focus,
  .auth-field:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-soft);
    background: var(--card);
  }

  /* reCAPTCHA lives between the fields and the submit, registration only */
  .auth-captcha {
    display: flex;
    justify-content: center;
    min-height: 78px;
    margin-top: 2px;
  }
  .auth-captcha.hidden { display: none; }
  @media (max-width: 480px) {
    .auth-captcha { transform: scale(0.9); transform-origin: top center; }
  }
  @media (max-width: 370px) {
    .auth-captcha { transform: scale(0.78); }
  }

  .auth-error {
    min-height: 18px;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: var(--danger);
    text-align: center;
    margin-top: 2px;
  }

  /* same language as the pomodoro primary button, stretched to the card */
  .auth-submit {
    appearance: none;
    border: none;
    width: 100%;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 14px;
    border-radius: 13px;
    cursor: pointer;
    margin-top: 2px;
    transition: opacity 0.15s, transform 0.15s var(--spring);
    touch-action: manipulation;
  }
  .auth-submit:hover { opacity: 0.88; }
  .auth-submit:active { transform: scale(0.98); }
  .auth-submit:disabled { opacity: 0.55; cursor: default; transform: none; }

  .auth-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    letter-spacing: -0.01em;
    margin-top: 18px;
    text-align: center;
    text-wrap: balance;
  }

  /* way back to the landing */
  .auth-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color 0.15s;
    touch-action: manipulation;
  }
  .auth-back:hover { color: var(--accent); }
  .auth-back svg { transition: transform 0.2s var(--spring); }
  .auth-back:hover svg { transform: translateX(-2px); }

  /* the toggles must stay clickable above the auth overlay (z 80) */
  .theme-toggle { z-index: 90; }

  /* exit button lives next to the theme toggle, same ghost style */
  .logout-btn { right: 58px; }
  .logout-btn.hidden { display: none; }

  @media (max-width: 480px) {
    .auth-card { padding: 38px 26px 28px; }
  }