/* Geist, without React.
 *
 * @vercel/geistcn is not on the public npm registry, so the design system arrives in
 * three parts: the --ds-* tokens below were copied once (2026-10-15) from the CSS that
 * vercel.com/geist serves, light values in :root and dark ones under
 * prefers-color-scheme; the fonts are Geist and Geist Mono from the `geist` npm
 * package (OFL, fonts/OFL.txt); the components after the tokens follow the specs at
 * vercel.com/geist/<component>.md. Token names are kept exactly, so those docs apply.
 */

:root {
  color-scheme: light dark;
  --ds-gray-100-value: 0, 0%, 95%;
  --ds-gray-200-value: 0, 0%, 92%;
  --ds-gray-300-value: 0, 0%, 90%;
  --ds-gray-400-value: 0, 0%, 92%;
  --ds-gray-500-value: 0, 0%, 79%;
  --ds-gray-600-value: 0, 0%, 66%;
  --ds-gray-700-value: 0, 0%, 56%;
  --ds-gray-800-value: 0, 0%, 49%;
  --ds-gray-900-value: 0, 0%, 30%;
  --ds-gray-1000-value: 0, 0%, 9%;
  --ds-gray-alpha-100: #0000000d;
  --ds-gray-alpha-200: #00000014;
  --ds-gray-alpha-300: #0000001a;
  --ds-gray-alpha-400: #00000014;
  --ds-gray-alpha-500: #00000036;
  --ds-gray-alpha-600: #00000057;
  --ds-gray-alpha-700: #00000070;
  --ds-gray-alpha-800: #00000082;
  --ds-gray-alpha-900: #000000b3;
  --ds-gray-alpha-1000: #000000e8;
  --ds-background-100-value: 0, 0%, 100%;
  --ds-background-200-value: 0, 0%, 98%;
  --ds-blue-100-value: 212, 100%, 97%;
  --ds-blue-200-value: 210, 100%, 96%;
  --ds-blue-300-value: 210, 100%, 94%;
  --ds-blue-400-value: 209, 100%, 90%;
  --ds-blue-500-value: 209, 100%, 80%;
  --ds-blue-600-value: 208, 100%, 66%;
  --ds-blue-700-value: 212, 100%, 48%;
  --ds-blue-800-value: 212, 100%, 41%;
  --ds-blue-900-value: 211, 100%, 42%;
  --ds-blue-1000-value: 211, 100%, 15%;
  --ds-red-100-value: 0, 100%, 97%;
  --ds-red-200-value: 0, 100%, 96%;
  --ds-red-300-value: 0, 100%, 95%;
  --ds-red-400-value: 0, 90%, 92%;
  --ds-red-500-value: 0, 82%, 85%;
  --ds-red-600-value: 359, 90%, 71%;
  --ds-red-700-value: 358, 75%, 59%;
  --ds-red-800-value: 358, 70%, 52%;
  --ds-red-900-value: 358, 66%, 48%;
  --ds-red-1000-value: 355, 49%, 15%;
  --ds-amber-100-value: 39, 100%, 95%;
  --ds-amber-200-value: 44, 100%, 92%;
  --ds-amber-300-value: 43, 96%, 90%;
  --ds-amber-400-value: 42, 100%, 78%;
  --ds-amber-500-value: 38, 100%, 71%;
  --ds-amber-600-value: 36, 90%, 62%;
  --ds-amber-700-value: 39, 100%, 57%;
  --ds-amber-800-value: 35, 100%, 52%;
  --ds-amber-900-value: 30, 100%, 32%;
  --ds-amber-1000-value: 20, 79%, 17%;
  --ds-green-100-value: 120, 60%, 96%;
  --ds-green-200-value: 120, 60%, 95%;
  --ds-green-300-value: 120, 60%, 91%;
  --ds-green-400-value: 122, 60%, 86%;
  --ds-green-500-value: 124, 60%, 75%;
  --ds-green-600-value: 125, 60%, 64%;
  --ds-green-700-value: 131, 41%, 46%;
  --ds-green-800-value: 132, 43%, 39%;
  --ds-green-900-value: 133, 50%, 32%;
  --ds-green-1000-value: 128, 29%, 15%;
  --ds-teal-100-value: 169, 70%, 96%;
  --ds-teal-200-value: 167, 70%, 94%;
  --ds-teal-300-value: 168, 70%, 90%;
  --ds-teal-400-value: 170, 70%, 85%;
  --ds-teal-500-value: 170, 70%, 72%;
  --ds-teal-600-value: 170, 70%, 57%;
  --ds-teal-700-value: 173, 80%, 36%;
  --ds-teal-800-value: 173, 83%, 30%;
  --ds-teal-900-value: 174, 91%, 25%;
  --ds-teal-1000-value: 171, 80%, 13%;
  --ds-purple-100-value: 276, 100%, 97%;
  --ds-purple-200-value: 277, 87%, 97%;
  --ds-purple-300-value: 274, 78%, 95%;
  --ds-purple-400-value: 276, 71%, 92%;
  --ds-purple-500-value: 274, 70%, 82%;
  --ds-purple-600-value: 273, 72%, 73%;
  --ds-purple-700-value: 272, 51%, 54%;
  --ds-purple-800-value: 272, 47%, 45%;
  --ds-purple-900-value: 274, 71%, 43%;
  --ds-purple-1000-value: 276, 100%, 15%;
  --ds-pink-100-value: 330, 100%, 96%;
  --ds-pink-200-value: 340, 90%, 96%;
  --ds-pink-300-value: 340, 82%, 94%;
  --ds-pink-400-value: 341, 76%, 91%;
  --ds-pink-500-value: 340, 75%, 84%;
  --ds-pink-600-value: 341, 75%, 73%;
  --ds-pink-700-value: 336, 80%, 58%;
  --ds-pink-800-value: 336, 74%, 51%;
  --ds-pink-900-value: 336, 65%, 45%;
  --ds-pink-1000-value: 333, 74%, 15%;
  --ds-contrast-fg: #fff;
  --ds-focus-border: 0 0 0 1px var(--ds-gray-alpha-600), 0px 0px 0px 4px #00000029;
  --ds-focus-color: var(--ds-blue-700);
  --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
  --ds-shadow-border-base: 0 0 0 1px #00000014;
  --ds-shadow-border-inset: inset 0 0 0 1px #00000014;
  --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
  --ds-shadow-2xs: 0px 1px 1px #0000000a;
  --ds-shadow-xs: 0px 1px 2px #0000000a;
  --ds-shadow-small: 0px 2px 2px #0000000a;
  --ds-shadow-border-small: var(--ds-shadow-border-base), var(--ds-shadow-small), var(--ds-shadow-background-border);
  --ds-shadow-medium: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
  --ds-shadow-border-medium: var(--ds-shadow-border-base), var(--ds-shadow-medium), var(--ds-shadow-background-border);
  --ds-shadow-large: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
  --ds-shadow-border-large: var(--ds-shadow-border-base), var(--ds-shadow-large), var(--ds-shadow-background-border);
  --ds-shadow-xl: 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
  --ds-shadow-2xl: 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
  --ds-shadow-tooltip: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px #0000000a, var(--ds-shadow-background-border);
  --ds-shadow-menu: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, var(--ds-shadow-background-border);
  --ds-shadow-modal: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--ds-shadow-background-border);
  --ds-shadow-modal-elevated: 0px 0px 0px 1px #00000014, 0px 32px 72px -12px #0000000f, 0px 8px 32px -12px #00000014, 0px 8px 24px -12px #0000001f;
  --ds-shadow-fullscreen: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--ds-shadow-background-border);
  --ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-focus-color);
  --ds-focus-ring-outline: 2px solid var(--ds-focus-color);
  --ds-overlay-backdrop-color: var(--ds-gray-100);
  --ds-overlay-backdrop-opacity: .8;
  --ds-gray-100: hsla(var(--ds-gray-100-value), 1);
  --ds-gray-200: hsla(var(--ds-gray-200-value), 1);
  --ds-gray-300: hsla(var(--ds-gray-300-value), 1);
  --ds-gray-400: hsla(var(--ds-gray-400-value), 1);
  --ds-gray-500: hsla(var(--ds-gray-500-value), 1);
  --ds-gray-600: hsla(var(--ds-gray-600-value), 1);
  --ds-gray-700: hsla(var(--ds-gray-700-value), 1);
  --ds-gray-800: hsla(var(--ds-gray-800-value), 1);
  --ds-gray-900: hsla(var(--ds-gray-900-value), 1);
  --ds-gray-1000: hsla(var(--ds-gray-1000-value), 1);
  --ds-background-100: hsla(var(--ds-background-100-value), 1);
  --ds-background-200: hsla(var(--ds-background-200-value), 1);
  --ds-blue-100: hsla(var(--ds-blue-100-value), 1);
  --ds-blue-200: hsla(var(--ds-blue-200-value), 1);
  --ds-blue-300: hsla(var(--ds-blue-300-value), 1);
  --ds-blue-400: hsla(var(--ds-blue-400-value), 1);
  --ds-blue-500: hsla(var(--ds-blue-500-value), 1);
  --ds-blue-600: hsla(var(--ds-blue-600-value), 1);
  --ds-blue-700: hsla(var(--ds-blue-700-value), 1);
  --ds-blue-800: hsla(var(--ds-blue-800-value), 1);
  --ds-blue-900: hsla(var(--ds-blue-900-value), 1);
  --ds-blue-1000: hsla(var(--ds-blue-1000-value), 1);
  --ds-amber-100: hsla(var(--ds-amber-100-value), 1);
  --ds-amber-200: hsla(var(--ds-amber-200-value), 1);
  --ds-amber-300: hsla(var(--ds-amber-300-value), 1);
  --ds-amber-400: hsla(var(--ds-amber-400-value), 1);
  --ds-amber-500: hsla(var(--ds-amber-500-value), 1);
  --ds-amber-600: hsla(var(--ds-amber-600-value), 1);
  --ds-amber-700: hsla(var(--ds-amber-700-value), 1);
  --ds-amber-800: hsla(var(--ds-amber-800-value), 1);
  --ds-amber-900: hsla(var(--ds-amber-900-value), 1);
  --ds-amber-1000: hsla(var(--ds-amber-1000-value), 1);
  --ds-red-100: hsla(var(--ds-red-100-value), 1);
  --ds-red-200: hsla(var(--ds-red-200-value), 1);
  --ds-red-300: hsla(var(--ds-red-300-value), 1);
  --ds-red-400: hsla(var(--ds-red-400-value), 1);
  --ds-red-500: hsla(var(--ds-red-500-value), 1);
  --ds-red-600: hsla(var(--ds-red-600-value), 1);
  --ds-red-700: hsla(var(--ds-red-700-value), 1);
  --ds-red-800: hsla(var(--ds-red-800-value), 1);
  --ds-red-900: hsla(var(--ds-red-900-value), 1);
  --ds-red-1000: hsla(var(--ds-red-1000-value), 1);
  --ds-green-100: hsla(var(--ds-green-100-value), 1);
  --ds-green-200: hsla(var(--ds-green-200-value), 1);
  --ds-green-300: hsla(var(--ds-green-300-value), 1);
  --ds-green-400: hsla(var(--ds-green-400-value), 1);
  --ds-green-500: hsla(var(--ds-green-500-value), 1);
  --ds-green-600: hsla(var(--ds-green-600-value), 1);
  --ds-green-700: hsla(var(--ds-green-700-value), 1);
  --ds-green-800: hsla(var(--ds-green-800-value), 1);
  --ds-green-900: hsla(var(--ds-green-900-value), 1);
  --ds-green-1000: hsla(var(--ds-green-1000-value), 1);
  --ds-teal-100: hsla(var(--ds-teal-100-value), 1);
  --ds-teal-200: hsla(var(--ds-teal-200-value), 1);
  --ds-teal-300: hsla(var(--ds-teal-300-value), 1);
  --ds-teal-400: hsla(var(--ds-teal-400-value), 1);
  --ds-teal-500: hsla(var(--ds-teal-500-value), 1);
  --ds-teal-600: hsla(var(--ds-teal-600-value), 1);
  --ds-teal-700: hsla(var(--ds-teal-700-value), 1);
  --ds-teal-800: hsla(var(--ds-teal-800-value), 1);
  --ds-teal-900: hsla(var(--ds-teal-900-value), 1);
  --ds-teal-1000: hsla(var(--ds-teal-1000-value), 1);
  --ds-purple-100: hsla(var(--ds-purple-100-value), 1);
  --ds-purple-200: hsla(var(--ds-purple-200-value), 1);
  --ds-purple-300: hsla(var(--ds-purple-300-value), 1);
  --ds-purple-400: hsla(var(--ds-purple-400-value), 1);
  --ds-purple-500: hsla(var(--ds-purple-500-value), 1);
  --ds-purple-600: hsla(var(--ds-purple-600-value), 1);
  --ds-purple-700: hsla(var(--ds-purple-700-value), 1);
  --ds-purple-800: hsla(var(--ds-purple-800-value), 1);
  --ds-purple-900: hsla(var(--ds-purple-900-value), 1);
  --ds-purple-1000: hsla(var(--ds-purple-1000-value), 1);
  --ds-pink-100: hsla(var(--ds-pink-100-value), 1);
  --ds-pink-200: hsla(var(--ds-pink-200-value), 1);
  --ds-pink-300: hsla(var(--ds-pink-300-value), 1);
  --ds-pink-400: hsla(var(--ds-pink-400-value), 1);
  --ds-pink-500: hsla(var(--ds-pink-500-value), 1);
  --ds-pink-600: hsla(var(--ds-pink-600-value), 1);
  --ds-pink-700: hsla(var(--ds-pink-700-value), 1);
  --ds-pink-800: hsla(var(--ds-pink-800-value), 1);
  --ds-pink-900: hsla(var(--ds-pink-900-value), 1);
  --ds-pink-1000: hsla(var(--ds-pink-1000-value), 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ds-gray-100-value: 0, 0%, 10%;
    --ds-gray-200-value: 0, 0%, 12%;
    --ds-gray-300-value: 0, 0%, 16%;
    --ds-gray-400-value: 0, 0%, 18%;
    --ds-gray-500-value: 0, 0%, 27%;
    --ds-gray-600-value: 0, 0%, 53%;
    --ds-gray-700-value: 0, 0%, 56%;
    --ds-gray-800-value: 0, 0%, 49%;
    --ds-gray-900-value: 0, 0%, 63%;
    --ds-gray-1000-value: 0, 0%, 93%;
    --ds-gray-alpha-100: #ffffff0f;
    --ds-gray-alpha-200: #ffffff17;
    --ds-gray-alpha-300: #ffffff21;
    --ds-gray-alpha-400: #ffffff24;
    --ds-gray-alpha-500: #ffffff3d;
    --ds-gray-alpha-600: #ffffff82;
    --ds-gray-alpha-700: #ffffff8a;
    --ds-gray-alpha-800: #ffffff78;
    --ds-gray-alpha-900: #ffffff9c;
    --ds-gray-alpha-1000: #ffffffeb;
    --ds-background-100-value: 0, 0%, 4%;
    --ds-background-200-value: 0, 0%, 0%;
    --ds-blue-100-value: 216, 50%, 12%;
    --ds-blue-200-value: 214, 59%, 15%;
    --ds-blue-300-value: 213, 71%, 20%;
    --ds-blue-400-value: 212, 78%, 23%;
    --ds-blue-500-value: 211, 86%, 27%;
    --ds-blue-600-value: 206, 100%, 50%;
    --ds-blue-700-value: 212, 100%, 48%;
    --ds-blue-800-value: 212, 100%, 41%;
    --ds-blue-900-value: 210, 100%, 66%;
    --ds-blue-1000-value: 206, 100%, 96%;
    --ds-red-100-value: 357, 37%, 12%;
    --ds-red-200-value: 357, 46%, 16%;
    --ds-red-300-value: 356, 54%, 22%;
    --ds-red-400-value: 357, 55%, 26%;
    --ds-red-500-value: 357, 60%, 32%;
    --ds-red-600-value: 358, 75%, 59%;
    --ds-red-700-value: 358, 75%, 59%;
    --ds-red-800-value: 358, 69%, 52%;
    --ds-red-900-value: 358, 100%, 69%;
    --ds-red-1000-value: 353, 90%, 96%;
    --ds-amber-100-value: 35, 100%, 8%;
    --ds-amber-200-value: 32, 100%, 10%;
    --ds-amber-300-value: 33, 100%, 15%;
    --ds-amber-400-value: 35, 100%, 17%;
    --ds-amber-500-value: 35, 91%, 22%;
    --ds-amber-600-value: 39, 85%, 49%;
    --ds-amber-700-value: 39, 100%, 57%;
    --ds-amber-800-value: 35, 100%, 52%;
    --ds-amber-900-value: 39, 90%, 50%;
    --ds-amber-1000-value: 40, 94%, 93%;
    --ds-green-100-value: 136, 50%, 9%;
    --ds-green-200-value: 137, 50%, 12%;
    --ds-green-300-value: 136, 50%, 14%;
    --ds-green-400-value: 135, 70%, 16%;
    --ds-green-500-value: 135, 70%, 23%;
    --ds-green-600-value: 135, 70%, 34%;
    --ds-green-700-value: 131, 41%, 46%;
    --ds-green-800-value: 132, 43%, 39%;
    --ds-green-900-value: 131, 43%, 57%;
    --ds-green-1000-value: 136, 73%, 94%;
    --ds-teal-100-value: 169, 78%, 7%;
    --ds-teal-200-value: 170, 74%, 9%;
    --ds-teal-300-value: 171, 75%, 13%;
    --ds-teal-400-value: 171, 85%, 13%;
    --ds-teal-500-value: 172, 85%, 20%;
    --ds-teal-600-value: 172, 85%, 32%;
    --ds-teal-700-value: 173, 80%, 36%;
    --ds-teal-800-value: 173, 83%, 30%;
    --ds-teal-900-value: 174, 90%, 41%;
    --ds-teal-1000-value: 166, 71%, 93%;
    --ds-purple-100-value: 283, 30%, 12%;
    --ds-purple-200-value: 281, 38%, 16%;
    --ds-purple-300-value: 279, 44%, 23%;
    --ds-purple-400-value: 277, 46%, 28%;
    --ds-purple-500-value: 274, 49%, 35%;
    --ds-purple-600-value: 272, 51%, 54%;
    --ds-purple-700-value: 272, 51%, 54%;
    --ds-purple-800-value: 272, 47%, 45%;
    --ds-purple-900-value: 275, 80%, 71%;
    --ds-purple-1000-value: 281, 73%, 96%;
    --ds-pink-100-value: 335, 32%, 12%;
    --ds-pink-200-value: 335, 43%, 16%;
    --ds-pink-300-value: 335, 47%, 21%;
    --ds-pink-400-value: 335, 51%, 22%;
    --ds-pink-500-value: 335, 57%, 27%;
    --ds-pink-600-value: 336, 75%, 40%;
    --ds-pink-700-value: 336, 80%, 58%;
    --ds-pink-800-value: 336, 74%, 51%;
    --ds-pink-900-value: 341, 90%, 67%;
    --ds-pink-1000-value: 333, 90%, 96%;
    --ds-focus-border: 0 0 0 1px var(--ds-gray-alpha-600), 0px 0px 0px 4px #ffffff3d;
    --ds-focus-color: var(--ds-blue-900);
    --ds-shadow-border-inset: inset 0 0 0 1px #ffffff1a;
    --ds-shadow-background-border: 0 0 0 1px var(--ds-background-200);
    --ds-shadow-border-base: 0 0 0 1px #ffffff25;
    --ds-shadow-border: var(--ds-shadow-border-base), var(--ds-shadow-background-border);
    --ds-shadow-2xs: 0px 1px 1px #00000029;
    --ds-shadow-xs: 0px 1px 2px #00000029;
    --ds-shadow-small: 0px 1px 2px #00000029;
    --ds-shadow-border-small: var(--ds-shadow-border-base), var(--ds-shadow-small), var(--ds-shadow-background-border);
    --ds-shadow-medium: 0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
    --ds-shadow-border-medium: var(--ds-shadow-border-base), var(--ds-shadow-medium), var(--ds-shadow-background-border);
    --ds-shadow-large: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
    --ds-shadow-border-large: var(--ds-shadow-border-base), var(--ds-shadow-large), var(--ds-shadow-background-border);
    --ds-shadow-xl: 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
    --ds-shadow-2xl: 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
    --ds-shadow-tooltip: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px #0000000a, var(--ds-shadow-background-border);
    --ds-shadow-menu: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f, var(--ds-shadow-background-border);
    --ds-shadow-modal: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--ds-shadow-background-border);
    --ds-shadow-modal-elevated: 0 0 0 1px var(--ds-gray-alpha-400), 0px 32px 72px -12px #0000000f, 0px 8px 32px -12px #00000014, 0px 8px 24px -12px #0000001f;
    --ds-shadow-fullscreen: var(--ds-shadow-border-base), 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, var(--ds-shadow-background-border);
    --ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--ds-focus-color);
    --ds-overlay-backdrop-color: var(--ds-background-200);
  }
}

