@font-face {
  font-family: "Charter";
  src: local("Charter"), local("Georgia");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-sans:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Charter", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-0: 1rem;
  --text-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --text-2: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem);
  --text-3: clamp(1.5rem, 1.35rem + 1vw, 2rem);
  --text-4: clamp(1.875rem, 1.6rem + 1.5vw, 2.5rem);
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --color-text-900: #0f1f17;
  --color-text-800: #1c3028;
  --color-text-700: #2c4038;
  --color-text-600: #3e574c;
  --color-text-500: #5a7367;
  --color-text-400: #7a9488;
  --color-text-300: #9bb3a8;
  --color-surface-0: #ffffff;
  --color-surface-50: #f6faf8;
  --color-surface-100: #ecf3ee;
  --color-border-200: #d2e0d9;
  --color-border-300: #b8cec2;

  --color-accent-700: #1a5f3f;
  --color-accent-600: #237a50;
  --color-accent-500: #2f9e6b;
  --color-accent-450: #45ae7e;
  --color-accent-400: #5dbb90;
  --color-accent-100: #d0edde;
  --color-accent-50: #eef7f2;

  --color-danger-700: #903946;
  --color-danger-600: #a84350;
  --color-danger-500: #bc5560;
  --color-danger-450: #c46a74;
  --destructive: #dc2626;

  --color-success-500: #28a55a;
  --color-success-700: #0f5132;
  --color-success-light: #86efac;

  --color-warning-border: #fbbf24;
  --color-warning-bg: #fef3c7;
  --color-warning-fg: #78350f;
  --color-warning-accent: #d97706;

  --color-error-700: #b91c1c;
  --color-error-bg: #f8dbdf;
  --color-error-boundary-bg: #b32121;
  --color-error-boundary-text: #ffffff;

  --auth-page-bg: linear-gradient(180deg, #f4faf6 0%, #eef5f0 48%, #e8f0eb 100%);
  --btn-light-hover-border: #c5d8cc;
  --btn-outline-primary-hover-bg: #ddeee4;
  --btn-outline-primary-active-bg: #d0e6d7;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-card: 0 1px 3px rgba(15, 31, 23, 0.06);
  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.15);

  --color-scrim: rgba(0, 0, 0, 0.5);

  --radius-sm: 0.3rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.9rem;
  --radius-pill: 999px;

  --btn-radius: 0.4rem;
  --btn-height: 2.25rem;
  --btn-padding-x: var(--space-4);
  --btn-border-width: 1px;
  --btn-border-width-strong: 1.5px;
  --btn-font-weight: 580;
  --btn-focus-ring: 0 0 0 3px rgba(47, 158, 107, 0.26);

  --btn-primary-bg: var(--color-accent-600);
  --btn-primary-bg-hover: var(--color-accent-700);
  --btn-primary-bg-active: var(--color-accent-700);
  --btn-primary-fg: var(--color-surface-0);
  --btn-primary-shadow: 0 2px 6px rgba(26, 95, 63, 0.2);

  --btn-secondary-bg: #e4efe8;
  --btn-secondary-bg-hover: #d8e8de;
  --btn-secondary-bg-active: #cee1d6;
  --btn-secondary-border: #cee1d6;
  --btn-secondary-fg: var(--color-text-900);

  --btn-neutral-bg: var(--color-surface-100);
  --btn-neutral-bg-hover: #e2ede7;
  --btn-neutral-bg-active: #d6e5dc;
  --btn-neutral-border: #d2e0d9;
  --btn-neutral-fg: var(--color-text-900);

  --btn-danger-bg: var(--color-danger-500);
  --btn-danger-bg-hover: var(--color-danger-600);
  --btn-danger-bg-active: var(--color-danger-700);
  --btn-danger-fg: var(--color-surface-0);
  --btn-danger-shadow: 0 2px 6px rgba(168, 67, 80, 0.25);

  --form-valid-color: var(--color-success-500);
  --form-invalid-color: var(--color-danger-500);
  --text-muted-color: var(--color-text-500);

  --container-padding: clamp(1rem, 2.3vw, 2rem);
  --container-max-width: 80rem;
  --navbar-height: 0px;

  /* ── Component composition tokens (Tier A: exact-match adoption) ──
     Consume these at the use site instead of hand-tuning padding/gap.
     Values compose from --space-* where they round cleanly; literals
     are called out. */
  --toolbar-padding-y: var(--space-2);       /* 0.5rem */
  --toolbar-padding-x: var(--space-4);       /* 1rem */
  --toolbar-gap: var(--space-3);             /* 0.75rem */
  --pane-label-padding-y: 0.375rem;          /* LITERAL 6px: pane labels sit tighter than toolbars by design */
  --pane-label-padding-x: var(--space-4);    /* 1rem */
  --navbar-padding-y: var(--space-2);        /* 0.5rem */
  --navbar-actions-gap: var(--space-3);      /* 0.75rem */
  --tab-padding-x: var(--space-4);           /* 1rem */
  --section-nav-item-padding-y: 0.4rem;      /* LITERAL 6.4px: --space-2 would bloat rail height */
  --section-nav-item-padding-x: var(--space-3); /* 0.75rem */
  --card-header-padding-y: var(--space-3);   /* 0.75rem */
  --card-header-padding-x: var(--space-4);   /* 1rem */
  --card-body-padding: var(--space-4);       /* 1rem */
  --table-cell-padding-y: var(--space-3);    /* 0.75rem */
  --status-pill-padding-x: var(--space-3);   /* 0.75rem */
  --dialog-padding: var(--space-5);          /* 1.5rem */
  --dialog-content-gap: var(--space-5);      /* 1.5rem between body and actions */
  --dialog-actions-gap: var(--space-2);      /* 0.5rem */
  --tab-padding-y: var(--space-2);           /* 0.5rem */
  --wizard-gap: var(--space-5);              /* 1.5rem */
  --navbar-padding-x: var(--space-5);        /* 1.5rem */
  --empty-padding-y: var(--space-6);         /* 2rem */
  --empty-padding-x: var(--space-5);         /* 1.5rem */
  --upload-padding-y: var(--space-6);        /* 2rem */
  --upload-padding-x: var(--space-5);        /* 1.5rem */
  --results-pane-padding-y: var(--space-5);  /* 1.5rem */
  --results-pane-padding-x: var(--space-5);  /* 1.5rem */
  --results-section-gap: var(--space-6);     /* 2rem */
}

