/* ================================================================
   Certifyd redesign — shared tokens and components
   Source of truth: design_handoff_certifyd_redesign/README.md
   (tokens, layout system, status pills, buttons, motion).
   Loaded after the Syncfusion theme and syncfusion-overrides.css so
   these values win; pages not yet redesigned keep working because
   the legacy sf-* utility classes are left in place and only the
   page container is restyled to the new layout.
   ================================================================ */

:root {
  /* Ink and brand blues */
  --cd-ink: #0B1B33;
  --cd-primary: #0A5FAD;
  --cd-primary-hover: #084A8A;
  --cd-primary-deep: #042d6b;
  --cd-primary-darkest: #011c3a;
  --cd-primary-light: #3B82C4;
  --cd-blue-tint: #EEF4FB;
  --cd-row-selected: #F5F9FE;

  /* Accent orange */
  --cd-accent: #FBAD48;
  --cd-accent-dark: #E8952F;
  --cd-accent-tint: #FFF7EB;
  --cd-accent-ink: #B45309;

  /* Slate ramp and surfaces */
  --cd-slate-50: #F8FAFC;
  --cd-slate-100: #F1F5F9;
  --cd-slate-200: #E2E8F0;
  --cd-slate-300: #CBD5E1;
  --cd-slate-400: #94A3B8;
  --cd-slate-500: #64748B;
  --cd-slate-600: #475569;
  --cd-slate-700: #334155;
  --cd-app-bg: #F4F6F9;
  --cd-canvas: #E9EDF2;
  --cd-divider: #EEF2F6;

  /* Semantic */
  --cd-success: #16A34A;
  --cd-success-ink: #15803D;
  --cd-success-tint: #ECFDF3;
  --cd-error: #DC2626;
  --cd-error-ink: #B91C1C;
  --cd-error-tint: #FEF2F2;
  --cd-paper: #FFFDF8;

  /* Type */
  --cd-font: 'Segoe UI Historic', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --cd-font-display: 'Newsreader', Georgia, serif;
  --cd-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Radii */
  --cd-r-chip: 6px;
  --cd-r-input: 8px;
  --cd-r-button: 10px;
  --cd-r-tile: 14px;
  --cd-r-card: 16px;
  --cd-r-dialog: 18px;
  --cd-r-pill: 9999px;

  /* Shadows */
  --cd-shadow-button: 0 4px 14px rgba(10, 95, 173, 0.25);
  --cd-shadow-card-hover: 0 20px 50px rgba(10, 95, 173, 0.14);
  --cd-shadow-tile-hover: 0 8px 24px rgba(10, 95, 173, 0.10);
  --cd-shadow-dialog: 0 30px 80px rgba(0, 0, 0, 0.35);
  --cd-focus-ring: 0 0 0 3px rgba(10, 95, 173, 0.12);

  /* Motion: 150ms hovers, 220ms lifts/collapse, 400ms progress bars; no bounce */
  --cd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cd-t-hover: 150ms ease;
  --cd-t-lift: 220ms var(--cd-ease);
  --cd-t-progress: 400ms var(--cd-ease);

  /* Re-point the Syncfusion primary at the new brand blue so untouched
     Syncfusion components (grids, dialogs, buttons) match the redesign. */
  --color-sf-primary: #0A5FAD;
  --color-sf-primary-text-color: #FFFFFF;
}

html, body {
  /* The shell is exactly one viewport tall; the browser's default 8px body margin would add a
     second, page-level scrollbar around it. */
  margin: 0;
  font-family: var(--cd-font);
  color: var(--cd-ink);
  background: var(--cd-app-bg);
}

/* ---------- Page container (README "Page container") ----------
   Legacy pages wrap themselves in .sf-container-xl; inside the new shell
   that wrapper becomes the redesign container so every page gets the new
   rhythm before it is individually rebuilt. */
.cd-page,
.cd-main .sf-container-xl {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 48px) 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- Page header ---------- */
.cd-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cd-page-header__titles {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cd-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cd-accent-dark);
}

.cd-h1 {
  margin: 0;
  font-family: var(--cd-font-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--cd-ink);
}

.cd-page-header__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.cd-subtitle {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  color: var(--cd-slate-500);
}

