@charset "UTF-8";
/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/**
 * ============================================================
 * DIAKONOS — Design Tokens
 * Built on Open Props conventions, custom Diakonos palette
 *
 * Tone: Grounded, warm, trustworthy, institutional
 * Palette: Steel teal (primary) + Warm amber (accent) + Terracotta (warning/error)
 * Typography: Instrument Serif (display) + Inter (body)
 * Density: Compact — data-entry focused application
 * ============================================================
 */
/* ============================================================
   PRIMITIVE TOKENS
   Raw values — never use directly in components.
   These map to semantic tokens below.
   ============================================================ */
:root {
  /* --- Teal Scale (Steel Blue) --- */
  --teal-1: #0a222b; /* darkest — sidebar bg */
  --teal-2: #1f4d5d; /* dark — sidebar hover */
  --teal-3: #4388a1; /* mid — primary action */
  --teal-4: #71afc5; /* light — highlight, active */
  --teal-5: #9dc3cf; /* very light — tinted surface */
  --teal-6: #c6d7da; /* near-white — subtle highlight */
  /* --- Amber Scale (Warm Brown / Gold) --- */
  --amber-1: #472c0b; /* darkest */
  --amber-2: #865215; /* dark */
  --amber-3: #bf8239; /* mid — accent / active nav */
  --amber-4: #ce9b63; /* light */
  --amber-5: #dcb58d; /* very light */
  --amber-6: #e6d0b8; /* near-white */
  /* --- Terracotta Scale (Brick Red) --- */
  --terra-1: #47221b; /* darkest */
  --terra-2: #5f1f0c; /* dark — error hover */
  --terra-3: #862b11; /* mid — error / warning */
  --terra-4: #9c3d22; /* light */
  --terra-5: #aa553d; /* muted */
  --terra-6: #c5806d; /* lightest */
  /* --- Gray Scale (Warm Neutral) --- */
  --gray-1: #1e1d1b;
  --gray-2: #31302e;
  --gray-3: #464441; /* sidebar text */
  --gray-4: #5c5a56;
  --gray-5: #72706c; /* muted text */
  --gray-6: #898783;
  --gray-7: #a29f9a;
  --gray-8: #bab8b2; /* divider */
  --gray-9: #d4d1cb; /* border */
  --gray-10: #f2f0ec; /* surface offset */
  --gray-11: #f7f5f0; /* surface */
  --gray-12: #eeebe4; /* bg */
  /* ============================================================
     TYPE SCALE — fluid clamp()
     Web app: capped at --text-xl (36px). No display sizes.
     ============================================================ */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12px → 14px */
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); /* 14px → 16px */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16px → 18px */
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); /* 18px → 24px */
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); /* 24px → 36px — max for web app */
  /* ============================================================
     4px SPACING SYSTEM
     ============================================================ */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm: 0.25rem; /*  4px — inputs, chips */
  --radius-md: 0.5rem; /*  8px — cards, dropdowns */
  --radius-lg: 0.75rem; /* 12px — modals, panels */
  --radius-xl: 1rem; /* 16px — large cards */
  --radius-pill: 9999px; /* badges, tags */
  /* ============================================================
     SHADOWS — warm-toned to match beige surfaces
     ============================================================ */
  --shadow-xs: 0 1px 2px oklch(0.2 0.02 60 / 0.05);
  --shadow-sm: 0 1px 3px oklch(0.2 0.02 60 / 0.07), 0 1px 2px oklch(0.2 0.02 60 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.2 0.02 60 / 0.08), 0 2px 4px oklch(0.2 0.02 60 / 0.05);
  --shadow-lg: 0 12px 32px oklch(0.2 0.02 60 / 0.10), 0 4px 8px oklch(0.2 0.02 60 / 0.06);
  --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.30);
  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --ease-in-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 280ms;
  --transition-interactive: var(--duration-normal) var(--ease-in-out);
  --transition-layout: var(--duration-slow) var(--ease-in-out);
  /* ============================================================
     CONTENT WIDTHS
     ============================================================ */
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --content-full: 100%;
  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: "Besley", Georgia, serif;
  --font-body: Chivo, Inter, SF Pro, "Segoe UI", Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-mono: "Chivo Mono", "Fira Code", monospace;
  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-loose: 1.8;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.1em;
  /* ============================================================
     Z-INDEX LADDER
     ============================================================ */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ============================================================
   SEMANTIC TOKENS — LIGHT MODE
   These are the tokens components should reference.
   Named by role, not by value.
   ============================================================ */