/* ── Theme toggle ────────────────────────────────────────────────────────── */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border-radius: 0.45rem;
  border: 1px solid var(--color-border-200);
  background: var(--color-surface-50);
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--color-text-500);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.theme-toggle-btn:hover {
  color: var(--color-text-700);
  background: var(--color-surface-100);
}

html[data-theme-preference="light"] .theme-toggle-btn[data-theme-value="light"],
html[data-theme-preference="system"] .theme-toggle-btn[data-theme-value="system"],
html[data-theme-preference="dark"] .theme-toggle-btn[data-theme-value="dark"] {
  color: var(--color-text-900);
  background: var(--color-surface-0);
  border-color: var(--color-border-200);
  box-shadow: var(--shadow-card);
}

.theme-toggle-btn svg {
  flex-shrink: 0;
}


/* ── Dark theme ───────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  color-scheme: dark;

  --color-text-900: #f0f5f2;
  --color-text-800: #dce8e0;
  --color-text-700: #c2d4ca;
  --color-text-600: #a8c0b0;
  --color-text-500: #a4bcad;
  --color-text-400: #98b2a2;
  --color-text-300: #527362;

  --color-surface-0: #0a1510;
  --color-surface-50: #12231a;
  --color-surface-100: #1a3025;

  --color-border-200: #233d2e;
  --color-border-300: #335440;

  --color-accent-700: #8fd4ab;
  --color-accent-600: #6dc494;
  --color-accent-500: #4eb37e;
  --color-accent-450: #3da36e;
  --color-accent-400: #2f9360;
  --color-accent-100: #1a3d2a;
  --color-accent-50: #12231a;

  --color-danger-700: #fda4af;
  --color-danger-600: #fb7185;
  --color-danger-500: #f43f5e;
  --color-danger-450: #e11d48;
  --destructive: #f43f5e;

  --color-success-500: #4ade80;
  --color-success-700: #86efac;
  --color-success-light: #86efac;

  --color-warning-border: #854d0e;
  --color-warning-bg: color-mix(in oklab, #ca8a04 16%, transparent);
  --color-warning-fg: #fde68a;
  --color-warning-accent: #d97706;

  --color-error-700: #fb7185;
  --color-error-bg: color-mix(in oklab, var(--destructive) 14%, transparent);
  --color-error-boundary-bg: #7f1d1d;
  --color-error-boundary-text: #fecaca;

  --auth-page-bg: linear-gradient(180deg, #0a1510 0%, #0e1a14 48%, #12231a 100%);
  --btn-light-hover-border: var(--btn-neutral-border);
  --btn-outline-primary-hover-bg: color-mix(in oklab, var(--color-accent-500) 16%, transparent);
  --btn-outline-primary-active-bg: color-mix(in oklab, var(--color-accent-500) 22%, transparent);

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.35);

  --color-scrim: rgba(0, 0, 0, 0.6);

  --btn-focus-ring: 0 0 0 3px rgba(143, 212, 171, 0.28);

  --btn-primary-shadow: none;

  --btn-secondary-bg: #1a3025;
  --btn-secondary-bg-hover: #223c2e;
  --btn-secondary-bg-active: #2a4838;
  --btn-secondary-border: #2d4a38;
  --btn-secondary-fg: var(--color-text-900);

  --btn-neutral-bg: #1a3025;
  --btn-neutral-bg-hover: #223c2e;
  --btn-neutral-bg-active: #2a4838;
  --btn-neutral-border: #2d4a38;
  --btn-neutral-fg: var(--color-text-900);

  --btn-danger-bg: color-mix(in oklab, var(--destructive) 16%, transparent);
  --btn-danger-bg-hover: color-mix(in oklab, var(--destructive) 22%, transparent);
  --btn-danger-bg-active: color-mix(in oklab, var(--destructive) 28%, transparent);
  --btn-danger-fg: #fda4af;
  --btn-danger-shadow: none;

  --form-valid-color: #4ade80;
  --form-invalid-color: #fb7185;
}

/* ── Layout utility ────────────────────────────────────────────────────────── */

.app-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--container-padding);
}

/* ── Shared primitives ─────────────────────────────────────────────────────── */

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  font-weight: 700;
  margin: 0;
}

.caps-label {
  font-size: 0.78rem;
  font-weight: 580;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-500);
}

.text-muted {
  color: var(--text-muted-color);
}

.card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-body {
  padding: var(--space-5);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 580;
  background: var(--color-surface-100);
  color: var(--color-text-700);
  border: 1px solid var(--color-border-200);
}

.dialog-modal {
  padding: var(--dialog-padding);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  background: var(--color-surface-0);
  color: var(--color-text-900);
  max-width: 450px;
  width: 90%;
  margin: 15vh auto;
}

.dialog-modal::backdrop {
  background: var(--color-scrim);
  backdrop-filter: blur(2px);
}

.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dialog-content h4 {
  margin: 0;
  font-size: var(--text-1);
  font-weight: 600;
}

.dialog-content p {
  margin: 0;
  font-size: 0.875rem;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--dialog-actions-gap);
  margin-top: var(--dialog-content-gap);
}

.dialog-warning {
  background-color: var(--color-error-bg);
  color: var(--color-danger-700);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  border: 1px solid var(--color-danger-450);
}

.dialog-warning p {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-height);
  padding: 0.5rem var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid transparent;
  font-size: 0.9rem;
  font-weight: var(--btn-font-weight);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
}

.btn:hover {
  text-decoration: none;
}

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

.btn:active {
  transform: translateY(1px) scale(0.995);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-spinner {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: btn-spin 0.7s linear infinite;
}

.btn-loading-text {
  line-height: 1;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-primary {
  border-width: var(--btn-border-width);
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: none;
}

.btn-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-fg);
  box-shadow: none;
}

.btn-primary:active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
}

.btn-secondary {
  background-color: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
  box-shadow: none;
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-fg);
}

.btn-secondary:active {
  background-color: var(--btn-secondary-bg-active);
  border-color: var(--btn-secondary-bg-active);
}

.btn-light {
  background-color: var(--btn-neutral-bg);
  border-color: var(--btn-neutral-border);
  color: var(--btn-neutral-fg);
  box-shadow: none;
}

.btn-light:hover {
  background-color: var(--btn-neutral-bg-hover);
  border-color: var(--btn-light-hover-border);
  color: var(--btn-neutral-fg);
}

.btn-light:active {
  background-color: var(--btn-neutral-bg-active);
}

.btn-danger {
  border-width: var(--btn-border-width);
  background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
  border-color: transparent;
  color: var(--color-danger-600);
  box-shadow: none;
}

.btn-danger:hover {
  background-color: color-mix(in oklab, var(--destructive) 14%, transparent);
  border-color: transparent;
  color: var(--color-danger-700);
  box-shadow: none;
}

.btn-danger:active {
  background-color: color-mix(in oklab, var(--destructive) 18%, transparent);
  border-color: transparent;
  color: var(--color-danger-700);
}

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--btn-primary-bg);
  min-height: unset;
  padding: 0.15rem 0.2rem;
  border-radius: 0;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.14em;
  box-shadow: none;
}

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

.btn-link:active {
  color: var(--btn-primary-bg-active);
}

.analysis-wizard-reset-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.84rem;
  color: var(--color-text-500);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.analysis-wizard-reset-btn:hover {
  color: var(--color-accent-700);
}

.btn-outline-primary {
  border-width: var(--btn-border-width-strong);
  background: var(--color-accent-50);
  border-color: var(--color-accent-450);
  color: var(--btn-primary-bg);
  box-shadow: none;
}

.btn-outline-primary:hover {
  background-color: var(--btn-outline-primary-hover-bg);
  color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg);
}

.btn-outline-primary:active {
  background-color: var(--btn-outline-primary-active-bg);
}

.btn-lg {
  min-height: 2.65rem;
  padding-inline: 1.05rem;
  font-size: 0.96rem;
}

.w-100 {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-spinner {
    transition: none;
    animation: none;
  }

  .btn:active,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-light:hover,
  .btn-danger:hover,
  .btn-outline-primary:hover {
    transform: none;
  }
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--color-surface-0);
}

body {
  font-family: inherit;
  color: var(--color-text-900);
  background: var(--color-surface-0);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Match the root background to whatever the active layout uses so that iOS
   Safari's rubber-band overscroll and safe-area regions (notch, home
   indicator) reveal the correct colour rather than the default body fill. */
html:has(.auth-page) {
  background: var(--auth-page-bg);
}

html:has(.app-shell) {
  background: var(--color-surface-50);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-block: 0 0.5em;
}

h1 {
  font-size: var(--text-4);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

h2 {
  font-size: var(--text-3);
}

h3 {
  font-size: var(--text-2);
}

h4 {
  font-size: var(--text-1);
}

h5,
h6 {
  font-size: 0.95rem;
}

h6 {
  font-size: 0.9rem;
}

p,
ul,
ol,
blockquote,
pre,
figure {
  margin-block: 0 var(--space-4);
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: var(--space-3);
}

p + h2,
p + h3,
ul + h2,
ul + h3,
ol + h2,
ol + h3 {
  margin-top: var(--space-5);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid var(--form-valid-color);
}

.invalid {
  outline: 1px solid var(--form-invalid-color);
}

.validation-message {
  color: var(--form-invalid-color);
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    var(--color-error-boundary-bg);
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--color-error-boundary-text);
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: var(--color-border-300);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--text-muted-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding:
    max(env(safe-area-inset-top), clamp(1.25rem, 2vw, 2.5rem))
    max(env(safe-area-inset-right), clamp(1.25rem, 2vw, 2.5rem))
    max(env(safe-area-inset-bottom), clamp(1.25rem, 2vw, 2.5rem))
    max(env(safe-area-inset-left), clamp(1.25rem, 2vw, 2.5rem));
  background: var(--auth-page-bg);
}

.auth-shell {
  width: 100%;
  max-width: 27rem;
}

.auth-brand {
  display: inline-flex;
  margin: 0 0 1.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

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

.auth-card {
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-200);
  border-radius: var(--radius-md);
  padding: clamp(1.1rem, 1rem + 1.2vw, 2rem);
  box-shadow: none;
  animation: auth-rise 0.38s ease-out;
}

.auth-card--compact {
  max-width: 24rem;
  margin-inline: auto;
}

.auth-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-accent-600);
  font-weight: 700;
}

.auth-title {
  margin: 0.35rem 0 0;
  font-size: var(--text-3);
  letter-spacing: -0.02em;
}

.auth-subtitle {
  margin: 0.65rem 0 0;
  color: var(--color-text-500);
  font-size: 0.95rem;
}

.auth-header {
  margin-bottom: 1.25rem;
}

.auth-body-copy {
  margin: 0;
  color: var(--color-text-700);
}

.auth-form {
  display: grid;
  gap: 0.9rem;
}

.auth-field {
  display: grid;
  gap: 0.42rem;
}

.auth-label {
  font-size: 0.84rem;
  color: var(--color-text-700);
  font-weight: 610;
  display: flex;
  align-items: center;
}

.auth-inline-alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
  margin: 0.35rem 0 0.1rem;
}

.auth-inline-alert--success {
  background: color-mix(in oklab, var(--color-success-500) 9%, var(--color-surface-0));
  border-color: color-mix(in oklab, var(--color-success-500) 28%, var(--color-surface-0));
  color: var(--color-success-700);
}

.auth-inline-alert--danger {
  background: color-mix(in oklab, var(--color-danger-500) 10%, var(--color-surface-0));
  border-color: color-mix(in oklab, var(--color-danger-500) 32%, var(--color-surface-0));
  color: var(--color-danger-700);
}

.auth-inline-alert--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-fg);
}

.auth-inline-alert--info {
  background: color-mix(in oklab, var(--color-accent-500) 9%, var(--color-surface-0));
  border-color: color-mix(in oklab, var(--color-accent-500) 28%, var(--color-surface-0));
  color: var(--color-accent-700);
}

.auth-meta {
  margin: 0.55rem 0 0;
  color: var(--color-text-500);
  font-size: 0.82rem;
}

.auth-actions {
  display: grid;
  gap: 0.55rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0;
  color: var(--color-text-500);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in oklab, var(--color-border-300) 65%, var(--color-surface-0));
}

.auth-links {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.auth-links p,
.auth-links a,
.auth-link {
  font-size: 0.88rem;
  margin: 0;
}

.auth-links a,
.auth-link {
  color: var(--color-accent-600);
  text-decoration: none;
  font-weight: 600;
}

.auth-links a:hover,
.auth-link:hover {
  color: var(--color-accent-700);
  text-decoration: underline;
}

.auth-provider-stack {
  display: grid;
  gap: 0.55rem;
}

.auth-provider-button {
  width: 100%;
}

.auth-note {
  border-radius: var(--radius-md);
  padding: 0.72rem 0.8rem;
  font-size: 0.88rem;
  background: color-mix(in oklab, var(--color-accent-500) 8%, var(--color-surface-0));
  border: 1px solid color-mix(in oklab, var(--color-accent-500) 22%, var(--color-surface-0));
  color: var(--color-text-700);
}

.auth-note--warn {
  background: color-mix(in oklab, var(--color-warning-accent) 10%, var(--color-surface-0));
  border-color: color-mix(in oklab, var(--color-warning-accent) 25%, var(--color-surface-0));
  color: var(--color-warning-fg);
}

.auth-status-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.auth-status-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
}

.auth-status-row .auth-status-icon {
  margin-bottom: 0;
}

.auth-status-row .auth-title {
  margin: 0;
}

.auth-status-icon--danger {
  background: color-mix(in oklab, var(--color-danger-500) 14%, var(--color-surface-0));
  color: var(--color-danger-700);
}

.auth-status-icon--success {
  background: color-mix(in oklab, var(--color-success-500) 14%, var(--color-surface-0));
  color: var(--color-success-700);
}

.auth-status-icon--neutral {
  background: color-mix(in oklab, var(--color-accent-500) 12%, var(--color-surface-0));
  color: var(--color-accent-700);
}

.auth-card .btn {
  min-height: 2.7rem;
  border-radius: var(--radius-md);
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 640px) {
  .auth-page {
    align-items: start;
    padding-top: max(env(safe-area-inset-top), 1rem);
  }

  .auth-card {
    border-radius: var(--radius-md);
    padding: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.35rem;
  border-radius: var(--radius-pill);
  margin-left: 0.4rem;
  vertical-align: middle;
}

.auth-badge--success {
  background: color-mix(in oklab, var(--color-success-500) 14%, var(--color-surface-0));
  color: var(--color-success-700);
}

.auth-badge--neutral {
  background: color-mix(in oklab, var(--color-text-500) 12%, var(--color-surface-0));
  color: var(--color-text-700);
}

/* Global Table Styles */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin-bottom: 2rem;
}

.table th,
.table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-200);
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-500);
  font-weight: 600;
}

.table td {
  color: var(--color-text-900);
}

.table tr:last-child td {
  border-bottom: none;
}

/* ── Dark-theme overrides for elements with hardcoded light colours ────────── */

[data-theme="dark"] .auth-page {
  background: var(--auth-page-bg);
}


[data-theme="dark"] .btn-danger {
  background-color: color-mix(in oklab, var(--destructive) 14%, transparent);
  color: var(--color-danger-700);
}

[data-theme="dark"] .btn-danger:hover {
  background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
  color: var(--color-danger-700);
}

[data-theme="dark"] .btn-danger:active {
  background-color: color-mix(in oklab, var(--destructive) 26%, transparent);
  color: var(--color-danger-700);
}

[data-theme="dark"] .btn-outline-primary {
  background: color-mix(in oklab, var(--color-accent-500) 10%, transparent);
  border-color: var(--color-accent-450);
  color: var(--color-accent-700);
}

[data-theme="dark"] .btn-outline-primary:hover {
  background-color: color-mix(in oklab, var(--color-accent-500) 16%, transparent);
  color: var(--color-accent-700);
  border-color: var(--color-accent-500);
}

[data-theme="dark"] .btn-outline-primary:active {
  background-color: color-mix(in oklab, var(--color-accent-500) 22%, transparent);
}

[data-theme="dark"] .btn-light:hover {
  border-color: var(--btn-neutral-border);
}

/* ── Plotly modebar overrides ──────────────────────────────────────────────── */

.modebar {
  right: 0.5rem !important;
  top: 0.35rem !important;
}

.modebar-group {
  display: inline-flex !important;
  gap: 0.1rem;
  padding: 0.15rem 0.25rem !important;
  background: var(--color-surface-0) !important;
  border: 1px solid var(--color-border-200) !important;
  border-radius: 0.4rem !important;
  box-shadow: var(--shadow-card) !important;
}

.modebar-btn {
  padding: 0.2rem !important;
  border-radius: 0.25rem !important;
  transition: background-color 0.12s ease !important;
}

.modebar-btn path {
  fill: var(--color-text-500) !important;
}

.modebar-btn:hover path {
  fill: var(--color-text-900) !important;
}

.modebar-btn:hover {
  background: var(--color-surface-100) !important;
}

.modebar-btn.active path {
  fill: var(--color-accent-500) !important;
}

/* ============================================================================
   Forms & Dialog component tokens
   Used by Components/Common FormField, TextInput, NumberInput, TextArea,
   Select, Checkbox, RadioGroup, FileDropzone, FormSummary, Dialog,
   ConfirmDialog, DestructiveConfirm, FormDialog.
   ========================================================================= */

