/*
  Minimal styles for the ASP.NET Core Identity pages (static SSR) that still use the template's
  Bootstrap class names. Replaced once the account pages are redesigned and localized.
*/

.row { display: flex; flex-direction: column; gap: var(--space-5); }
.col-lg-3, .col-lg-4, .col-lg-6, .col-lg-9, .col-md-4, .col-md-6, .col-xl-6 { width: 100%; }

/* Only unclassed elements: the Identity templates use them, the app's own components never do. */
main h1:not([class]) { font-size: 2rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; margin-bottom: var(--space-4); }
main h2:not([class]) { font-size: 1.1rem; font-weight: 650; margin-bottom: var(--space-3); }
main h3:not([class]) { font-size: 1rem; font-weight: 650; margin: var(--space-4) 0 var(--space-2); }
main hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
main section:not([class]), main form:not([class]) { display: flex; flex-direction: column; }

.mb-3 { margin-bottom: var(--space-4); }
.w-100 { width: 100%; }

.form-floating { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.form-floating > label, .form-label { font-size: .85rem; font-weight: 600; color: var(--text-muted); }

.form-control {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
}
.form-control::placeholder { color: transparent; }
.form-control:focus { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent); border-color: var(--focus); }

.checkbox label, .form-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); }
.form-check-input { width: 20px; height: 20px; accent-color: var(--accent); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 var(--space-5);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.btn:focus-visible { outline-offset: 3px; }
.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn-link { border: 0; background: none; padding: 0; color: var(--accent); min-height: auto; }
.btn-lg { min-height: 52px; }

.text-danger, .validation-message { color: var(--danger); font-size: .9rem; }
.validation-summary-errors ul, ul.text-danger { margin: 0; padding-left: var(--space-4); }

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.alert-danger { color: var(--danger); }
.alert-success { color: var(--text); }

/* Plain text links of the Identity pages only; app components style their own links. */
main p > a:not([class]), main form a:not([class]) { color: var(--accent); }

.nav.nav-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.nav-pills .nav-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 var(--space-4);
  border-radius: 999px;
  background: var(--surface-2);
  text-decoration: none;
  font-size: .9rem;
}
.nav-pills .nav-link.active { background: var(--accent); color: var(--accent-contrast); }

/* ---------- Sign-in, registration and password pages (0.9.2, AuthCard) ---------- */

.auth {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding-top: clamp(0px, 3vh, var(--space-6));
}
.auth__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5) var(--space-5);
  overflow: hidden;
}
/* The one brand accent of the card: a thin gradient line along the top edge. */
.auth__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-gradient);
}
.auth__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.auth__icon--success { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); }
.auth__icon--error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
.auth__title { font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; outline: none; }
.auth__lead { margin-top: calc(-1 * var(--space-2)); color: var(--text-muted); }
.auth__text { color: var(--text); }
.auth__email {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  font-weight: 650;
  overflow-wrap: anywhere;
}
.auth__form { gap: var(--space-4); }
.auth__submit, .auth__cta { width: 100%; min-height: 52px; }
.auth__remember { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: .95rem; }
.auth__remember input { width: 20px; height: 20px; accent-color: var(--accent); }
.auth__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: .85rem; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth__secondary { align-self: center; }
.auth__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-2); }
.auth .status p + p { margin-top: var(--space-1); }
.auth .status a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  .auth__card { padding: var(--space-5) var(--space-4) var(--space-4); }
  .auth__title { font-size: 1.5rem; }
}

/* ---------- Provider sign-in (0.9.9) ---------- */