/* ---------- Buttons ---------- */
.cd-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: var(--cd-r-button);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--cd-t-hover), border-color var(--cd-t-hover), color var(--cd-t-hover);
}

.cd-btn--primary {
  background: var(--cd-primary);
  color: #FFFFFF;
  box-shadow: var(--cd-shadow-button);
}

.cd-btn--primary:hover,
.cd-btn--primary:focus-visible {
  background: var(--cd-primary-hover);
  color: #FFFFFF;
}

.cd-btn--secondary {
  background: #FFFFFF;
  color: var(--cd-ink);
  border-color: var(--cd-slate-200);
}

.cd-btn--secondary:hover {
  border-color: var(--cd-slate-300);
  color: var(--cd-ink);
}

.cd-btn:focus-visible {
  outline: none;
  box-shadow: var(--cd-focus-ring);
}

/* ---------- Cards ---------- */
.cd-card {
  background: #FFFFFF;
  border: 1px solid var(--cd-slate-200);
  border-radius: var(--cd-r-card);
}

.cd-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cd-divider);
}

.cd-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cd-ink);
}

.cd-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--cd-primary);
  text-decoration: none;
}

.cd-link:hover {
  color: var(--cd-primary-hover);
}

.cd-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cd-slate-400);
}

.cd-display-number {
  font-family: var(--cd-font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--cd-ink);
}

/* ---------- Status pills (README "Status pills") ---------- */
.cd-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--cd-r-pill);
  white-space: nowrap;
}

.cd-pill--success { background: var(--cd-success-tint); color: var(--cd-success-ink); } /* Active / Viewed / Complete */
.cd-pill--info    { background: var(--cd-blue-tint);    color: var(--cd-primary); }     /* Sent / Issuing */
.cd-pill--warning { background: var(--cd-accent-tint);  color: var(--cd-accent-ink); }  /* Draft / Upcoming / Expired */
.cd-pill--neutral { background: var(--cd-slate-100);    color: var(--cd-slate-500); }   /* Generated / Archived / Not issued */
.cd-pill--danger  { background: var(--cd-error-tint);   color: var(--cd-error-ink); }   /* Revoked / Bounced / No email */

/* ---------- Progress bar ---------- */
.cd-progress {
  display: block;
  height: 4px;
  border-radius: var(--cd-r-pill);
  background: var(--cd-divider);
  overflow: hidden;
}

.cd-progress__fill {
  display: block;
  height: 100%;
  background: var(--cd-primary);
  border-radius: var(--cd-r-pill);
  transition: width var(--cd-t-progress);
}

/* ---------- Empty state ---------- */
.cd-empty {
  padding: 28px 22px;
  font-size: 14px;
  color: var(--cd-slate-500);
}

/* ================================================================
   Shared building blocks for list, detail and dialog screens
   (README "Cards", "Buttons", "Dialogs"; App - Events / Dialogs designs).
   Pages compose these; page-specific layout lives in scoped .razor.css.
   ================================================================ */

/* ---------- Button sizes and variants ---------- */
.cd-btn--sm { height: 40px; padding: 0 16px; border-radius: 9px; }
.cd-btn--danger { background: #FFFFFF; color: var(--cd-error-ink); border-color: #FECACA; }
.cd-btn--danger:hover { background: var(--cd-error-tint); color: var(--cd-error-ink); }
.cd-btn--danger-solid { background: var(--cd-error); color: #FFFFFF; }
.cd-btn--danger-solid:hover { background: var(--cd-error-ink); color: #FFFFFF; }
/* On navy/blue surfaces the call to action is orange with ink text (README "Buttons"). */
.cd-btn--accent { background: var(--cd-accent); color: var(--cd-ink); }
.cd-btn--accent:hover { background: var(--cd-accent-dark); color: var(--cd-ink); }
.cd-btn:disabled,
.cd-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ---------- Toolbar: segmented filter + search ---------- */
.cd-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cd-segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #FFFFFF;
  border: 1px solid var(--cd-slate-200);
  border-radius: 10px;
}

.cd-segmented__option {
  border: none;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  background: transparent;
  color: var(--cd-slate-600);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background var(--cd-t-hover), color var(--cd-t-hover);
}

.cd-segmented__option:hover { color: var(--cd-ink); }

.cd-segmented__option.is-active {
  background: var(--cd-ink);
  color: #FFFFFF;
  font-weight: 700;
}

.cd-segmented__count { font-size: 11px; opacity: 0.6; }

.cd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid var(--cd-slate-200);
  border-radius: 10px;
  min-width: 260px;
  color: var(--cd-slate-400);
}

.cd-search:focus-within {
  border: 1.5px solid var(--cd-primary);
  box-shadow: var(--cd-focus-ring);
}

.cd-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--cd-ink);
}