:root,
[data-theme=light] {
  /* --- Surfaces (warm beige, per UI screenshot) --- */
  --color-bg: var(--gray-12); /* #faf9f5 — page background */
  --color-surface: var(--gray-11); /* #f7f5f0 — card, panel */
  --color-surface-2: #ffffff; /* pure white — elevated input fields */
  --color-surface-offset: var(--gray-10); /* #f2f0ec — row hover, tinted bg */
  --color-surface-dynamic: #e9e6e0; /* subtle interaction state */
  --color-divider: var(--gray-9); /* #e8e8e8 */
  --color-border: var(--gray-8); /* #d4d4d4 */
  --color-border-strong: var(--gray-7); /* #b8b8b8 — focused/active borders */
  /* --- Text --- */
  --color-text: #1c1a17; /* warm near-black */
  --color-text-muted: var(--gray-5); /* #7a7a7a */
  --color-text-faint: var(--gray-7); /* #b8b8b8 */
  --color-text-inverse: #f9f8f4;
  /* --- Sidebar --- */
  --color-sidebar-bg: var(--gray-2); /* #0d2d35 — dark teal */
  --color-sidebar-text: var(--gray-10);
  --color-sidebar-text-dim: var(--gray-8);
  --color-sidebar-hover: oklch(from var(--gray-2) calc(l + 0.06) c h);
  --color-sidebar-active: var(--gray-3); /* #1a5068 */
  --color-sidebar-divider: oklch(from var(--gray-2) calc(l + 0.08) c h);
  /* --- Primary (Teal — actions, links, focus) --- */
  --color-primary: var(--teal-3); /* #3d7e96 */
  --color-primary-hover: var(--teal-2); /* #1a5068 */
  --color-primary-active: var(--teal-1); /* #0d2d35 */
  --color-primary-subtle: var(--teal-6); /* #c8e3e8 — tinted background */
  --color-primary-on: #ffffff; /* text on primary bg */
  /* --- Accent (Amber — active nav item, highlights, CTAs) --- */
  --color-accent: var(--amber-4); /* #c08030 */
  --color-accent-hover: var(--amber-2); /* #8a5a1a */
  --color-accent-active: var(--amber-1); /* #5a3010 */
  --color-accent-subtle: var(--amber-6); /* #f0dfc0 */
  --color-accent-on: var(--gray-1);
  /* --- Error / Warning (Terracotta) --- */
  --color-error: var(--terra-3); /* #a83828 */
  --color-error-hover: var(--terra-2); /* #8a2828 */
  --color-error-active: var(--terra-1); /* #5c2020 */
  --color-error-subtle: #f5e0dc;
  --color-error-on: #ffffff;
  /* --- Warning (lighter terracotta) --- */
  --color-warning: var(--terra-5); /* #c86858 */
  --color-warning-subtle: #faeae6;
  --color-warning-on: var(--terra-1);
  /* --- Success --- */
  --color-success: #437a22;
  --color-success-subtle: #d4dfcc;
  --color-success-on: #ffffff;
  /* --- Info --- */
  --color-info: var(--teal-3);
  --color-info-subtle: var(--teal-6);
  --color-info-on: #ffffff;
  /* --- Interactive component tokens --- */
  --color-input-bg: var(--color-surface-2);
  --color-input-border: var(--color-border);
  --color-input-border-focus: var(--color-primary);
  --color-input-placeholder: var(--color-text-faint);
  --color-input-text: var(--color-text);
  --color-btn-primary-bg: var(--color-accent);
  --color-btn-primary-text: var(--color-accent-on);
  --color-btn-primary-hover: var(--color-accent-hover);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-text: var(--color-text);
  --color-btn-secondary-border: var(--color-border-strong);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --color-focus-ring: var(--color-primary);
  /* --- Row / list states (for data tables, donor lists) --- */
  --color-row-hover: var(--color-surface-offset);
  --color-row-selected: color-mix(in oklch, var(--teal-4) 12%, var(--color-surface));
  --color-row-selected-border: var(--teal-4);
  /* --- Highlighted match (search term underline, per UI screenshot) --- */
  --color-match-underline: var(--amber-3);
  /* --- Nav breadcrumb --- */
  --color-breadcrumb: var(--color-text-muted);
  --color-breadcrumb-active: var(--color-text);
}

/* ============================================================
   SEMANTIC TOKENS — DARK MODE
   ============================================================ */