:root {
  /* Form field geometry */
  --form-field-gap: var(--space-2);
  --form-field-label-gap: 0.35rem;
  --form-field-help-gap: 0.35rem;
  --form-field-inline-gap: var(--space-2);
  --form-field-height: 2.6rem;
  --form-field-height-sm: 2.1rem;
  --form-field-input-padding-y: var(--space-2);
  --form-field-input-padding-x: var(--space-3);
  --form-field-input-padding-y-sm: 0.3rem;
  --form-field-input-padding-x-sm: var(--space-2);
  --form-field-radius: var(--radius-md);
  --form-field-border-width: 1px;
  --form-field-affix-padding-x: var(--space-3);
  --form-field-affix-gap: var(--space-2);
  --form-field-textarea-min-height: 6rem;
  --form-field-textarea-padding-y: var(--space-3);

  /* Form field typography */
  --form-field-label-font-size: 0.84rem;
  --form-field-label-font-weight: 610;
  --form-field-label-color: var(--color-text-700);
  --form-field-required-color: var(--color-danger-500);
  --form-field-required-gap: 0.15rem;
  --form-field-help-font-size: 0.78rem;
  --form-field-help-color: var(--color-text-500);
  --form-field-error-font-size: 0.78rem;
  --form-field-error-color: var(--color-danger-600);
  --form-field-error-icon-gap: 0.35rem;

  /* Form field colors (light) */
  --form-field-bg: var(--color-surface-0);
  --form-field-fg: var(--color-text-900);
  --form-field-border: var(--color-border-300);
  --form-field-placeholder: var(--color-text-400);
  --form-field-border-hover: #a8bfae;
  --form-field-border-focus: var(--color-accent-500);
  --form-field-focus-ring: 0 0 0 3px rgba(47, 158, 107, 0.26);
  --form-field-bg-disabled: var(--color-surface-50);
  --form-field-fg-disabled: var(--color-text-400);
  --form-field-border-disabled: var(--color-border-200);
  --form-field-border-error: var(--color-danger-500);
  --form-field-bg-error: #fbecee;
  --form-field-focus-ring-error: 0 0 0 3px rgba(188, 85, 96, 0.24);
  --form-field-loading-color: var(--color-text-500);

  /* Form summary */
  --form-summary-padding-y: var(--space-3);
  --form-summary-padding-x: var(--space-4);
  --form-summary-gap: var(--space-2);
  --form-summary-radius: var(--radius-md);
  --form-summary-bg: #fbecee;
  --form-summary-border: #e7b8be;
  --form-summary-fg: #7a2831;

  /* Checkbox / Radio */
  --form-check-size: 1.125rem;
  --form-check-radius: 0.25rem;
  --form-check-label-gap: var(--space-2);
  --form-check-group-gap: 0.6rem;
  --form-check-border: var(--color-border-300);
  --form-check-border-hover: var(--color-accent-600);
  --form-check-bg-checked: var(--color-accent-500);
  --form-check-border-checked: var(--color-accent-500);
  --form-check-fg-checked: #ffffff;

  /* Dialog extensions */
  --dialog-title-gap: var(--space-3);
  --dialog-radius: var(--radius-md);
  --dialog-max-width: 450px;
  --dialog-max-width-form: 560px;
  --dialog-backdrop: rgba(10, 21, 16, 0.48);
  --dialog-shadow:
    0 1px 2px rgba(15, 31, 23, 0.06),
    0 8px 24px -6px rgba(15, 31, 23, 0.18);
  --dialog-danger-alert-bg: #f8dbdf;
  --dialog-danger-alert-fg: #903946;
  --dialog-danger-alert-border: #c46a74;
  --dialog-danger-alert-padding-y: var(--space-3);
  --dialog-danger-alert-padding-x: var(--space-4);
  --dialog-danger-alert-radius: var(--radius-sm);
}

[data-theme="dark"] {
  --form-field-bg: #12231a;
  --form-field-fg: var(--color-text-900);
  --form-field-border: #2d4a38;
  --form-field-placeholder: #7a9487;
  --form-field-border-hover: #3d5a48;
  --form-field-border-focus: var(--color-accent-500);
  --form-field-focus-ring: 0 0 0 3px rgba(143, 212, 171, 0.28);
  --form-field-bg-disabled: #0e1a14;
  --form-field-fg-disabled: #6e8e7c;
  --form-field-border-disabled: #1f3528;
  --form-field-bg-error: #2a1419;
  --form-field-border-error: #cc5a68;
  --form-field-focus-ring-error: 0 0 0 3px rgba(244, 63, 94, 0.28);
  --form-field-label-color: var(--color-text-700);
  --form-field-help-color: var(--color-text-500);
  --form-field-error-color: #f0a4ad;
  --form-field-required-color: #f0a4ad;
  --form-field-loading-color: var(--color-text-500);

  --form-summary-bg: #2a1419;
  --form-summary-border: #5a2d34;
  --form-summary-fg: #f0a4ad;

  --form-check-border: #3d5a48;
  --form-check-border-hover: var(--color-accent-500);
  --form-check-bg-checked: var(--color-accent-500);
  --form-check-border-checked: var(--color-accent-500);
  --form-check-fg-checked: #0a1510;

  --dialog-backdrop: rgba(0, 0, 0, 0.64);
  --dialog-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 12px 32px -6px rgba(0, 0, 0, 0.6);
  --dialog-danger-alert-bg: #2a1419;
  --dialog-danger-alert-fg: #f0a4ad;
  --dialog-danger-alert-border: #5a2d34;
}

/* ── FormField wrapper ──────────────────────────────────────────────────── */
.field {
  display: grid;
  gap: var(--form-field-label-gap);
}

.field + .field {
  margin-top: var(--form-field-gap);
}

.field-label {
  font-size: var(--form-field-label-font-size);
  font-weight: var(--form-field-label-font-weight);
  color: var(--form-field-label-color);
  display: inline-flex;
  align-items: baseline;
  gap: var(--form-field-required-gap);
}

.field-label--required::after {
  content: "*";
  color: var(--form-field-required-color);
  font-weight: 700;
}

.field-help {
  font-size: var(--form-field-help-font-size);
  color: var(--form-field-help-color);
  margin-top: var(--form-field-help-gap);
  line-height: 1.4;
}

.field-error {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--form-field-error-icon-gap);
  font-size: var(--form-field-error-font-size);
  color: var(--form-field-error-color);
  margin-top: var(--form-field-help-gap);
  line-height: 1.4;
}

.field-error svg {
  flex: 0 0 auto;
  margin-top: 0.1em;
}