.auth__providers { display: flex; flex-direction: column; gap: var(--space-3); }
.auth__provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-5);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}
.auth__provider:focus-visible { outline-offset: 3px; }
/* Provider branding: Google light #FFF/#747775/#1F1F1F, dark #131314/#8E918F/#E3E3E3; Facebook blue #0866FF (white text 4.8:1). */
.auth__provider--google { background: #fff; color: #1f1f1f; border: 1px solid #747775; }
.auth__provider--google:hover { background: #f2f2f2; }
.auth__provider--facebook { background: #0866ff; color: #fff; border: 1px solid #0866ff; }
.auth__provider--facebook:hover { background: #0757d9; border-color: #0757d9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth__provider--google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
  :root:not([data-theme="light"]) .auth__provider--google:hover { background: #202124; }
}
:root[data-theme="dark"] .auth__provider--google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
:root[data-theme="dark"] .auth__provider--google:hover { background: #202124; }

.sign-in-methods { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sign-in-method {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
}
.sign-in-method + .sign-in-method { border-top: 1px solid var(--line); }
.sign-in-method__icon { display: grid; place-items: center; color: var(--text-muted); }
.sign-in-method__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sign-in-method__name { font-weight: 650; }
.sign-in-method__action { min-height: 44px; padding: 0 var(--space-4); }
.sign-in-method__action:disabled { opacity: .55; cursor: not-allowed; }
.sign-in-method--flush { padding: 0; min-height: 52px; }

/* Two-factor (0.9.15): QR on a fixed white ground in both themes so every scanner reads it. */
.status--success { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent); }
.authenticator-qr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0; }
.authenticator-qr__code { width: min(220px, 100%); padding: var(--space-2); background: #fff; border-radius: var(--radius-m); border: 1px solid var(--line); }
.authenticator-qr__code svg { display: block; width: 100%; height: auto; }
.authenticator-key, .recovery-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  user-select: all;
}
.authenticator-key { display: inline-block; padding: var(--space-2) var(--space-3); background: var(--surface-2); border-radius: var(--radius-s, 8px); }
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: var(--space-4);
  list-style: none;
  background: var(--surface-2);
  border-radius: var(--radius-m);
  line-height: 1.8;
}
.recovery-codes code { font: inherit; }
.input--code { font-size: 1.25rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; max-width: 14rem; }

.legal__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.legal__card h2 { margin: var(--space-3) 0 0; font-size: 1.05rem; font-weight: 650; }
.legal__card h2:first-child { margin-top: 0; }
.legal__card ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-1); }

/* Terms, age 15+ and health-data consent (0.9.17, #053/#054) */
.auth__brand { display: flex; justify-content: center; padding-bottom: var(--space-2); }
.auth__consents { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.auth__consent { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap); font-size: .95rem; line-height: 1.45; cursor: pointer; }
.auth__consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.auth__consent input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.auth__consent--nested { padding-left: calc(20px + var(--space-3)); }
.auth__consent-optional { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.auth__consent-caption { margin: 0; font-size: .8rem; color: var(--text-muted); }
.auth__consent--quiet { font-size: .875rem; color: var(--text-muted); }
.auth__decision { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-4); min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.auth__decision legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-1); font-weight: 650; }
.auth__decision legend + * { clear: both; }
.auth__decision p { margin: 0; }
.auth__inline-form { display: inline; margin: 0; }
.auth__inline-form button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.consent-box { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.consent-box h2, .consent-box h3 { margin: 0; font-size: 1rem; font-weight: 650; }
.health-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.health-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; }
.health-list input { width: 20px; height: 20px; margin: 0; accent-color: var(--danger); }
.health-list__meta { color: var(--text-muted); font-size: .9rem; }
.health-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Beta request (#057) and feedback (#004), 0.9.20 */
.beta-criteria { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); font-size: .92rem; line-height: 1.5; }
.beta-criteria p { margin: 0; }
.beta-criteria__title { margin: 0; font-size: 1rem; font-weight: 650; }
.beta-criteria__list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-1); }
.feedback-form { display: flex; flex-direction: column; gap: var(--space-3); }
.feedback-kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.feedback-kinds legend { width: 100%; padding: 0; margin: 0 0 var(--space-1); font-weight: 600; }
.feedback-kind { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.feedback-kind:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight: 600; }
.feedback-kind:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.feedback-kind input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.feedback-list, .legal__card .feedback-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.feedback-list li + li { border-top: 1px solid var(--line); }
.feedback-list a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; color: inherit; text-decoration: none; }
.feedback-list a:hover .feedback-list__text, .feedback-list a:focus-visible .feedback-list__text { text-decoration: underline; }
.feedback-list__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: .85rem; color: var(--text-muted); }
.feedback-list__text { overflow-wrap: anywhere; }
.feedback-status { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--text); }
.feedback-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Account deletion (0.9.10) */
.danger-zone__action { align-self: flex-start; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.delete-account__provider { width: 100%; gap: var(--space-2); }
.delete-account__group { padding: var(--space-3) 0; }
.delete-account__group + .delete-account__group { border-top: 1px solid var(--line); }
.delete-account__choice { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; font-weight: 600; cursor: pointer; }
.delete-account__choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--danger); }
.delete-account__owner { padding-left: calc(20px + var(--space-3)); }