[data-theme=dark] {
  --color-bg: #131210;
  --color-surface: #1a1917;
  --color-surface-2: #1f1e1c;
  --color-surface-offset: #242220;
  --color-surface-dynamic: #2c2a27;
  --color-divider: #2e2c29;
  --color-border: #3a3835;
  --color-border-strong: #4a4845;
  --color-text: #d8d5d0;
  --color-text-muted: #807d78;
  --color-text-faint: #5a5855;
  --color-text-inverse: #1c1a17;
  --color-sidebar-bg: #0a1e24;
  --color-sidebar-text: #7a9ea8;
  --color-sidebar-text-dim: #3a5a62;
  --color-sidebar-hover: #102830;
  --color-sidebar-active: #1a3d48;
  --color-sidebar-divider: #152830;
  --color-primary: var(--teal-4); /* #6aabbc — lighter in dark */
  --color-primary-hover: var(--teal-3);
  --color-primary-active: var(--teal-2);
  --color-primary-subtle: #1a3540;
  --color-primary-on: #0d2d35;
  --color-accent: var(--amber-4); /* #d4a868 */
  --color-accent-hover: var(--amber-3);
  --color-accent-active: var(--amber-2);
  --color-accent-subtle: #3a2a14;
  --color-accent-on: #1a0e04;
  --color-error: var(--terra-5); /* #c86858 */
  --color-error-hover: var(--terra-4);
  --color-error-active: var(--terra-3);
  --color-error-subtle: #3a2020;
  --color-error-on: #1a0808;
  --color-warning: var(--terra-6);
  --color-warning-subtle: #402820;
  --color-warning-on: var(--terra-1);
  --color-success: #6daa45;
  --color-success-subtle: #1e3010;
  --color-success-on: #0a1c04;
  --color-info: var(--teal-4);
  --color-info-subtle: #1a3540;
  --color-info-on: #0d2d35;
  --color-input-bg: var(--color-surface-2);
  --color-input-border: var(--color-border);
  --color-input-border-focus: var(--color-primary);
  --color-input-placeholder: var(--color-text-faint);
  --color-input-text: var(--color-text);
  --color-btn-primary-bg: var(--color-accent);
  --color-btn-primary-text: var(--color-accent-on);
  --color-btn-primary-hover: var(--color-accent-hover);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-text: var(--color-text);
  --color-btn-secondary-border: var(--color-border-strong);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-hover);
  --color-focus-ring: var(--color-primary);
  --color-row-hover: var(--color-surface-offset);
  --color-row-selected: color-mix(in oklch, var(--teal-3) 15%, var(--color-surface));
  --color-row-selected-border: var(--teal-3);
  --color-match-underline: var(--amber-4);
  --color-breadcrumb: var(--color-text-muted);
  --color-breadcrumb-active: var(--color-text);
  --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.20);
  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.20);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35), 0 2px 4px oklch(0 0 0 / 0.25);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45), 0 4px 8px oklch(0 0 0 / 0.30);
  --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #131210;
    --color-surface: #1a1917;
    --color-surface-2: #1f1e1c;
    --color-surface-offset: #242220;
    --color-surface-dynamic: #2c2a27;
    --color-divider: #2e2c29;
    --color-border: #3a3835;
    --color-border-strong: #4a4845;
    --color-text: #d8d5d0;
    --color-text-muted: #807d78;
    --color-text-faint: #5a5855;
    --color-text-inverse: #1c1a17;
    --color-sidebar-bg: #0a1e24;
    --color-sidebar-text: #7a9ea8;
    --color-sidebar-text-dim: #3a5a62;
    --color-sidebar-hover: #102830;
    --color-sidebar-active: #1a3d48;
    --color-sidebar-divider: #152830;
    --color-primary: var(--teal-4); /* #6aabbc — lighter in dark */
    --color-primary-hover: var(--teal-3);
    --color-primary-active: var(--teal-2);
    --color-primary-subtle: #1a3540;
    --color-primary-on: #0d2d35;
    --color-accent: var(--amber-4); /* #d4a868 */
    --color-accent-hover: var(--amber-3);
    --color-accent-active: var(--amber-2);
    --color-accent-subtle: #3a2a14;
    --color-accent-on: #1a0e04;
    --color-error: var(--terra-5); /* #c86858 */
    --color-error-hover: var(--terra-4);
    --color-error-active: var(--terra-3);
    --color-error-subtle: #3a2020;
    --color-error-on: #1a0808;
    --color-warning: var(--terra-6);
    --color-warning-subtle: #402820;
    --color-warning-on: var(--terra-1);
    --color-success: #6daa45;
    --color-success-subtle: #1e3010;
    --color-success-on: #0a1c04;
    --color-info: var(--teal-4);
    --color-info-subtle: #1a3540;
    --color-info-on: #0d2d35;
    --color-input-bg: var(--color-surface-2);
    --color-input-border: var(--color-border);
    --color-input-border-focus: var(--color-primary);
    --color-input-placeholder: var(--color-text-faint);
    --color-input-text: var(--color-text);
    --color-btn-primary-bg: var(--color-accent);
    --color-btn-primary-text: var(--color-accent-on);
    --color-btn-primary-hover: var(--color-accent-hover);
    --color-btn-secondary-bg: transparent;
    --color-btn-secondary-text: var(--color-text);
    --color-btn-secondary-border: var(--color-border-strong);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-hover);
    --color-focus-ring: var(--color-primary);
    --color-row-hover: var(--color-surface-offset);
    --color-row-selected: color-mix(in oklch, var(--teal-3) 15%, var(--color-surface));
    --color-row-selected-border: var(--teal-3);
    --color-match-underline: var(--amber-4);
    --color-breadcrumb: var(--color-text-muted);
    --color-breadcrumb-active: var(--color-text);
    --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.20);
    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.30), 0 1px 2px oklch(0 0 0 / 0.20);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35), 0 2px 4px oklch(0 0 0 / 0.25);
    --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.45), 0 4px 8px oklch(0 0 0 / 0.30);
    --shadow-focus: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.35);
  }
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-tight);
  color: var(--color-text);
  font-size: var(--text-xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* --- Paragraphs & Lists --- */
p, ul, ol, dl {
  margin-bottom: 1em;
}

p {
  max-width: 75ch; /* Optimal line length for readability */
}

li {
  margin-bottom: 0.25em;
}

dt {
  font-weight: var(--font-weight-bold);
}

dd {
  margin-left: var(--space-4);
  margin-bottom: 0.5em;
}

/* --- Inline Elements --- */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-in-out), text-decoration-color var(--duration-fast) var(--ease-in-out);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

small, .text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

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

/* --- Code & Pre --- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-surface-offset);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-surface-offset);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: 1em;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* --- Blockquotes --- */
blockquote {
  border-left: 4px solid var(--color-primary-subtle);
  padding-left: var(--space-4);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1em;
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- Misc --- */
hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-8) 0;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Besley */
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-Book.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-BookItalic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-Fatface.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-FatfaceItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-Heavy.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-HeavyItalic.ttf");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-Semi.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Besley";
  src: url("/static/fonts/besley/Besley-SemiItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
/* Besley Condensed */
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Book.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Fatface.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-FatfaceItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Heavy.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-HeavyItalic.ttf");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-Semi.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Besley Condensed";
  src: url("/static/fonts/besley/BesleyCondensed-SemiItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
/* Besley Narrow */
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Book.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Fatface.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-FatfaceItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Heavy.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-HeavyItalic.ttf");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-Semi.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Besley Narrow";
  src: url("/static/fonts/besley/BesleyNarrow-SemiItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
/* Chivo Variable */
@font-face {
  font-family: "Chivo";
  src: url("/static/fonts/chivo/Chivo-VariableFont_wght.ttf");
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "Chivo";
  src: url("/static/fonts/chivo/Chivo-Italic-VariableFont_wght.ttf");
  font-weight: 100 900;
  font-style: italic;
}
/* Chivo Mono */
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Black.ttf");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-BlackItalic.ttf");
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-ExtraBoldItalic.ttf");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-ExtraLightItalic.ttf");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-LightItalic.ttf");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-MediumItalic.ttf");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-SemiBoldItalic.ttf");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("/static/fonts/chivo-mono/ChivoMono-ThinItalic.ttf");
  font-weight: 100;
  font-style: italic;
}
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
@custom-media --useDataOK (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --highContrast (prefers-contrast: more);
@custom-media --lowContrast (prefers-contrast: less);
@custom-media --invertedColors (inverted-colors: inverted);
@custom-media --forcedColors (forced-colors: active);
@custom-media --portrait (orientation: portrait);
@custom-media --landscape (orientation: landscape);
@custom-media --HDcolor (dynamic-range: high) or (color-gamut: p3);
@custom-media --touch (hover: none) and (pointer: coarse);
@custom-media --stylus (hover: none) and (pointer: fine);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-only (0px <= width < 240px);
@custom-media --xxs-n-above (width >= 240px);
@custom-media --xxs-n-below (width < 240px);
@custom-media --xxs-phone (--xxs-only) and (--portrait);
@custom-media --xs-only (240px <= width < 360px);
@custom-media --xs-n-above (width >= 360px);
@custom-media --xs-n-below (width < 360px);
@custom-media --xs-phone (--xs-only) and (--portrait);
@custom-media --sm-only (360px <= width < 480px);
@custom-media --sm-n-above (width >= 480px);
@custom-media --sm-n-below (width < 480px);
@custom-media --sm-phone (--sm-only) and (--portrait);
@custom-media --md-only (480px <= width < 768px);
@custom-media --md-n-above (width >= 768px);
@custom-media --md-n-below (width < 768px);
@custom-media --md-phone (--md-only) and (--portrait);
@custom-media --lg-only (768px <= width < 1024px);
@custom-media --lg-n-above (width >= 1024px);
@custom-media --lg-n-below (width < 1024px);
@custom-media --lg-phone (--lg-only) and (--portrait);
@custom-media --xl-only (1024px <= width < 1440px);
@custom-media --xl-n-above (width >= 1440px);
@custom-media --xl-n-below (width < 1440px);
@custom-media --xxl-only (1440px <= width < 1920px);
@custom-media --xxl-n-above (width >= 1920px);
@custom-media --xxl-n-below (width < 1920px);
:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-in-bloom {
  0% {
    opacity: 0;
    filter: brightness(1) blur(20px);
  }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@keyframes fade-out-bloom {
  100% {
    opacity: 0;
    filter: brightness(1) blur(20px);
  }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px);
  }
  0% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}
