/* УППС65 — lightweight pre-auth shell.
   Scoped entirely under body.auth-shell / .auth-shell descendants.
   No :root, no bare html/body/a/label/h1-h4, no bare *, no bare :focus-visible,
   no unprefixed --focus. Consumes design-tokens.css primitives/semantics only. */

body.auth-shell {
  --auth-bg: var(--surface-muted);
  --auth-surface: var(--surface);
  --auth-border: var(--border);
  --auth-text: var(--text);
  --auth-muted: var(--text-muted);
  --auth-primary: var(--accent);
  --auth-primary-fg: var(--text-on-accent);
  --auth-success: var(--success-fg);
  --auth-danger: var(--danger-fg);
  --auth-focus: var(--blue-500-a35);
  --auth-radius: var(--radius-lg);
  --auth-radius-sm: var(--radius-md);
  --auth-shadow: var(--shadow-sm);

  margin: 0;
  min-height: 100vh;
  background: var(--auth-bg);
  color: var(--auth-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
}

.auth-shell,
.auth-shell *,
.auth-shell *::before,
.auth-shell *::after {
  box-sizing: border-box;
}

.auth-shell__stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.auth-shell__card {
  width: 100%;
  max-width: 460px;
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  box-shadow: var(--auth-shadow);
  padding: var(--space-6) var(--space-6) var(--space-5);
}

.auth-shell__brand {
  text-align: left;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.auth-shell__brand-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-xl);
  color: var(--auth-text);
  letter-spacing: -0.01em;
}

.auth-shell__brand-subtitle {
  margin-top: var(--space-1);
  font-size: var(--helper-size);
  color: var(--auth-muted);
  line-height: 1.4;
}

.auth-shell .gov-header {
  margin-bottom: var(--space-1);
}

.auth-shell .gov-title {
  font-size: var(--page-title-size);
  font-weight: 700;
  color: var(--auth-text);
  margin: 0;
}

.auth-shell .gov-subtitle {
  color: var(--auth-muted);
  font-size: var(--font-size-md);
  margin: var(--space-1) 0 var(--space-4);
}

.auth-shell a {
  color: var(--auth-primary);
  text-decoration: none;
}
.auth-shell a:hover {
  text-decoration: underline;
}

.auth-shell label {
  display: block;
  font-weight: 600;
  color: var(--auth-text);
  margin-bottom: var(--space-1);
  font-size: var(--label-size);
}

.auth-shell .form-control {
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-sm);
  padding: .55rem .75rem;
  font-size: var(--font-size-md);
  color: var(--auth-text);
  background: var(--auth-surface);
}
.auth-shell .form-control:focus {
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 .2rem var(--auth-focus);
  outline: none;
}

.auth-shell .form-group {
  margin-bottom: var(--space-4);
}

.auth-shell .form-text {
  margin-top: var(--space-1);
  font-size: var(--helper-size);
  color: var(--auth-muted);
}

.auth-shell .btn {
  font-weight: 600;
  border-radius: var(--auth-radius-sm);
}
.auth-shell .btn-primary {
  background-color: var(--auth-primary);
  border-color: var(--auth-primary);
  color: var(--auth-primary-fg);
}
.auth-shell .btn-primary:hover {
  filter: brightness(1.1);
  color: var(--auth-primary-fg);
}
.auth-shell .btn-success {
  background-color: var(--auth-success);
  border-color: var(--auth-success);
}
.auth-shell .btn-link {
  color: var(--auth-muted);
}
.auth-shell .btn-link:hover {
  color: var(--auth-text);
}

.auth-shell .gov-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.auth-shell #auth-messages {
  margin-bottom: var(--space-4);
}

.auth-shell .alert {
  transition: opacity .18s ease, transform .18s ease;
}
.auth-shell .alert.is-leaving {
  opacity: 0;
  transform: translateY(-2px);
}

.auth-shell a:focus-visible,
.auth-shell button:focus-visible,
.auth-shell .form-control:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--auth-focus);
}

@media (max-width: 480px) {
  .auth-shell__stage {
    padding: var(--space-4) var(--space-3);
  }
  .auth-shell__card {
    padding: var(--space-5) var(--space-4) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-shell *,
  .auth-shell *::before,
  .auth-shell *::after {
    transition: none !important;
  }
}

.auth-shell .form-control { min-height: var(--control-height); font: 400 var(--control-text-size)/1.4 var(--font-body); }
.auth-shell .btn { min-height: var(--control-height); padding: 8px 12px; font: 600 var(--button-text-size)/1.2 var(--font-body); }
.auth-shell .btn-primary { background: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-primary-fg); }
.auth-shell .ffs-btn { text-decoration: none; }
.auth-shell .password-field { position: relative; }
.auth-shell .password-field .form-control { padding-right: 90px; }
.auth-shell #togglePass { position: absolute; right: 0; bottom: 0; min-height: var(--control-height); padding: 8px 12px; border-left: 1px solid var(--border); border-radius: 0 var(--control-radius) var(--control-radius) 0; }
.auth-shell .otp-caption, .auth-shell .otp-help, .auth-shell .registration-note { color: var(--text-muted); font: 400 var(--helper-size)/1.4 var(--font-body); }
.auth-shell .otp-group { display: grid; grid-template-columns: repeat(var(--otp-len, 6), minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.auth-shell .otp-input, .auth-shell .otp-group__input { width: 100%; min-width: 0; min-height: var(--control-height); border: 1px solid var(--border); border-radius: var(--control-radius); text-align: center; font: 600 20px/1.3 var(--font-body); background: var(--surface); color: var(--text); }
.auth-shell .otp-help { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
.auth-shell .otp-resend { min-height: var(--control-height); border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface); padding: 8px 12px; color: var(--text); font: 600 var(--button-text-size)/1.2 var(--font-body); }
.auth-shell .registration-link { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.auth-shell .registration-note { display: block; margin-top: var(--space-2); }
.auth-shell .otp-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }