/*
 * login.css — the login and reset-password screens.
 *
 * `tally:login-v2` (2026-10-24, Almon): a clearer, more professional order —
 * who, the account chip or email, password (show/hide, Caps Lock), one error
 * line, the button, and "שכחתי סיסמה" under it; a footer under the card; on a
 * computer, a short description of the app beside the card. Everything is
 * drawn with the tokens, so the card is glass in C and an etched pane in
 * M / M · בצבע (design-etched.css's room shows behind it), light and dark.
 * `tally:login-perf` (2026-09-23) still holds: soft lights are radial
 * gradients, never a big `filter: blur`.
 */

#app.screen-login,
#app.screen-reset-password {
  max-inline-size: none;
  min-block-size: 100dvh;
  margin-inline: 0;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
}

.login__page {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}

/* Two soft lights behind the card (design C; M has its room instead). */
.login__page::before,
.login__page::after {
  content: '';
  position: fixed;
  z-index: -1;
  inline-size: 520px;
  block-size: 520px;
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}
.login__page::before { background: radial-gradient(circle, var(--accent) 0%, transparent 70%); inset-inline-start: -180px; inset-block-start: -200px; }
.login__page::after { background: radial-gradient(circle, var(--accent-2) 0%, transparent 70%); inset-inline-end: -200px; inset-block-end: -200px; }
html[data-design="etched"] .login__page::before,
html[data-design="etched"] .login__page::after { opacity: 0.16; }

.login__column {
  inline-size: 100%;
  max-inline-size: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

/* The card: frosted glass (C) / an etched pane (M). */
.login__card {
  position: relative;
  inline-size: 100%;
  max-inline-size: 420px;
  padding: 32px 24px 22px;
  border-radius: 30px;
  background: var(--surface-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-mode="dark"] .login__card { border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg); }
html[data-design="etched"] .login__card {
  background: var(--surface);
  backdrop-filter: var(--surface-blur);
  -webkit-backdrop-filter: var(--surface-blur);
  border-color: var(--border);
  outline: 1px solid var(--etch);
  outline-offset: -8px;
}
.login__card.is-shaking { animation: login-shake 0.36s ease; }
@keyframes login-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---- Who ------------------------------------------------------------------ */

.login__hero { padding-block-end: 22px; text-align: center; }
.login__title { margin: 0; }
.login__lockup { inline-size: 150px; block-size: auto; aspect-ratio: 363.9 / 141.2; margin-inline: auto; }
.login__subtitle { margin: 6px 0 0; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.login__logo {
  inline-size: 60px;
  block-size: 60px;
  margin-inline: auto;
  border-radius: 18px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
}
.login__logo--mark { background: none; border: none; border-radius: 0; }
.login__business { margin: 10px 0 0; color: var(--text-muted); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; }
.login__greeting { margin: 4px 0 0; font-size: 1.625rem; font-weight: 700; line-height: 1.25; }
.login__greeting--plain { margin-block-start: 14px; font-size: 1.375rem; }
html[data-design="etched"] .login__greeting { font-family: "Heebo", system-ui, sans-serif; font-weight: 500; }
.login__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--accent);
}
.login__hero-icon svg { inline-size: 26px; block-size: 26px; }
.login__hero-icon.is-ok { background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); }
.login__addr { font-weight: 600; color: var(--text); }

/* The remembered account, in place of the email field. */
.login__account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 8px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border);
}
.login__account-avatar {
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font-weight: 700;
}
.login__account-text { display: flex; flex-direction: column; min-inline-size: 0; flex: 1 1 auto; line-height: 1.3; }
.login__account-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login__account-email { color: var(--text-muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.login__switch {
  flex: none;
  min-block-size: 36px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--accent);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
html[data-design="etched"] .login__switch { background: var(--surface-strong); }

/* ---- The form ------------------------------------------------------------- */

.login__form { display: flex; flex-direction: column; gap: 14px; }
.login__form .field { margin: 0; gap: 6px; }
.login__form .field-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); }
.login__input { min-block-size: 50px; font-size: 1rem; text-align: start; }
.login__input[dir="ltr"] { text-align: left; }
.login__input::placeholder { color: color-mix(in srgb, var(--text-muted) 70%, transparent); }
.login__input[aria-invalid="true"],
.login__password.is-invalid .login__input { box-shadow: inset 0 0 0 1.5px var(--neg); }