@keyframes scale-up {
  to {
    transform: scale(1.25);
  }
}
@keyframes scale-down {
  to {
    transform: scale(0.75);
  }
}
@keyframes slide-out-up {
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-out-down {
  to {
    transform: translateY(100%);
  }
}
@keyframes slide-out-right {
  to {
    transform: translateX(100%);
  }
}
@keyframes slide-out-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes slide-in-down {
  from {
    transform: translateY(-100%);
  }
}
@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
}
@keyframes shake-x {
  0%, 100% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(-5%);
  }
  40% {
    transform: translateX(5%);
  }
  60% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(5%);
  }
}
@keyframes shake-y {
  0%, 100% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(-5%);
  }
  40% {
    transform: translateY(5%);
  }
  60% {
    transform: translateY(-5%);
  }
  80% {
    transform: translateY(5%);
  }
}
@keyframes shake-z {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-2deg);
  }
  40% {
    transform: rotate(2deg);
  }
  60% {
    transform: rotate(-2deg);
  }
  80% {
    transform: rotate(2deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes ping {
  90%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes float {
  50% {
    transform: translateY(-25%);
  }
}
@keyframes bounce {
  25% {
    transform: translateY(-20%);
  }
  40% {
    transform: translateY(-3%);
  }
  0%, 60%, 100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  50% {
    transform: scale(0.9, 0.9);
  }
}
@media (--OSdark) {
  @keyframes fade-in-bloom {
    0% {
      opacity: 0;
      filter: brightness(1) blur(20px);
    }
    10% {
      opacity: 1;
      filter: brightness(0.5) blur(10px);
    }
    100% {
      opacity: 1;
      filter: brightness(1) blur(0);
    }
  }
}
@media (--OSdark) {
  @keyframes fade-out-bloom {
    100% {
      opacity: 0;
      filter: brightness(1) blur(20px);
    }
    10% {
      opacity: 1;
      filter: brightness(0.5) blur(10px);
    }
    0% {
      opacity: 1;
      filter: brightness(1) blur(0);
    }
  }
}
:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
  --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
  --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
  --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
  --ease-spring-1: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
    1.001
  );
  --ease-spring-2: linear(
    0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
    1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
    0.999 61.6%, 0.995 71.2%, 1
  );
  --ease-spring-3: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1
  );
  --ease-spring-4: linear(
    0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
    1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
    0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
    0.998 78.9%, 1
  );
  --ease-spring-5: linear(
    0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
    1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
    0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
    1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
  );
  --ease-bounce-1: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
    0.885, 0.895, 0.908 89.7%, 0.946, 1
  );
  --ease-bounce-2: linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
    1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
    0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
    0.973, 1
  );
  --ease-bounce-3: linear(
    0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
    1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
    0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
    0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
    0.96, 0.968, 0.981, 1
  );
  --ease-bounce-4: linear(
    0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
    0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
    0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
    0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
  );
  --ease-bounce-5: linear(
    0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
    0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
    0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
    0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
    0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
  );
  --ease-circ-in: cubic-bezier(.6,.04,.98,.335);
  --ease-circ-in-out: cubic-bezier(.785,.135,.15,.86);
  --ease-circ-out: cubic-bezier(.075,.82,.165,1);
  --ease-cubic-in: cubic-bezier(.55,.055,.675,.19);
  --ease-cubic-in-out: cubic-bezier(.645,.045,.355,1);
  --ease-cubic-out: cubic-bezier(.215,.61,.355,1);
  --ease-expo-in: cubic-bezier(.95,.05,.795,.035);
  --ease-expo-in-out: cubic-bezier(1,0,0,1);
  --ease-expo-out: cubic-bezier(.19,1,.22,1);
  --ease-quad-in: cubic-bezier(.55,.085,.68,.53);
  --ease-quad-in-out: cubic-bezier(.455,.03,.515,.955);
  --ease-quad-out: cubic-bezier(.25,.46,.45,.94);
  --ease-quart-in: cubic-bezier(.895,.03,.685,.22);
  --ease-quart-in-out: cubic-bezier(.77,0,.175,1);
  --ease-quart-out: cubic-bezier(.165,.84,.44,1);
  --ease-quint-in: cubic-bezier(.755,.05,.855,.06);
  --ease-quint-in-out: cubic-bezier(.86,0,.07,1);
  --ease-quint-out: cubic-bezier(.23,1,.32,1);
  --ease-sine-in: cubic-bezier(.47,0,.745,.715);
  --ease-sine-in-out: cubic-bezier(.445,.05,.55,.95);
  --ease-sine-out: cubic-bezier(.39,.575,.565,1);
}

/* ============================================================
   LAYOUT COMPOSITIONS
   High-level structural primitives (The "C" in CUBE)
   ============================================================ */
/* Wrapper: Centered container with responsive padding */
.wrapper {
  margin-inline: auto;
  padding-inline: var(--space-4);
  max-width: var(--content-default);
}

.wrapper-wide {
  margin-inline: auto;
  padding-inline: var(--space-4);
  max-width: var(--content-wide);
}

.wrapper-narrow {
  margin-inline: auto;
  padding-inline: var(--space-4);
  max-width: var(--content-narrow);
}

/* Stack: Vertical flow layout */
.stack {
  display: flex;
  flex-direction: column;
}

/* Cluster: Horizontal wrapping layout */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cluster.no-wrap {
  flex-wrap: nowrap;
}

/* Grid: Responsive grid with no breakpoints needed */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
}

/* Flow: Prose vertical rhythm using the lobotomized owl selector */
.flow > * + * {
  margin-top: var(--flow-space, var(--space-4));
}

/* Header Group: Title and Subtitle grouping with controlled spacing */
.header-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.header-group .subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.header-group > * {
  margin: 0;
}

.app-shell {
  display: flex;
  height: 100vh;
  width: 100vw;
}

.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}

.app-content {
  flex: 1;
  display: flex;
  overflow: hidden; /* children handle their own scroll */
}

.app-main {
  flex: 1;
  overflow-y: auto; /* THE ONE scroll region */
  padding: var(--space-8);
  min-width: 0; /* prevent flex blowout */
}

.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* sidebar itself doesn't scroll */
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-sidebar-divider);
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
}
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav::-webkit-scrollbar {
  width: 0;
}
.sidebar-nav li.line {
  height: 1px;
  background: var(--color-sidebar-divider);
  margin-block: 2em;
}

.add-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.add-new a:not(.add-new-btn) {
  flex: 1;
}
.add-new a.add-new-btn {
  flex: 0;
}
.add-new a.add-new-btn:hover {
  color: white;
  transform: scale(1.05);
}

li.sidebar-item {
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive), color var(--transition-interactive);
  user-select: none;
}
li.sidebar-item:hover {
  background: var(--color-sidebar-active);
}
li.sidebar-item:hover > a {
  color: var(--color-text-inverse);
}
li.sidebar-item.is-active {
  background: var(--color-sidebar-active);
  color: var(--color-text-inverse);
}
li.sidebar-item.is-active .sidebar-item-icon {
  color: var(--color-accent);
}
li.sidebar-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-sidebar-text);
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-body), sans-serif;
}
li.sidebar-item > a .material-symbols-outlined {
  font-size: 1.1rem;
  font-variation-settings: "wght" 200;
}

.sidebar-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-sidebar-divider);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-interactive);
}
.sidebar-user:hover {
  background: var(--color-sidebar-active);
}

