/* ============================================================
   StorageStack Manage — auth screens (login + set-password)
   Built on css/tokens.css. Standalone full-page screens, not the
   app shell. Keep login.html and set-password.html visually identical.
   ============================================================ */

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background:
    radial-gradient(120% 90% at 50% -10%, #FFFAF0 0%, var(--ss-cream) 46%, #FBE9CC 100%);
}

.auth { width: 100%; max-width: 440px; }

.auth__card {
  background: var(--ss-paper);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6) var(--space-6);
}

/* Brand lockup */
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-6); }
.brand img { width: 26px; height: 26px; display: block; }
.brand__word { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.brand__word .a { color: var(--ss-ink); }
.brand__word .b { color: var(--ss-sunset); }
.brand__tag {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ss-iris);
  background: var(--color-state-info-bg);
  padding: 4px 10px; border-radius: var(--radius-pill);
}

.auth h1 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.auth__sub { color: var(--color-text-secondary); font-size: var(--text-body); margin-top: 6px; }

.auth__form { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

/* Password field with reveal toggle */
.pw { position: relative; }
.pw .input { padding-right: 48px; }
.pw__toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 32px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.pw__toggle:hover { background: var(--color-action-ghost-hover); color: var(--ss-ink); }
.pw__toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.field__row a { font-size: var(--text-small); font-weight: 600; cursor: pointer; }

.auth__submit { width: 100%; margin-top: var(--space-2); }

/* Status lines */
.auth__err { min-height: 18px; font-size: var(--text-small); color: var(--color-state-danger); }
.auth__note { min-height: 18px; font-size: var(--text-small); color: var(--color-text-secondary); text-align: center; }

.auth__foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-default);
  text-align: center;
}
.auth__foot p { font-size: var(--text-small); color: var(--color-text-secondary); }

.auth__legal {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}