/* ------------------------------------------------------------------ fonts & base */

@font-face {
  font-family: "Geist";
  src: url("/static/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", Menlo, Monaco, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ds-background-100);
  color: var(--ds-gray-1000);
  font: 400 14px/20px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ds-gray-1000); color: var(--ds-gray-100); }
:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

/* Typography — values copied from the classes Geist publishes (text-*). */
.text-heading-32 { font: 600 32px/40px var(--font-sans); letter-spacing: -1.28px; }
.text-heading-24 { font: 600 24px/32px var(--font-sans); letter-spacing: -0.96px; }
.text-heading-20 { font: 600 20px/26px var(--font-sans); letter-spacing: -0.4px; }
.text-heading-16 { font: 600 16px/24px var(--font-sans); letter-spacing: -0.32px; }
.text-heading-14 { font: 600 14px/20px var(--font-sans); letter-spacing: -0.28px; }
.text-label-16 { font: 400 16px/20px var(--font-sans); }
.text-label-14 { font: 400 14px/20px var(--font-sans); }
.text-label-13 { font: 400 13px/16px var(--font-sans); }
.text-label-12 { font: 400 12px/16px var(--font-sans); }
.text-label-13-mono { font: 400 13px/20px var(--font-mono); }
.text-label-12-mono { font: 400 12px/16px var(--font-mono); }
.text-copy-16 { font: 400 16px/24px var(--font-sans); }
.text-copy-14 { font: 400 14px/20px var(--font-sans); }
.text-copy-13 { font: 400 13px/18px var(--font-sans); }
.text-label-14 strong, .text-label-16 strong { font-weight: 500; }
.muted { color: var(--ds-gray-900); }
.num { font-variant-numeric: tabular-nums; }
.mono, .input.mono { font-family: var(--font-mono); }
.error { color: var(--ds-red-900); min-height: 18px; }

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 12px; border: 0; border-radius: 6px; cursor: pointer;
  font: 500 14px/20px var(--font-sans); white-space: nowrap; text-decoration: none;
  background: var(--ds-background-100); color: var(--ds-gray-1000);
  box-shadow: var(--ds-shadow-border-small);
  transition: background 150ms ease, box-shadow 150ms ease;
}
.btn:hover { background: var(--ds-gray-alpha-200); }
.btn:focus-visible { box-shadow: var(--ds-focus-ring); }
.btn-small { height: 32px; padding: 0 6px; font-size: 14px; }
.btn-large { height: 48px; padding: 0 14px; font-size: 16px; }
.btn-primary { background: var(--ds-gray-1000); color: var(--ds-background-100); box-shadow: none; }
.btn-primary:hover { background: color-mix(in srgb, var(--ds-gray-1000) 85%, var(--ds-background-100)); }
.btn-tertiary { background: transparent; box-shadow: none; }
.btn-tertiary:hover { background: var(--ds-gray-alpha-200); }
.btn-error { background: var(--ds-red-800); color: #fff; box-shadow: none; }
.btn-error:hover { background: var(--ds-red-900); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--ds-gray-100); color: var(--ds-gray-700); box-shadow: var(--ds-shadow-border-small);
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ inputs */

.input, .select {
  height: 40px; width: 100%; padding: 0 12px; border: 0; border-radius: 6px;
  background: var(--ds-background-100); color: var(--ds-gray-1000);
  font: 400 14px/20px var(--font-sans);
  box-shadow: 0 0 0 1px var(--ds-gray-alpha-400);
  transition: box-shadow 150ms ease;
}
.input:hover, .select:hover { box-shadow: 0 0 0 1px var(--ds-gray-alpha-500); }
.input:focus, .select:focus { outline: none; box-shadow: var(--ds-focus-border); }
.input::placeholder { color: var(--ds-gray-700); }
.input-small, .select-small { height: 32px; }
textarea.input { height: auto; min-height: 72px; padding: 10px 12px; resize: vertical; }
.select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
input[type="file"].input { padding: 9px 12px; height: auto; }
input[type="file"]::file-selector-button {
  font: 500 13px/20px var(--font-sans); margin-right: 12px; padding: 0 10px; border: 0; border-radius: 4px;
  color: var(--ds-gray-1000); background: var(--ds-background-100); box-shadow: 0 0 0 1px var(--ds-gray-alpha-400); cursor: pointer;
}
.field { display: grid; gap: 8px; }
.field > span { color: var(--ds-gray-900); }

/* Switch (Geist "Switch" with one option: an on/off toggle). */
.toggle {
  appearance: none; width: 28px; height: 16px; margin: 0; border-radius: 999px; cursor: pointer;
  background: var(--ds-gray-400); position: relative; transition: background 150ms ease;
  box-shadow: inset 0 0 0 1px var(--ds-gray-alpha-400);
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: var(--ds-shadow-small); transition: transform 150ms ease;
}
.toggle:checked { background: var(--ds-blue-700); }
.toggle:checked::after { transform: translateX(12px); }

/* ------------------------------------------------------------------ choicebox */

.choice-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
/* Floated, so it is laid out inside the fieldset's box instead of on its top edge. */
.choice-group legend { float: left; width: 100%; padding: 0; display: flex; gap: 8px; align-items: center; }
.choice-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.choice {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 44px; padding: 10px 12px; border-radius: 6px; cursor: pointer;
  background: var(--ds-background-100); box-shadow: 0 0 0 1px var(--ds-gray-alpha-400);
  transition: background 150ms ease, box-shadow 150ms ease;
}
.choice:hover { background: var(--ds-gray-alpha-100); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .dot {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ds-gray-alpha-600); background: var(--ds-background-100);
}
.choice:has(input:checked) { background: var(--ds-blue-100); box-shadow: 0 0 0 1px var(--ds-blue-700); }
.choice:has(input:checked) .title { color: var(--ds-blue-900); font-weight: 500; }
.choice:has(input:checked) .dot { box-shadow: inset 0 0 0 5px var(--ds-blue-700); background: #fff; }
.choice:has(input:focus-visible) { box-shadow: var(--ds-focus-ring); }
.choice-group.active legend { color: var(--ds-blue-900); }

/* ------------------------------------------------------------------ surfaces */

.card { background: var(--ds-background-100); border-radius: 12px; box-shadow: var(--ds-shadow-border-medium); }
.card-body { padding: 24px; }
.card-footer {
  display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px;
  background: var(--ds-background-200); border-top: 1px solid var(--ds-gray-alpha-400);
  border-radius: 0 0 12px 12px;
}

.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 999px;
  font: 500 12px/16px var(--font-sans); white-space: nowrap;
  background: var(--ds-gray-200); color: var(--ds-gray-1000);
}
.badge-blue { background: var(--ds-blue-200); color: var(--ds-blue-900); }
.badge-green { background: var(--ds-green-200); color: var(--ds-green-900); }
.badge-amber { background: var(--ds-amber-200); color: var(--ds-amber-900); }
.badge-red { background: var(--ds-red-200); color: var(--ds-red-900); }

kbd, .kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 4px; border-radius: 4px; background: var(--ds-background-100); color: var(--ds-gray-900);
  box-shadow: var(--ds-shadow-border-small); font: 400 12px/16px var(--font-sans);
}