.sidebar-avatar {
  font-family: var(--font-body), system-ui;
  --size: 32px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--color-primary);
  aspect-ratio: 1/1;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: white;
  flex-shrink: 0;
  position: relative;
}
.sidebar-avatar span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sidebar-user-info {
  overflow: hidden;
}

.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--color-sidebar-text-dim);
}

.app-topbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-breadcrumb);
  font-size: var(--text-sm);
  font-family: var(--font-body);
}
.breadcrumb-list li {
  display: flex;
  align-items: center;
}
.breadcrumb-list li:not(:last-child)::after {
  content: "keyboard_arrow_right";
  font-family: "Material Symbols Outlined";
  font-size: 1.125rem;
  margin-left: var(--space-2);
  color: var(--color-text-faint);
}
.breadcrumb-list li.module-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
}
.breadcrumb-list a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.breadcrumb-list a:hover {
  color: var(--color-primary);
}

.institution-switcher {
  opacity: 0.5;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: opacity var(--transition-interactive);
}
.institution-switcher label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.institution-switcher .select {
  height: var(--space-8);
  padding-right: var(--space-10);
  font-size: var(--text-xs);
}
.institution-switcher:hover {
  opacity: 1;
}

/**
 * ============================================================
 * DIAKONOS — Button Block
 * CUBE CSS: this is a Block. One component, all its variants.
 *
 * Usage:
 *   <button class="btn" data-variant="primary">Save</button>
 *   <button class="btn" data-variant="secondary">Cancel</button>
 *   <button class="btn" data-variant="ghost">Learn more</button>
 *   <button class="btn" data-variant="danger">Delete</button>
 *   <button class="btn" data-variant="primary" data-state="loading">...</button>
 *   <button class="btn" data-variant="primary" disabled>Disabled</button>
 *
 * Why data attributes over modifier classes (.btn--primary)?
 *   Modifier classes are cosmetic — they carry no semantic meaning.
 *   data-variant="primary" signals intent to both CSS and JS.
 *   It reads naturally in HTML and is queryable:
 *   document.querySelectorAll('[data-variant="danger"]')
 * ============================================================
 */
/* ============================================================
   BASE — shared across all variants
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  height: var(--space-10);
  line-height: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-interactive), background-color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive), opacity var(--transition-interactive);
}

.btn > :is(svg, .icon, .material-symbols-outlined) {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ============================================================
   VARIANTS
   ============================================================ */
.btn[data-variant=primary] {
  background-color: var(--color-accent);
  color: var(--color-accent-on);
  border-color: var(--color-accent);
}

.btn[data-variant=primary]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn[data-variant=primary]:active {
  background-color: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

.btn[data-variant=secondary] {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn[data-variant=secondary]:hover {
  background-color: var(--color-surface-offset);
  border-color: var(--color-text-muted);
}

.btn[data-variant=secondary]:active {
  background-color: var(--color-surface-dynamic);
}

.btn[data-variant=ghost] {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.btn[data-variant=ghost]:hover {
  background-color: var(--color-surface-offset);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn[data-variant=ghost]:active {
  background-color: var(--color-surface-dynamic);
}

.btn[data-variant=danger] {
  background-color: var(--color-error);
  color: var(--color-error-on);
  border-color: var(--color-error);
}

.btn[data-variant=danger]:hover {
  background-color: var(--color-error-hover);
  border-color: var(--color-error-hover);
}

.btn[data-variant=danger]:active {
  background-color: var(--color-error-active);
  border-color: var(--color-error-active);
}

.btn[data-variant=danger-ghost] {
  background-color: transparent;
  color: var(--color-error);
  border-color: transparent;
}

.btn[data-variant=danger-ghost]:hover {
  background-color: var(--color-error-subtle);
  color: var(--color-error-hover);
}

.btn[data-variant=danger-ghost]:active {
  background-color: var(--color-error-subtle);
  color: var(--color-error-active);
}

/* ============================================================
   SIZE MODIFIERS
   Usage: <button class="btn" data-variant="primary" data-size="sm">
   ============================================================ */
.btn[data-size=sm] {
  padding: var(--space-1) var(--space-3);
  min-height: 1.75rem;
  height: unset;
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn[data-size=lg] {
  padding: var(--space-3) var(--space-6);
  min-height: 2.75rem; /* 44px — guaranteed touch target */
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

.btn[data-size=full] {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  min-height: 2.75rem;
}

/* ============================================================
   STATES
   ============================================================ */
.btn[data-state=loading] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn[data-state=loading]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-pill);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 1000ms linear infinite;
  cursor: not-allowed;
}

/* Spinner color per variant */
.btn[data-variant=primary][data-state=loading]::after {
  color: var(--color-accent-on);
}

.btn[data-variant=secondary][data-state=loading]::after {
  color: var(--color-text);
}

.btn[data-variant=ghost][data-state=loading]::after {
  color: var(--color-text-muted);
}

.btn[data-variant=danger][data-state=loading]::after {
  color: var(--color-error-on);
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn[data-state=success] {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-success-on);
  pointer-events: none;
}

.btn:disabled,
.btn[data-state=disabled] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* ============================================================
   FOCUS
   ============================================================ */
.btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn[data-state=loading]::after {
    animation-duration: 1500ms;
  }
}
/**
 * ============================================================
 * INPUT COMPONENT (BLOCK)
 * Following CUBE CSS Methodology
 * ============================================================
 */
.input,
.select,
.textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  height: var(--space-10);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-input-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.input::placeholder,
.select::placeholder,
.textarea::placeholder {
  color: var(--color-input-placeholder);
  opacity: 1;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: var(--shadow-focus);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background-color: var(--color-surface-offset);
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-color: var(--color-divider);
}
.input,
.select,
.textarea {
  /* Validation States */
}
.input[aria-invalid=true], .input.is-invalid,
.select[aria-invalid=true],
.select.is-invalid,
.textarea[aria-invalid=true],
.textarea.is-invalid {
  border-color: var(--color-error);
}
.input[aria-invalid=true]:focus, .input.is-invalid:focus,
.select[aria-invalid=true]:focus,
.select.is-invalid:focus,
.textarea[aria-invalid=true]:focus,
.textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px oklch(from var(--color-error) l c h/0.2);
}

.select {
  appearance: none; /* Disable the default arrow */
  -webkit-appearance: none; /* For WebKit-based browsers */
  -moz-appearance: none; /* For Firefox */
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: var(--space-5);
}

.textarea {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

/* Checkboxes and Radios */
.checkbox,
.radio {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-primary);
  border: 1px solid var(--color-border);
}

/* Input groups and helpers */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.form-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

.pagination {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.pagination .pagination-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-1);
}
.pagination .pagination-list li {
  margin-bottom: 0;
}
.pagination .pagination-link,
.pagination .pagination-previous,
.pagination .pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  min-width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: all var(--transition-interactive);
  cursor: pointer;
}
.pagination .pagination-link:hover:not([disabled]),
.pagination .pagination-previous:hover:not([disabled]),
.pagination .pagination-next:hover:not([disabled]) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: var(--color-surface-offset);
}
.pagination .pagination-link.is-current,
.pagination .pagination-previous.is-current,
.pagination .pagination-next.is-current {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-on);
  font-weight: var(--font-weight-semibold);
}
.pagination .pagination-link[disabled],
.pagination .pagination-previous[disabled],
.pagination .pagination-next[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-surface-offset);
}