.cd-search input::placeholder { color: var(--cd-slate-400); }

/* ---------- List table (header 40px, rows 52-56px) ----------
   Columns come from the page: style="--cd-cols: 64px minmax(0,2fr) 150px 120px". */
.cd-table {
  background: #FFFFFF;
  border: 1px solid var(--cd-slate-200);
  border-radius: var(--cd-r-card);
  overflow: hidden;
}

.cd-table__head,
.cd-table__row {
  display: grid;
  grid-template-columns: var(--cd-cols, 1fr);
  gap: 16px;
  align-items: center;
  padding: 0 22px;
}

.cd-table__head {
  height: 40px;
  background: var(--cd-slate-50);
  border-bottom: 1px solid var(--cd-divider);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-slate-400);
}

.cd-table__row {
  min-height: 52px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cd-slate-100);
  color: var(--cd-ink);
  text-decoration: none;
  transition: background var(--cd-t-hover);
}

.cd-table__row:last-child { border-bottom: none; }
a.cd-table__row,
.cd-table__row--clickable { cursor: pointer; }
a.cd-table__row:hover,
.cd-table__row--clickable:hover { background: var(--cd-slate-50); color: var(--cd-ink); }
.cd-table__row.is-selected { background: var(--cd-row-selected); }

.cd-cell-primary { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-cell-secondary { font-size: 12px; color: var(--cd-slate-500); }
.cd-cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Calendar date tile used in event lists (month over day). */
.cd-date-tile {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--cd-app-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cd-date-tile__month { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--cd-accent-dark); }
.cd-date-tile__day { font-family: var(--cd-font-display); font-size: 22px; margin-top: 3px; }

/* ---------- Detail header band with back link and tabs ---------- */
.cd-detail-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--cd-slate-200);
}

.cd-detail-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 48px) 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cd-slate-500);
  text-decoration: none;
  width: max-content;
}
.cd-back:hover { color: var(--cd-primary); }

.cd-h1--detail { font-size: 40px; }

.cd-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--cd-slate-600);
}
.cd-meta__item { display: inline-flex; align-items: center; gap: 6px; }

.cd-tabs { display: flex; gap: 28px; }

.cd-tab {
  border: none;
  background: transparent;
  padding: 12px 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--cd-slate-500);
  box-shadow: inset 0 -2px 0 transparent;
  display: flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}
.cd-tab:hover { color: var(--cd-ink); }
.cd-tab.is-active { color: var(--cd-primary); box-shadow: inset 0 -2px 0 var(--cd-primary); }
.cd-tab__count { font-size: 11px; padding: 1px 7px; border-radius: var(--cd-r-pill); background: var(--cd-slate-100); color: var(--cd-slate-500); }