/* Meter: the track is a lighter step of the fill's own ramp. */
.progress {
  height: 8px; border-radius: 999px; overflow: hidden; background: var(--ds-blue-200); min-width: 80px;
}
.progress > span { display: block; height: 100%; border-radius: 999px; background: var(--ds-blue-700); }
.progress.complete { background: var(--ds-green-200); }
.progress.complete > span { background: var(--ds-green-700); }

.note {
  padding: 8px 12px; border-radius: 6px; font: 400 14px/20px var(--font-sans);
  background: var(--ds-gray-100); color: var(--ds-gray-1000); box-shadow: 0 0 0 1px var(--ds-gray-alpha-400);
}
.note-error { background: var(--ds-red-100); color: var(--ds-red-900); box-shadow: 0 0 0 1px var(--ds-red-400); }
.note-success { background: var(--ds-green-100); color: var(--ds-green-900); box-shadow: 0 0 0 1px var(--ds-green-400); }
.note-warning { background: var(--ds-amber-100); color: var(--ds-amber-900); box-shadow: 0 0 0 1px var(--ds-amber-400); }

.empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; }

/* Tabs (Geist default variant: underline). */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--ds-gray-alpha-400); overflow-x: auto; }
.tab {
  padding: 0 0 12px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 400 14px/20px var(--font-sans); color: var(--ds-gray-900);
}
.tab:hover { color: var(--ds-gray-1000); }
.tab[aria-selected="true"] { color: var(--ds-gray-1000); box-shadow: inset 0 -2px 0 var(--ds-gray-1000); }

