/* Account pages (log in, register, reset, account) and one-message notices.
   Builds on contact.css for the summary, consent and honeypot. Tokens only. */

.srv-auth__inner { max-width: calc(var(--content-width) * 0.5 + var(--gutter) * 2); }
.srv-auth__title { margin-top: var(--space-4); }
.srv-auth__card { margin-top: var(--space-8); }
.srv-auth__intro { color: var(--ink-soft); }
.srv-auth__intro + .srv-contact__summary, .srv-auth__intro + form { margin-top: var(--space-2); }
.srv-auth__form .srv-field:first-of-type { margin-top: var(--space-4); }
.srv-auth__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.srv-auth__link { color: var(--accent); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-auth__alt { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font: 400 var(--text-body-sm) var(--font-sans); }
.srv-auth__alt a { color: var(--accent); }

.srv-auth__notice { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); color: var(--ink); }
.srv-auth__notice svg { flex-shrink: 0; width: var(--space-6); height: var(--space-6); color: var(--success); }

.srv-auth__details { margin: 0; }
.srv-auth__details > div { display: grid; grid-template-columns: calc(var(--space-32) + var(--space-4)) 1fr; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.srv-auth__details > div:first-child { padding-top: 0; }
.srv-auth__details dt { color: var(--ink-muted); font: 600 var(--text-overline) var(--font-sans); letter-spacing: var(--tracking-overline); text-transform: uppercase; padding-top: var(--space-1); }
.srv-auth__details dd { margin: 0; overflow-wrap: anywhere; }
.srv-auth__details + .srv-auth__intro { margin-top: var(--space-6); }
.srv-auth__status { display: inline-flex; align-items: center; gap: var(--space-2); }
.srv-auth__status svg { width: var(--space-4); height: var(--space-4); }
.srv-auth__status--ok svg { color: var(--success); }
.srv-auth__status--warn svg { color: var(--warning); }
.srv-auth__logout { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* "Email is not configured yet" banner above a form */
.srv-auth__banner { margin-block: var(--space-4); }

/* Quiet text button (log out, comment actions) */
.srv-auth__textbtn, .srv-textbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: 500 var(--text-label) var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.srv-auth__textbtn:hover, .srv-textbtn:hover { color: var(--accent); }
.srv-auth__textbtn svg, .srv-textbtn svg { width: var(--space-4); height: var(--space-4); }

/* Password strength hint: the bar grows with transform only. */
.srv-strength { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.srv-strength[hidden] { display: none; }
.srv-strength__track { flex: 1; height: var(--space-1); overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-raised); }
.srv-strength__bar { display: block; height: 100%; background: var(--danger); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-reveal); }
.srv-strength[data-level="2"] .srv-strength__bar { background: var(--warning); }
.srv-strength[data-level="3"] .srv-strength__bar,
.srv-strength[data-level="4"] .srv-strength__bar { background: var(--success); }
.srv-strength__text { min-width: calc(var(--space-24) + var(--space-4)); color: var(--ink-soft); font: 400 var(--text-caption) var(--font-sans); text-align: right; }

/* Notice pages */
.srv-notice { display: flex; align-items: flex-start; gap: var(--space-3); }
.srv-notice__icon svg { width: var(--space-6); height: var(--space-6); margin-top: var(--space-1); }
.srv-notice--ok .srv-notice__icon { color: var(--success); }
.srv-notice--error .srv-notice__icon { color: var(--danger); }

@media (max-width: 767px) {
  .srv-auth__details > div { grid-template-columns: 1fr; gap: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
  .srv-strength__bar { transition: none; }
}
.srv-new__eyebrow { display: table; margin-top: var(--space-6); }

/* Password show/hide: eye button inside the field, a full-size tap target. */
.srv-pw { position: relative; margin-top: var(--space-2); }
.srv-pw .srv-field__input { margin-top: 0; padding-right: calc(var(--btn-height) + var(--space-1)); }
.srv-pw__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  display: inline-grid;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--dur-fast);
}
.srv-pw__toggle[hidden], .srv-pw__icon[hidden] { display: none; }
.srv-pw__toggle:hover, .srv-pw__toggle[aria-pressed="true"] { color: var(--accent); }
.srv-pw__icon svg { display: block; width: var(--space-6); height: var(--space-6); }