.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.table thead {
  background-color: var(--color-surface-offset);
  border-bottom: 2px solid var(--color-border);
}
.table thead th {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.table thead th a {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: color var(--transition-interactive);
}
.table thead th a:hover {
  color: var(--color-primary);
}
.table thead th a .material-symbols-outlined {
  font-size: 1.1rem;
  margin-top: -1px;
}
.table tbody tr {
  border-bottom: 1px solid var(--color-divider);
  transition: background-color var(--transition-interactive);
}
.table tbody tr:last-child {
  border-bottom: none;
}
.table tbody tr:hover {
  background-color: var(--color-row-hover);
}
.table tbody tr.is-selected {
  background-color: var(--color-row-selected);
  border-left: 3px solid var(--color-row-selected-border);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  vertical-align: middle;
  line-height: var(--leading-snug);
}
.table tbody td[colspan] {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-style: italic;
}

.batch-steps {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  align-items: flex-end;
  max-width: var(--content-wide);
}
.batch-steps .batch-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.batch-steps .batch-step label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.batch-steps .batch-step.step-donor {
  flex: 3;
  min-width: 200px;
}
.batch-steps .batch-step.step-amount {
  min-width: 100px;
  max-width: 120px;
}
.batch-steps .batch-step.step-date {
  flex: 1;
  min-width: 130px;
}
.batch-steps .batch-step.step-campaign {
  flex: 2;
  min-width: 150px;
}
.batch-steps .step-submit {
  margin-bottom: 0;
}

#donor-search-results {
  width: 100%;
  max-height: 400px;
  overflow-y: hidden;
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: -1px; /* Overlap input border */
}
#donor-search-results.is-hidden {
  display: none;
}
#donor-search-results .search-results-container {
  max-height: 398px;
  overflow-y: auto;
}
#donor-search-results .search-result-row {
  cursor: pointer;
}
#donor-search-results .search-result-row input[type=radio] {
  display: none;
}
#donor-search-results .search-result-row:hover, #donor-search-results .search-result-row.is-selected {
  background: var(--color-surface-offset);
}
#donor-search-results .search-result-row:hover .indicator, #donor-search-results .search-result-row.is-selected .indicator {
  display: flex;
}
#donor-search-results .search-result-row.is-selected {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.batch-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-4);
}
.batch-items-table th, .batch-items-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
}
.batch-items-table th {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  background: var(--color-surface-offset);
}
.batch-items-table tbody tr:hover {
  background: var(--color-surface-offset);
}
.batch-items-table tfoot {
  font-weight: var(--font-weight-bold);
  background: var(--color-surface-offset);
}
.batch-items-table tfoot td {
  border-top: 2px solid var(--color-border);
}
.batch-items-table .counter {
  color: var(--color-text-faint);
  width: 1%;
  white-space: nowrap;
}

.batch-actions {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding-top: var(--space-4);
  max-width: var(--content-wide);
}

.batch-finalized-notice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-success);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
}

.batch-empty {
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-4);
  text-align: center;
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
}

.search-no-results {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-sm);
}
.search-no-results span {
  font-size: var(--text-sm);
}

.search-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid var(--color-divider);
  user-select: none;
}

.search-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.search-result-list li {
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 0;
}
.search-result-list li:last-child {
  border-bottom: none;
}