/* ── Single-line inputs (TextInput, NumberInput, Select) ────────────────── */
.input {
  width: 100%;
  min-height: var(--form-field-height);
  padding: var(--form-field-input-padding-y) var(--form-field-input-padding-x);
  background: var(--form-field-bg);
  color: var(--form-field-fg);
  border: var(--form-field-border-width) solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.input::placeholder {
  color: var(--form-field-placeholder);
}

.input:hover:not(:disabled):not(:focus) {
  border-color: var(--form-field-border-hover);
}

.input:focus {
  outline: none;
  border-color: var(--form-field-border-focus);
  box-shadow: var(--form-field-focus-ring);
}

.input:disabled,
.input[aria-disabled="true"] {
  background: var(--form-field-bg-disabled);
  color: var(--form-field-fg-disabled);
  border-color: var(--form-field-border-disabled);
  cursor: not-allowed;
}

.input--sm {
  min-height: var(--form-field-height-sm);
  padding: var(--form-field-input-padding-y-sm) var(--form-field-input-padding-x-sm);
  font-size: 0.875rem;
}

.input[aria-invalid="true"],
.field.is-invalid .input {
  border-color: var(--form-field-border-error);
  background: var(--form-field-bg-error);
}

.input[aria-invalid="true"]:focus,
.field.is-invalid .input:focus {
  box-shadow: var(--form-field-focus-ring-error);
}

.select {
  appearance: none;
  padding-right: calc(var(--form-field-input-padding-x) * 2 + 0.75rem);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b8477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--form-field-affix-padding-x) center;
}

/* Input group (affixes: prefix/suffix/icon/button/spinner) */
.input-group {
  display: flex;
  align-items: stretch;
  background: var(--form-field-bg);
  border: var(--form-field-border-width) solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  min-height: var(--form-field-height);
}

.input-group:hover:not(:focus-within) {
  border-color: var(--form-field-border-hover);
}

.input-group:focus-within {
  border-color: var(--form-field-border-focus);
  box-shadow: var(--form-field-focus-ring);
}

.input-group.is-invalid {
  border-color: var(--form-field-border-error);
  background: var(--form-field-bg-error);
}

.input-group.is-invalid:focus-within {
  box-shadow: var(--form-field-focus-ring-error);
}

.input-group .input {
  flex: 1;
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: calc(var(--form-field-height) - 2px);
}

.input-group .input:focus {
  box-shadow: none;
}

.input.valid.modified,
.input.invalid,
.textarea.valid.modified,
.textarea.invalid,
.select.valid.modified,
.select.invalid {
  outline: none;
}

.input-affix {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--form-field-affix-padding-x);
  color: var(--form-field-help-color);
  font-size: 0.875rem;
  gap: var(--form-field-affix-gap);
  user-select: none;
}

.input-affix--button {
  padding-inline: var(--space-2);
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--color-text-500);
  transition: color 0.15s ease;
}

.input-affix--button:hover {
  color: var(--color-text-900);
}

.input-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--form-field-loading-color);
  border-top-color: transparent;
  border-radius: 50%;
  animation: input-spin 0.7s linear infinite;
}

@keyframes input-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .input-spinner {
    animation: none;
  }
}

/* ── TextArea ───────────────────────────────────────────────────────────── */
.textarea {
  width: 100%;
  min-height: var(--form-field-textarea-min-height);
  padding: var(--form-field-textarea-padding-y) var(--form-field-input-padding-x);
  background: var(--form-field-bg);
  color: var(--form-field-fg);
  border: var(--form-field-border-width) solid var(--form-field-border);
  border-radius: var(--form-field-radius);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--form-field-border-hover);
}

.textarea:focus {
  outline: none;
  border-color: var(--form-field-border-focus);
  box-shadow: var(--form-field-focus-ring);
}

.textarea:disabled {
  background: var(--form-field-bg-disabled);
  color: var(--form-field-fg-disabled);
  cursor: not-allowed;
}

.textarea[aria-invalid="true"] {
  border-color: var(--form-field-border-error);
  background: var(--form-field-bg-error);
}

/* ── Checkbox / Radio ───────────────────────────────────────────────────── */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--form-check-label-gap);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  appearance: none;
  flex: 0 0 auto;
  width: var(--form-check-size);
  height: var(--form-check-size);
  margin: 0.15rem 0 0;
  border: var(--form-field-border-width) solid var(--form-check-border);
  border-radius: var(--form-check-radius);
  background: var(--form-field-bg);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
  box-sizing: border-box;
  vertical-align: top;
}

.check input[type="radio"] {
  border-radius: 50%;
}

.check input[type="checkbox"]:hover,
.check input[type="radio"]:hover {
  border-color: var(--form-check-border-hover);
}

.check input[type="checkbox"]:focus-visible,
.check input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--form-field-focus-ring);
  border-color: var(--form-field-border-focus);
}

.check input[type="checkbox"]:checked {
  background: var(--form-check-bg-checked);
  border-color: var(--form-check-border-checked);
}

.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.32rem;
  border-left: 2px solid var(--form-check-fg-checked);
  border-bottom: 2px solid var(--form-check-fg-checked);
  transform: translate(-50%, -65%) rotate(-45deg);
}

.check input[type="radio"]:checked {
  border-color: var(--form-check-border-checked);
}

.check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--form-check-bg-checked);
  transform: translate(-50%, -50%);
}

.check input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.check input:disabled ~ .check-label {
  color: var(--form-field-fg-disabled);
  cursor: not-allowed;
}

