/* ==========================================================================
   CrysMed backend — small additions on top of version2's auth.css/dashboard.css
   for pieces the approved design didn't have yet (OTP/MFA entry, status
   checklists, inline alerts, "under development" tags). Same tokens, same
   look — nothing here overrides the client-approved files, it only adds
   what phase 0's real backend needed and the design didn't cover.
   ========================================================================== */

.otp-input {
  font-size: var(--fs-lg);
  letter-spacing: .35em;
  text-align: center;
  font-weight: var(--fw-bold);
}

.form-alert {
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-3);
}
.form-alert--error { background: #fdecec; color: #b42318; }
.form-alert--success { background: var(--brand-tint); color: var(--success); }
/* Real bug fix, 2026-09-16 — a link inside one of these boxes was invisible as a link: main.css's
   global `a { color: inherit; text-decoration: none; }` reset left it the exact same color as the
   surrounding text with no underline, so "Verify your account now" on the login page just read as
   part of the sentence with nothing to click. Underline + bold signal it's interactive without
   fighting the alert's own color scheme. */
.form-alert a { text-decoration: underline; font-weight: var(--fw-bold); }
.form-alert a:hover { text-decoration-thickness: 2px; }

.status-checklist { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) 0; }
.status-checklist__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--ink-700);
}
.status-checklist__icon {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: var(--fw-bold);
}
.status-checklist__item.is-done .status-checklist__icon { background: var(--brand-tint); color: var(--success); }
.status-checklist__item.is-pending .status-checklist__icon { background: var(--surface); color: var(--ink-500); }
.status-checklist__item.is-done b { color: var(--ink-900); }

.dev-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); color: var(--ink-500);
  font-size: .625rem; font-weight: var(--fw-bold);
  padding: 2px 8px; border-radius: var(--r-full);
  border: 1px dashed var(--line-strong);
  cursor: help;
}

.dev-totp-banner {
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  text-align: center; background: var(--surface);
}
.dev-totp-banner__code {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  letter-spacing: .35em; margin-top: var(--sp-2);
}
.dev-totp-banner__hint { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-1); }
/* Email-link variant (2026-09-04) — same banner, but for a clickable verification link instead
   of a numeric code, so it needs normal letter-spacing/weight rather than __code's spaced-out
   digit styling. */
.dev-totp-banner__link {
  display: inline-block;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  margin-top: var(--sp-2); color: var(--brand-700);
  word-break: break-all;
}
.dev-totp-banner__link:hover { color: var(--brand-900); }

.dash-panel--dev { position: relative; }
.dash-panel--dev .dash-panel__head { opacity: .8; }
.dash-panel--dev table { opacity: .55; pointer-events: none; }

.link-button {
  background: none; border: none; padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; font-weight: var(--fw-bold);
  color: var(--brand-700); text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--brand-900); }
.link-button:disabled { color: var(--ink-300); cursor: default; text-decoration: none; }

.otp-auth-uri {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--ink-700);
}