.search-result-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: none;
  text-align: left;
  font-size: var(--text-sm);
  color: inherit;
  text-decoration: none;
}
.search-result-row .icon {
  color: var(--color-primary);
  margin-right: var(--space-2);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.search-result-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.search-result-info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.search-match-snippets {
  font-size: var(--text-xs);
  line-height: 1;
}

.search-loading {
  visibility: hidden;
  height: 0;
}
.search-loading .htmx-request {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Donor search results container (HTMX target) */
.indicator {
  display: none;
  align-items: center;
  position: absolute;
  right: var(--space-3);
  color: var(--color-accent);
}
.indicator span {
  font-size: var(--text-base);
}

/**
 * ============================================================
 * DIAKONOS — Utilities
 * CUBE CSS methodology: one job, done well.
 *
 * The rule:
 *   - Style repeats across unrelated components → utility
 *   - Style is specific to one component → block
 *   - Style is a layout pattern → composition
 *
 * A utility touches ONE concern.
 * If you're reaching for 6 utilities on one element, you need a block.
 * ============================================================
 */
/* ============================================================
   SCREEN READER ONLY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   GAP — applied to .stack, .cluster, .grid-auto
   ============================================================ */
.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

/* ============================================================
   SURFACE
   ============================================================ */
.bg-base {
  background-color: var(--color-bg);
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-surface-2 {
  background-color: var(--color-surface-2);
}

.bg-offset {
  background-color: var(--color-surface-offset);
}

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

.bg-accent {
  background-color: var(--color-accent);
}

.bg-error {
  background-color: var(--color-error);
}

.bg-success {
  background-color: var(--color-success);
}

/* ============================================================
   TEXT COLOR
   ============================================================ */
.text-base {
  color: var(--color-text);
}

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

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

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

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

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

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

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

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base-size {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-display {
  font-family: var(--font-display), serif;
}

.font-body {
  font-family: var(--font-body), sans-serif;
}

.font-mono {
  font-family: var(--font-mono), monospace;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wide {
  letter-spacing: var(--tracking-wide);
}

.tracking-widest {
  letter-spacing: var(--tracking-widest);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* ============================================================
   BORDER
   ============================================================ */
.border {
  border: 1px solid var(--color-border);
}

.border-strong {
  border: 1px solid var(--color-border-strong);
}

.border-top {
  border-top: 1px solid var(--color-border);
}

.border-bottom {
  border-bottom: 1px solid var(--color-border);
}

.radius-sm {
  border-radius: var(--radius-sm);
}

.radius-md {
  border-radius: var(--radius-md);
}

.radius-lg {
  border-radius: var(--radius-lg);
}

.radius-pill {
  border-radius: var(--radius-pill);
}

/* ============================================================
   SHADOW
   ============================================================ */
.shadow-xs {
  box-shadow: var(--shadow-xs);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   SPACING
   Intentionally limited. Arbitrary padding belongs in a block.
   ============================================================ */
/* --- Uniform padding --- */
.pad-1 {
  padding: var(--space-1);
}

.pad-2 {
  padding: var(--space-2);
}

.pad-3 {
  padding: var(--space-3);
}

.pad-4 {
  padding: var(--space-4);
}

.pad-6 {
  padding: var(--space-6);
}

.pad-8 {
  padding: var(--space-8);
}

.pad-10 {
  padding: var(--space-10);
}

/* --- Inline padding (horizontal) --- */
.pad-inline-2 {
  padding-inline: var(--space-2);
}

.pad-inline-3 {
  padding-inline: var(--space-3);
}

.pad-inline-4 {
  padding-inline: var(--space-4);
}

.pad-inline-6 {
  padding-inline: var(--space-6);
}

.pad-inline-8 {
  padding-inline: var(--space-8);
}

/* --- Block padding (vertical) --- */
.pad-block-2 {
  padding-block: var(--space-2);
}

.pad-block-4 {
  padding-block: var(--space-4);
}

.pad-block-6 {
  padding-block: var(--space-6);
}

.pad-block-8 {
  padding-block: var(--space-8);
}

.pad-block-12 {
  padding-block: var(--space-12);
}

/* --- Stack margin (bottom-only, for flow spacing) --- */
.mb-0 {
  margin-block-end: 0;
}

.mb-2 {
  margin-block-end: var(--space-2);
}

.mb-4 {
  margin-block-end: var(--space-4);
}

.mb-6 {
  margin-block-end: var(--space-6);
}

.mb-8 {
  margin-block-end: var(--space-8);
}

/* --- Centering --- */
.mx-auto {
  margin-inline: auto;
}

/* ============================================================
   Hide/show on hover
   ============================================================ */
.show-on-hover-parent .show-on-hover-child {
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-in-out);
}
.show-on-hover-parent .show-on-hover-child :hover {
  visibility: visible;
  opacity: 1;
}

.show-on-hover-parent:hover .show-on-hover-child {
  visibility: visible;
  opacity: 1;
}

/* Opacity utilities */
.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* ============================================================
   INTERACTIVE
   ============================================================ */
.interactive {
  transition: color var(--transition-interactive), background-color var(--transition-interactive), border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}

.clickable {
  cursor: pointer;
}

.select-none {
  user-select: none;
}

.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.is-hidden {
  display: none !important;
}

.is-forbidden {
  cursor: not-allowed;
  user-select: none;
}
.is-forbidden * {
  pointer-events: none;
}

/* ============================================================
   Escape hatches — use sparingly.
   If you need these more than once on similar elements,
   create a named composition instead.
   ============================================================ */
.flex {
  display: flex;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.inline-flex {
  display: inline-flex;
}

.place-center {
  display: flex;
  place-items: center;
}