/* auth.vrhshk.online — surfaces specific to the identity app */

.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-48) 0 var(--space-64);
  flex: 1;
}

.auth-card { width: min(460px, 100%); margin-inline: auto; }
.auth-card .panel { padding: var(--space-40) var(--space-32); }
.auth-head { margin-bottom: var(--space-24); }
.auth-title { margin-top: 10px; }
.auth-sub { margin-top: 10px; }
.auth-foot { margin: var(--space-20) 0 0; text-align: center; }

.stack-20 > * + * { margin-top: var(--space-20); }

/* the primary action reads as the end of the form, not another field */
.auth-card form .btn--primary { margin-top: var(--space-8); }

/* ------------------------------------------------------------- account */
.account-page { width: min(760px, 100%); margin-inline: auto; padding-block: var(--space-32); }
.account-hero { padding: var(--space-24); }
.account-hero .avatar--lg { width: 92px; height: 92px; }

.account-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-width) solid var(--border-default);
  overflow-x: auto;
}
.account-tab {
  padding: 12px 20px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--duration-normal), border-color var(--duration-normal);
}
.account-tab:hover { color: var(--text-accent); }
.account-tab.is-active { color: var(--text-accent); border-bottom-color: var(--accent-primary); }
.account-tab:focus-visible { outline: var(--focus-width) solid var(--border-focus); outline-offset: -2px; }

.avatar-row { gap: var(--space-16); }
.avatar-input { flex: 1 1 220px; min-width: 0; padding: 8px 12px; font-size: var(--text-sm); }
.avatar-input::file-selector-button {
  margin-right: 12px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-primary);
  background: rgba(201,161,95,.08);
  border: var(--border-width) solid var(--border-default);
  border-radius: 0;
  cursor: pointer;
}
.avatar-input::file-selector-button:hover { border-color: var(--border-strong); color: var(--text-accent); }

@media (max-width: 600px) {
  .auth-card .panel { padding: var(--space-32) var(--space-20); }
  .auth-main { padding: var(--space-24) 0 var(--space-40); }
  .account-hero .avatar--lg { width: 68px; height: 68px; }
  .account-tab { padding: 10px 14px; }
}