/* ---------- Forms ---------- */
.cd-field { display: flex; flex-direction: column; gap: 6px; }
.cd-field__label { font-size: 13px; color: var(--cd-slate-600); }
.cd-field__hint { font-size: 12px; color: var(--cd-slate-500); }
.cd-field__error { font-size: 12px; color: var(--cd-error-ink); }
.cd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cd-input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--cd-slate-200);
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  color: var(--cd-ink);
  background: #FFFFFF;
  outline: none;
  transition: border-color var(--cd-t-hover), box-shadow var(--cd-t-hover);
}
textarea.cd-input { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
.cd-input:focus { border: 1.5px solid var(--cd-primary); box-shadow: var(--cd-focus-ring); }
.cd-input.is-invalid,
.cd-field.is-invalid .cd-input { border: 1.5px solid var(--cd-error); }

/* Syncfusion inputs (SfTextBox, SfDropDownList, SfDatePicker, SfNumericTextBox) restyled to the
   same spec wherever they appear inside the new shell or a redesigned dialog. */
.cd-main .e-input-group:not(.e-float-icon-left),
.cd-dialog .e-input-group:not(.e-float-icon-left) {
  min-height: 42px;
  border: 1px solid var(--cd-slate-200) !important;
  border-radius: 9px !important;
  background: #FFFFFF;
  box-shadow: none;
}
.cd-main .e-input-group.e-input-focus,
.cd-dialog .e-input-group.e-input-focus {
  border: 1.5px solid var(--cd-primary) !important;
  box-shadow: var(--cd-focus-ring) !important;
}
.cd-main .e-input-group::before, .cd-main .e-input-group::after,
.cd-dialog .e-input-group::before, .cd-dialog .e-input-group::after { display: none; }
.cd-main .e-input-group input.e-input,
.cd-dialog .e-input-group input.e-input { font-family: inherit; font-size: 14px; color: var(--cd-ink); }

/* ---------- Dialogs (SfDialog with CssClass="cd-dialog") ---------- */
.e-dialog.cd-dialog {
  border: none;
  border-radius: var(--cd-r-dialog);
  box-shadow: var(--cd-shadow-dialog);
  overflow: hidden;
  font-family: var(--cd-font);
  color: var(--cd-ink);
}
.e-dialog.cd-dialog .e-dlg-header-content {
  padding: 22px 24px 6px;
  border: none;
  background: #FFFFFF;
}
.e-dialog.cd-dialog .e-dlg-header,
.cd-dialog__title {
  font-family: var(--cd-font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: var(--cd-ink);
}
.cd-dialog__subtitle { font-size: 13px; color: var(--cd-slate-500); margin-top: 4px; }
.e-dialog.cd-dialog .e-dlg-content { padding: 16px 24px; }
.cd-dialog__body { display: flex; flex-direction: column; gap: 14px; }
.e-dialog.cd-dialog .e-footer-content {
  padding: 14px 24px;
  background: var(--cd-slate-50);
  border-top: 1px solid var(--cd-divider);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.e-dlg-container .e-dlg-overlay { background: rgba(11, 27, 51, 0.45); }

/* Multi-step progress (e.g. CSV import "Step 2 of 3"). */
.cd-steps { display: flex; gap: 6px; }
.cd-steps__bar { flex: 1; height: 4px; border-radius: var(--cd-r-pill); background: var(--cd-slate-200); }
.cd-steps__bar.is-done { background: var(--cd-primary); }

/* ---------- Selection action bar (navy, appears when rows are selected) ---------- */
.cd-actionbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border-radius: 12px;
  background: var(--cd-ink);
  color: #FFFFFF;
  font-size: 14px;
}
.cd-actionbar__count { font-weight: 700; margin-right: auto; }
.cd-actionbar .cd-btn--secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); }
.cd-actionbar .cd-btn--secondary:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }

/* ---------- Misc ---------- */
.cd-mono { font-family: var(--cd-font-mono); font-size: 13px; }
.cd-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .cd-two-col { grid-template-columns: minmax(0, 1fr); } }
.cd-checkbox { width: 16px; height: 16px; accent-color: var(--cd-primary); cursor: pointer; }

/* Generic gray info banner (label + value row), shared by BulkGenerateDialog and the
   "New Bulk Job" dialog on Pages/Certificates/BulkOperations.razor -- both show a
   "N credits / attendees will be used" line with the same look. */
.cd-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--cd-r-input);
  background: var(--cd-slate-50);
  font-size: 13px;
  color: var(--cd-slate-600);
}

/* Checkbox tile grid: a clickable box + label per option, used by the Settings group's
   CreateApiKeyDialog (scopes) and CreateWebhookDialog (event types) -- design's "App -
   Dialogs.dc.html" #create-webhook checklist tiles. Shared here because both dialogs need the
   exact same toggle interaction; each caller supplies its own label font via its own scoped CSS
   (scopes are sans-serif, webhook event names are mono, matching the design for each). */
.cd-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.cd-check-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--cd-slate-200);
  border-radius: var(--cd-r-input);
  cursor: pointer;
  background: #FFFFFF;
  font-size: 13px;
  color: var(--cd-ink);
  text-align: left;
}

.cd-check-tile.is-checked { border-color: var(--cd-primary); background: var(--cd-row-selected); }

.cd-check-tile__box {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--cd-slate-300);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #FFFFFF;
}