/* Kept in the form for password managers; not drawn. */
.login__visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.login__field-error { margin: 2px 0 0; color: var(--neg); font-size: 0.8125rem; }
.login__caps { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--amber); font-size: 0.8125rem; font-weight: 600; }
.login__caps-icon { inline-size: 15px; block-size: 15px; }

.login__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--neg) 10%, transparent);
  color: var(--neg);
  font-size: 0.875rem;
  line-height: 1.45;
}
.login__error[hidden] { display: none; }
.login__error-icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
/* reset-password.js still draws a plain <p class="login__error">. */
p.login__error { display: block; text-align: center; background: none; padding: 0; }

.login__submit { min-block-size: 52px; margin-block-start: 2px; font-size: 1.0625rem; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.login__submit.is-busy { cursor: progress; opacity: 0.92; }
.login__spinner {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-block-start-color: var(--on-accent);
  animation: login-spin 0.75s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.login__hint { margin: 0; color: var(--text-muted); font-size: 0.875rem; text-align: center; }

/* Under the button: "שכחתי סיסמה" / "חזרה לכניסה". */
.login__links { display: flex; justify-content: center; margin-block-start: -4px; }
.login__link {
  min-block-size: 44px;
  padding-inline: 10px;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.login__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.login__resend { min-block-size: 46px; }

/* The password field's own show/hide toggle, inside the field. */
.login__password { position: relative; }
/* The input is LTR (passwords are), the page RTL: physical sides, eye on the left. */
.login__password-input { padding-left: 50px; padding-right: 16px; }
.login__password-toggle {
  position: absolute;
  left: 4px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 42px;
  block-size: 42px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.login__password-toggle:hover { color: var(--text); }
.login__password-toggle svg { inline-size: 20px; block-size: 20px; }

/* ---- Under the card -------------------------------------------------------- */

.login__foot { text-align: center; color: var(--text-muted); font-size: 0.8125rem; line-height: 1.6; }
.login__foot p { margin: 0; }
.login__foot-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.login__offline {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-strong);
  box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
  font-size: 0.8125rem;
  color: var(--text);
}
.login__offline[hidden] { display: none; }
.login__offline-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-muted); }

/* ---- Computer: the app beside the card ----------------------------------- */

.login__aside { display: none; }
@media (min-width: 960px) {
  .login__aside {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-inline-size: 380px;
  }
  .login__aside-logo { inline-size: 132px; aspect-ratio: 363.9 / 141.2; }
  .login__aside-title { margin: 0; font-size: 2.125rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
  html[data-design="etched"] .login__aside-title { font-family: "Heebo", system-ui, sans-serif; font-weight: 300; font-size: 2.5rem; }
  .login__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .login__feature { display: flex; align-items: flex-start; gap: 14px; }
  .login__feature > span { display: flex; flex-direction: column; gap: 2px; }
  .login__feature strong { font-weight: 600; }
  .login__feature span span { color: var(--text-muted); font-size: 0.9375rem; }
  .login__feature-icon {
    flex: none;
    inline-size: 42px;
    block-size: 42px;
    padding: 10px;
    border-radius: 14px;
    background: var(--surface-strong);
    box-shadow: inset 0 0 0 1px var(--border), var(--shadow-sm);
    color: var(--accent);
  }
  html[data-design="etched"] .login__feature-icon { outline: 1px solid var(--etch); outline-offset: -4px; }
  .login__card { padding: 38px 32px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .login__card.is-shaking { animation: none; }
  .login__spinner { animation-duration: 2s; }
}

/* On a computer the side already shows the lockup; the card keeps only its title. */
@media (min-width: 960px) {
  .login__page:has(.login__aside) .login__title { display: none; }
  .login__page:has(.login__aside) .login__greeting--plain { margin-block-start: 0; font-size: 1.625rem; }
}

/* `tally:signup` — "הרשמה" / "מה זה Tally?" inside the footer's sentence. */
.login__link--inline { min-block-size: 32px; padding-inline: 2px; font-size: inherit; }