.check-label {
  font-size: 0.92rem;
  color: var(--color-text-900);
}

.check-help {
  font-size: var(--form-field-help-font-size);
  color: var(--form-field-help-color);
  display: block;
  margin-top: 0.15rem;
}

/* ── RadioGroup ─────────────────────────────────────────────────────────── */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--form-check-group-gap);
  border: 0;
  padding: 0;
  margin: 0;
}

.radio-group legend {
  font-size: var(--form-field-label-font-size);
  font-weight: var(--form-field-label-font-weight);
  color: var(--form-field-label-color);
  margin-bottom: var(--form-field-label-gap);
  padding: 0;
}

.radio-group--horizontal {
  flex-direction: row;
  gap: var(--space-4);
}

/* ── FileDropzone ───────────────────────────────────────────────────────── */
.dropzone {
  position: relative;
  display: block;
  border: 1px dashed var(--color-border-300);
  border-radius: var(--card-radius, var(--radius-lg));
  padding: var(--upload-padding-y) var(--upload-padding-x);
  text-align: center;
  background: var(--color-surface-50);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.dropzone:hover,
.dropzone.is-dragging {
  border-color: var(--color-accent-500);
  background: var(--color-accent-50);
}

.dropzone.is-invalid {
  border-color: var(--form-field-border-error);
  background: var(--form-field-bg-error);
}

.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dropzone-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto var(--space-3);
  color: var(--color-accent-600);
}

.dropzone-title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 610;
  color: var(--color-text-900);
}

.dropzone-hint {
  margin: 0;
  color: var(--color-text-500);
  font-size: 0.88rem;
}

.dropzone-file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-0);
  border: 1px solid var(--color-border-200);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  color: var(--color-text-900);
}

/* ── Form summary (top-of-form validation roll-up) ──────────────────────── */
.form-summary {
  padding: var(--form-summary-padding-y) var(--form-summary-padding-x);
  border: 1px solid var(--form-summary-border);
  background: var(--form-summary-bg);
  color: var(--form-summary-fg);
  border-radius: var(--form-summary-radius);
  font-size: 0.88rem;
}

.form-summary-title {
  font-weight: 650;
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.form-summary ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--form-summary-gap);
}

.form-summary li {
  line-height: 1.4;
}

/* ── Dialog (new component) ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 0.8rem;
}

.pagination-info {
  font-size: 0.84rem;
  font-weight: 580;
  color: var(--color-text-500);
}

/* Distinct from legacy .dialog-modal — new components use native <dialog>
   with class "dialog" and render the close chrome from Blazor. */
.dialog {
  position: relative; /* anchor for the .dialog-close-btn absolute positioning */
  background: var(--color-surface-0);
  color: var(--color-text-900);
  border: 1px solid var(--color-border-200);
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  padding: var(--dialog-padding);
  width: min(100%, var(--dialog-max-width));
  max-width: var(--dialog-max-width);
  max-height: calc(100vh - var(--space-6) * 2);
  margin: auto;
  overflow: auto;
}

.dialog::backdrop {
  background: var(--dialog-backdrop);
}

/* The .dialog-inner wrapper exists in Dialog.razor only to stop click propagation
   for backdrop-click-to-close. It must not introduce any visual or layout changes —
   the dialog's padding, scrollbar, and child layout all assume direct children. */
.dialog-inner {
  display: contents;
}

/* Reserve space at the end of the title for the close button so a long title
   cannot run under the absolutely-positioned X. The close button sits at the end
   of DOM order (so initial focus skips it), so we use :has() to look forward —
   no general-sibling selector available in that direction. */
.dialog-inner:has(> .dialog-close-btn) > .dialog-title {
  padding-inline-end: 3.4rem;
}

.dialog-close-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* WCAG 2.5.8 AAA: 44x44 minimum target size. */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-500);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dialog-close-btn:hover {
  color: var(--color-text-900);
  background-color: var(--color-surface-50);
}

.dialog-close-btn:focus-visible {
  outline: none;
  box-shadow: var(--btn-focus-ring);
  border-color: var(--color-accent-500);
}

@media (prefers-reduced-motion: reduce) {
  .dialog-close-btn {
    transition: none;
  }
}

.dialog--form {
  width: min(100%, var(--dialog-max-width-form));
  max-width: var(--dialog-max-width-form);
}

.dialog-title {
  margin: 0 0 var(--dialog-title-gap);
  font-family: var(--font-serif);
  font-weight: 650;
  font-size: 1.25rem;
  line-height: 1.25;
}

.dialog-body {
  margin: 0;
  color: var(--color-text-700);
  line-height: 1.5;
}

.dialog-body + .dialog-alert,
.dialog-title + .dialog-alert,
.dialog-title + .dialog-body {
  margin-top: var(--space-3);
}

.dialog-alert {
  background: var(--dialog-danger-alert-bg);
  color: var(--dialog-danger-alert-fg);
  border: 1px solid var(--dialog-danger-alert-border);
  border-radius: var(--dialog-danger-alert-radius);
  padding: var(--dialog-danger-alert-padding-y) var(--dialog-danger-alert-padding-x);
  font-size: 0.875rem;
  line-height: 1.45;
}

.dialog-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-3);
}