/* Table */
.table-wrap { overflow-x: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--ds-gray-alpha-400); }
.table { width: 100%; border-collapse: collapse; }
.table th {
  height: 40px; padding: 0 12px; text-align: left; white-space: nowrap;
  font: 500 13px/16px var(--font-sans); color: var(--ds-gray-900);
  background: var(--ds-background-200); border-bottom: 1px solid var(--ds-gray-alpha-400);
}
.table td { height: 48px; padding: 0 12px; border-bottom: 1px solid var(--ds-gray-alpha-400); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--ds-gray-alpha-100); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Modal: native <dialog>. */
dialog.modal {
  width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px;
  background: var(--ds-background-100); color: var(--ds-gray-1000); box-shadow: var(--ds-shadow-modal);
}
dialog.modal::backdrop { background: color-mix(in srgb, var(--ds-overlay-backdrop-color, #000) 80%, transparent); }
dialog.modal .card-body { display: grid; gap: 16px; }

/* Toast */
/* Bottom centre: bottom right would cover the annotator's save button. */
.toasts { position: fixed; left: 50%; translate: -50% 0; bottom: 16px; display: grid; gap: 8px; justify-items: center; z-index: 5000; }
.toast {
  width: max-content; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 12px;
  background: var(--ds-background-100); box-shadow: var(--ds-shadow-menu); font: 400 14px/20px var(--font-sans);
  animation: toast-in 150ms ease;
}
.toast-error { color: var(--ds-red-900); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ------------------------------------------------------------------ app layout */

.app-header {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 24px; background: var(--ds-background-100);
  border-bottom: 1px solid var(--ds-gray-alpha-400);
}
.app-header .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.app-header .spacer { flex: 1; }
.app-header form { margin: 0; }
.page { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; display: grid; gap: 24px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { padding: 16px; display: grid; gap: 4px; align-content: start; }
.kpi .value { font: 600 24px/32px var(--font-sans); letter-spacing: -0.96px; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--ds-background-200); }
.login-card { width: min(380px, 100%); padding: 32px; display: grid; gap: 16px; }

/* Helpers */
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 16px; align-content: start; }
.stack-tight { display: grid; gap: 8px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archived { opacity: .6; }

/* Annotator: batch list */
.batch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.batch-card { display: grid; gap: 12px; padding: 20px; text-decoration: none; transition: box-shadow 150ms ease; }
.batch-card:hover { box-shadow: var(--ds-shadow-border-large); }

/* Annotator: photo + questions */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: calc(100vh - 64px); }
/* One track the size of the box: without it a tall photo sizes the row and overflows instead of fitting. */
.viewer { overflow: auto; background: var(--ds-background-200); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; cursor: zoom-in; }
.viewer img { display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer.zoomed { place-items: start; cursor: zoom-out; }
.viewer.zoomed img { height: auto; max-width: none; object-fit: fill; }
.panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--ds-gray-alpha-400); }
.panel-head { display: grid; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--ds-gray-alpha-400); }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 20px; align-content: start; padding: 20px; margin: 0; }
.groups { display: grid; gap: 20px; }
.choice-group { padding: 8px; margin: -8px; border-radius: 8px; }
.choice-group.active { background: var(--ds-gray-alpha-100); }
.skip summary { cursor: pointer; color: var(--ds-gray-900); display: flex; align-items: center; gap: 8px; }
.skip .field { margin-top: 12px; }
.panel-foot { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ds-gray-alpha-400); }
.panel-foot kbd { background: transparent; color: inherit; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent); }
.hint { padding: 0 20px 12px; }
.hint kbd { margin: 0 1px; }

/* Admin */
.upload-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.user-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: end; }
.cat-new-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: start; }
.cat-new-row > .btn { align-self: end; }
.check { height: 40px; cursor: pointer; }
.cell-progress { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 8px; align-items: center; min-width: 160px; }
.option-list { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 8px; border-left: 2px solid var(--ds-gray-alpha-400); }
.table .select-small { min-width: 140px; }

@media (max-width: 900px) {
  .work { grid-template-columns: 1fr; height: auto; }
  .viewer { height: 60vh; }
  .panel { border-left: 0; border-top: 1px solid var(--ds-gray-alpha-400); }
  .upload-row, .user-row, .cat-new-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-header { padding: 0 16px; gap: 8px; }
  .page { padding: 24px 16px 48px; }
}