/* ================================================================
   Auth screens (Account.dc.html): Sign in, Sign up, Forgot password,
   Access denied, Signed out. README calls out 46px inputs / 48px
   primary buttons here, taller than the 42px app-wide .cd-input /
   .cd-btn defaults. The two-column shell (gradient visual panel, EN/ES
   toggle, footer) is scoped to Layout/AuthLayout.razor.css since only
   that one file renders it; these classes style the *content* each
   anonymous screen puts into @Body, so a screen built later
   (ResetPassword, on a parallel branch) can reuse them without
   duplicating: .cd-auth-card, .cd-auth-header/-title/-subtitle,
   .cd-auth-icon-tile(--info|--danger|--success), .cd-auth-form,
   .cd-input--auth, .cd-btn--auth, .cd-auth-submit, .cd-auth-banner
   (--success|--error), .cd-auth-footer-text, .cd-auth-legal,
   .cd-auth-back-link, .cd-auth-actions.
   ================================================================ */
.cd-auth-card { display: flex; flex-direction: column; gap: 22px; width: 100%; max-width: 400px; }

.cd-auth-header { display: flex; flex-direction: column; gap: 6px; }
.cd-auth-title { margin: 0; font-family: var(--cd-font-display); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--cd-ink); }
.cd-auth-subtitle { margin: 0; font-size: 15px; color: var(--cd-slate-500); line-height: 1.5; }

/* Icon tile above the title on Forgot password / Access denied / Signed out. */
.cd-auth-icon-tile { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.cd-auth-icon-tile--info { background: var(--cd-blue-tint); color: var(--cd-primary); }
.cd-auth-icon-tile--danger { background: var(--cd-error-tint); color: var(--cd-error); }
.cd-auth-icon-tile--success { background: var(--cd-success-tint); color: var(--cd-success-ink); }

/* OAuth buttons (Google; Microsoft omitted -- no provider configured, see report). */
.cd-auth-oauth-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cd-auth-oauth-btn {
  height: 44px; border-radius: 10px; border: 1px solid var(--cd-slate-200); background: #FFFFFF;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--cd-ink);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; transition: border-color var(--cd-t-hover);
}
.cd-auth-oauth-btn:hover { border-color: var(--cd-slate-300); color: var(--cd-ink); }

/* "or with email" divider. */
.cd-auth-divider { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--cd-slate-400); }
.cd-auth-divider__line { flex: 1; height: 1px; background: var(--cd-slate-200); }

.cd-auth-form { display: flex; flex-direction: column; gap: 14px; }
.cd-auth-field-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* Auth-sized input/button variants (README: 46px inputs, 48px primary buttons on auth pages). */
.cd-input--auth { height: 46px; border-radius: 10px; font-size: 15px; }
.cd-btn--auth { height: 48px; border-radius: 10px; font-size: 15px; }
.cd-auth-submit { width: 100%; justify-content: center; }

.cd-auth-check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cd-slate-600); cursor: pointer; }

/* Inline success/error banners (Forgot password confirmation, Login's ?message=/?error= banners). */
.cd-auth-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.cd-auth-banner--success { background: var(--cd-success-tint); color: var(--cd-success-ink); }
.cd-auth-banner--error { background: var(--cd-error-tint); color: var(--cd-error-ink); }
.cd-auth-banner svg { flex: none; margin-top: 1px; }

.cd-auth-footer-text { margin: 0; font-size: 14px; color: var(--cd-slate-500); text-align: center; }
.cd-auth-legal { margin: 0; font-size: 12px; color: var(--cd-slate-400); text-align: center; line-height: 1.5; }
.cd-auth-back-link { font-size: 14px; font-weight: 700; color: var(--cd-primary); text-decoration: none; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.cd-auth-back-link:hover { color: var(--cd-primary-hover); }

/* Two-button rows (Access denied, Logout confirm/signed-out). A <form> wrapping one action
   (Logout's "Sign Out" must stay a real POST) is set to display:contents so its button behaves
   as a direct flex child instead of the form breaking the row. */
.cd-auth-actions { display: flex; gap: 10px; }
.cd-auth-actions form { display: contents; }
.cd-auth-actions .cd-btn { flex: 1; height: 46px; border-radius: 10px; font-size: 14px; justify-content: center; }

.cd-check-tile.is-checked .cd-check-tile__box { background: var(--cd-primary); border-color: var(--cd-primary); }