/**
 * Atelier — Login (T21) / Register (T22) / Password Reset (T23).
 * Source: design/store-theme/01-atelier-fashion/pages/T21 Login.dc.html
 */
.atl-auth { max-width: 1060px; margin: 0 auto; padding: 48px 24px 0; }
.atl-auth-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 36px; text-wrap: balance; text-align: center; }

.atl-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.atl-auth-card {
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.atl-auth-card--accent { background: color-mix(in oklab, var(--atl-accent) 6%, var(--atl-surface)); }
.atl-auth-card-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 20px; text-wrap: balance; }
.atl-auth-card-body { font-size: 14px; color: var(--atl-text-muted); margin: 0; line-height: 1.6; }

.atl-field { display: flex; flex-direction: column; gap: 6px; }
.atl-field-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-text-muted); }

.atl-auth-row { display: flex; justify-content: space-between; align-items: center; }
.atl-auth-remember { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--atl-text-muted); }
.atl-auth-remember input { accent-color: var(--atl-accent); }
.atl-auth-forgot { font-size: 13px; color: var(--atl-accent); text-decoration: none; }

.atl-auth-benefits { display: flex; flex-direction: column; gap: 10px; }
.atl-auth-benefit { font-size: 13.5px; color: var(--atl-text-subtle); }

.atl-auth-states { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.atl-auth-state { border: 1px solid; padding: 13px 18px; font-size: 13px; }
.atl-auth-state--warning { border-color: var(--atl-warning); color: var(--atl-warning); }
.atl-auth-state--warning a { color: inherit; }
.atl-auth-state--success { border-color: var(--atl-accent); color: var(--atl-accent); }

/* T22 Register */
.atl-auth-narrow { max-width: 720px; }
.atl-auth-form {
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  padding: 32px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.atl-auth-section-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-text-muted); }
.atl-auth-section-label--spaced { margin-top: 8px; }
.atl-auth-subscribe { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--atl-text-muted); }
.atl-auth-subscribe input { accent-color: var(--atl-accent); }

.atl-auth-strength { display: flex; gap: 6px; align-items: center; }
.atl-auth-strength-track { flex: 1; height: 6px; border-radius: 99px; background: var(--atl-border); }
.atl-auth-strength-fill { height: 100%; border-radius: 99px; background: var(--atl-accent); }
.atl-auth-strength-label { font-size: 12px; color: var(--atl-text-muted); }

.atl-auth-signin-hint { font-size: 13px; color: var(--atl-text-muted); }
.atl-auth-signin-hint a { color: var(--atl-accent); }

.atl-auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 767px) {
  .atl-auth { padding: 32px 20px 0; }
  .atl-auth-title { font-size: 28px; }
  .atl-auth-grid, .atl-auth-states, .atl-auth-row-2 { grid-template-columns: 1fr; }
  .atl-auth-form { padding: 24px 20px; }
}

/* T23 Password Reset */
.atl-auth-narrowest { max-width: 480px; padding-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.atl-auth-panel { background: var(--atl-surface); border: 1px solid var(--atl-border); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.atl-auth-panel-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 24px; text-wrap: balance; }
.atl-auth-panel-title--sub { font-size: 20px; }
.atl-auth-panel-body { font-size: 13.5px; color: var(--atl-text-muted); margin: 0; line-height: 1.6; }
.atl-auth-back { font-size: 13px; color: var(--atl-accent); text-decoration: none; text-align: center; }