@layer reset, base, components, modules, utilities, native, platform;

:root {
  /* Insets - The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */
  --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px));
  --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px));
  --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
  --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));

  /* Spacing */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* Text */
  --font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Fizzy", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;

  --text-xx-small: 0.55rem;
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-x-large: 1.8rem;
  --text-xx-large: 2.5rem;

  @media (max-width: 639px) {
    --text-xx-small: 0.65rem;
    --text-x-small: 0.85rem;
    --text-small: 0.95rem;
    --text-normal: 1.1rem;
    --text-medium: 1.2rem;
    --text-large: 1.5rem;
    --text-x-large: 1.8rem;
    --text-xx-large: 2.5rem;
  }

  /* Borders */
  --border: 1px solid var(--color-ink-lighter);

  /* Shadows */
  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%),
            0 0.2em 0.2em oklch(var(--lch-black) / 5%),
            0 0.4em 0.4em oklch(var(--lch-black) / 5%),
            0 0.8em 0.8em oklch(var(--lch-black) / 5%);

  /* Components */
  --btn-size: 2.65em;
  --footer-height: 2.65rem;
  --tray-size: clamp(12rem, 25dvw, 24rem);

  /* Focus rings for keyboard navigation */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 1px;
  --focus-ring-size: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

  /* Dialogs */
  --dialog-duration: 150ms;

  /* Easing functions from https://easingwizard.com/ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
  --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);

  @media (max-width: 799px) {
    --tray-size: var(--footer-height);
  }

  /* Layout */
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --main-width: 1400px;

  /* Z-index */
  --z-events-column-header: 1;
  --z-events-day-header: 3;
  --z-popup: 10;
  --z-nav: 20;
  --z-flash: 30;
  --z-tooltip: 40;
  --z-bar: 50;
  --z-tray: 51;
  --z-welcome: 52;
  --z-nav-open: 100;

  /* OKLCH colors: Fixed */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;

  /* OKLCH colors: Light mode */
  --lch-canvas: var(--lch-white);
  --lch-ink-inverted: var(--lch-white);

  --lch-ink-darkest: 26% 0.05 264;
  --lch-ink-darker: 40% 0.026 262;
  --lch-ink-dark: 56% 0.014 260;
  --lch-ink-medium: 66% 0.008 258;
  --lch-ink-light: 84% 0.005 256;
  --lch-ink-lighter: 92% 0.003 254;
  --lch-ink-lightest: 96% 0.002 252;

  --lch-uncolor-darkest: 26% 0.018 40;
  --lch-uncolor-darker: 40.04% 0.0376 50.06;
  --lch-uncolor-dark: 57.09% 0.0676 60.5;
  --lch-uncolor-medium: 66% 0.0944 71.46;
  --lch-uncolor-light: 83.97% 0.0457 80.84;
  --lch-uncolor-lighter: 92% 0.014 90;
  --lch-uncolor-lightest: 96% 0.012 100;

  --lch-red-darkest: 26% 0.105 34;
  --lch-red-darker: 40% 0.154 36;
  --lch-red-dark: 59% 0.19 38;
  --lch-red-medium: 66% 0.204 40;
  --lch-red-light: 84.08% 0.0837 41.96;
  --lch-red-lighter: 92% 0.03 44;
  --lch-red-lightest: 96% 0.013 46;

  --lch-yellow-darkest: 26% 0.0729 40;
  --lch-yellow-darker: 40% 0.12 50;
  --lch-yellow-dark: 58% 0.156 60;
  --lch-yellow-medium: 74% 0.184 70;
  --lch-yellow-light: 84% 0.12 80;
  --lch-yellow-lighter: 92% 0.076 90;
  --lch-yellow-lightest: 96% 0.034 100;

  --lch-lime-darkest: 26% 0.064 109;
  --lch-lime-darker: 40% 0.101 110;
  --lch-lime-dark: 56.5% 0.142 111;
  --lch-lime-medium: 68% 0.176 113.11;
  --lch-lime-light: 83.92% 0.0927 113.6;
  --lch-lime-lighter: 92% 0.046 114;
  --lch-lime-lightest: 96% 0.034 115;

  --lch-green-darkest: 26% 0.071 149;
  --lch-green-darker: 40% 0.12 148;
  --lch-green-dark: 55% 0.162 147;
  --lch-green-medium: 66% 0.208 146;
  --lch-green-light: 83.92% 0.0772 145.06;
  --lch-green-lighter: 92% 0.044 144;
  --lch-green-lightest: 96% 0.022 143;

  --lch-aqua-darkest: 26% 0.059 214;
  --lch-aqua-darker: 40% 0.093 212;
  --lch-aqua-dark: 55.5% 0.122 210;
  --lch-aqua-medium: 66% 0.152 208;
  --lch-aqua-light: 83.88% 0.0555 206.02;
  --lch-aqua-lighter: 92% 0.02 204;
  --lch-aqua-lightest: 96% 0.012 202;

  --lch-blue-darkest: 26% 0.126 264;
  --lch-blue-darker: 40% 0.166 262;
  --lch-blue-dark: 57.02% 0.1895 260.46;
  --lch-blue-medium: 66% 0.196 257.82;
  --lch-blue-light: 84.04% 0.0719 255.29;
  --lch-blue-lighter: 92% 0.026 254;
  --lch-blue-lightest: 96% 0.016 252;

  --lch-violet-darkest: 26% 0.148 292;
  --lch-violet-darker: 40% 0.2 290;
  --lch-violet-dark: 58% 0.216 287.6;
  --lch-violet-medium: 66% 0.206 285.52;
  --lch-violet-light: 84.08% 0.0791 283.47;
  --lch-violet-lighter: 92% 0.03 282;
  --lch-violet-lightest: 96% 0.015 280;

  --lch-purple-darkest: 26% 0.131 314;
  --lch-purple-darker: 40% 0.178 312;
  --lch-purple-dark: 58% 0.21 310;
  --lch-purple-medium: 66% 0.258 308;
  --lch-purple-light: 84.09% 0.0778 305.77;
  --lch-purple-lighter: 92% 0.03 304;
  --lch-purple-lightest: 96% 0.019 302;

  --lch-pink-darkest: 26% 0.12 348;
  --lch-pink-darker: 40% 0.16 346;
  --lch-pink-dark: 59% 0.188 344;
  --lch-pink-medium: 71.8% 0.2008 342;
  --lch-pink-light: 84.04% 0.0737 340;
  --lch-pink-lighter: 92% 0.03 338;
  --lch-pink-lightest: 96% 0.02 336;

  /* Colors: Named */
  --color-black: oklch(var(--lch-black));
  --color-white: oklch(var(--lch-white));

  --color-ink: oklch(var(--lch-ink-darkest));
  --color-ink-darkest: oklch(var(--lch-ink-darkest));
  --color-ink-darker: oklch(var(--lch-ink-darker));
  --color-ink-dark: oklch(var(--lch-ink-dark));
  --color-ink-medium: oklch(var(--lch-ink-medium));
  --color-ink-light: oklch(var(--lch-ink-light));
  --color-ink-lighter: oklch(var(--lch-ink-lighter));
  --color-ink-lightest: oklch(var(--lch-ink-lightest));

  --color-ink-inverted: oklch(var(--lch-ink-inverted));

  /* Colors: Abstractions */
  --color-canvas: oklch(var(--lch-canvas));
  --color-negative: oklch(var(--lch-red-dark));
  --color-positive: oklch(var(--lch-green-dark));
  --color-link: oklch(var(--lch-blue-dark));
  --color-selected-light: oklch(var(--lch-blue-lightest));
  --color-selected: oklch(var(--lch-blue-lighter));
  --color-selected-dark: oklch(var(--lch-blue-light));
  --color-highlight: oklch(var(--lch-yellow-lighter));
  --color-marker: oklch(var(--lch-red-medium));
  --color-terminal-bg: oklch(98% 0.002 252);
  --color-terminal-text: var(--color-ink);
  --color-terminal-text-light: var(--color-ink-lighter);
  --color-golden: oklch(89.1% 0.178 95.7);
  --color-maybe: oklch(var(--lch-blue-medium));

  /* Colors: Cards */
  --color-card-default: oklch(var(--lch-blue-dark));
  --color-card-complete: var(--color-ink-darker);
  --color-card-1: oklch(var(--lch-ink-medium));
  --color-card-2: oklch(var(--lch-uncolor-medium));
  --color-card-3: oklch(var(--lch-yellow-medium));
  --color-card-4: oklch(var(--lch-lime-medium));
  --color-card-5: oklch(var(--lch-aqua-medium));
  --color-card-6: oklch(var(--lch-violet-medium));
  --color-card-7: oklch(var(--lch-purple-medium));
  --color-card-8: oklch(var(--lch-pink-medium));

  /* Colors: Highlighter */
  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3);
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3);
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3);
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);

  /* Colors: Syntax highlighting */
  --color-code-token__att: oklch(var(--lch-blue-dark));
  --color-code-token__comment: oklch(var(--lch-ink-medium));
  --color-code-token__function: oklch(var(--lch-purple-dark));
  --color-code-token__operator: oklch(var(--lch-red-dark));
  --color-code-token__property: oklch(var(--lch-purple-dark));
  --color-code-token__punctuation: oklch(var(--lch-ink-dark));
  --color-code-token__selector: oklch(var(--lch-green-dark));
  --color-code-token__variable: oklch(var(--lch-red-dark));

  /* Colors: Generating gradient */
  --color-gradient-1: oklch(var(--lch-violet-lighter));
  --color-gradient-2: oklch(var(--lch-pink-lighter));
  --color-gradient-3: oklch(var(--lch-purple-lighter));
  --color-gradient-4: var(--color-canvas);
}

/* Dark mode - explicit theme choice overrides system preference */
html[data-theme="dark"] {
  --lch-canvas: 20% 0.0195 232.58;
  --lch-ink-inverted: var(--lch-black);

  --lch-ink-darkest: 96.02% 0.0034 260;
  --lch-ink-darker: 86% 0.0061 260;
  --lch-ink-dark: 73.97% 0.009 260;
  --lch-ink-medium: 62% 0.0122 260;
  --lch-ink-light: 40% 0.0148 260;
  --lch-ink-lighter: 30% 0.0178 260;
  --lch-ink-lightest: 25% 0.0204 260;

  --lch-uncolor-darkest: 96.09% 0.0076 100;
  --lch-uncolor-darker: 86% 0.021 90;
  --lch-uncolor-dark: 73.93% 0.041 80;
  --lch-uncolor-medium: 62% 0.0552 70;
  --lch-uncolor-light: 40% 0.0387 60;
  --lch-uncolor-lighter: 30% 0.012 50;
  --lch-uncolor-lightest: 25% 0.0017 40;

  --lch-red-darkest: 95.85% 0.0218 46;
  --lch-red-darker: 86% 0.086 44;
  --lch-red-dark: 73.95% 0.139 42;
  --lch-red-medium: 62% 0.154 40;
  --lch-red-light: 40% 0.088 38;
  --lch-red-lighter: 30% 0.032 36;
  --lch-red-lightest: 25% 0.011 34;

  --lch-yellow-darkest: 96% 0.056 100;
  --lch-yellow-darker: 86% 0.103 90;
  --lch-yellow-dark: 74.06% 0.136 80;
  --lch-yellow-medium: 62.1% 0.146 70;
  --lch-yellow-light: 40% 0.0736 60;
  --lch-yellow-lighter: 30% 0.026 50;
  --lch-yellow-lightest: 25% 0.01 40;

  --lch-lime-darkest: 96.04% 0.066 115;
  --lch-lime-darker: 86% 0.098 114;
  --lch-lime-dark: 73.97% 0.121 113;
  --lch-lime-medium: 62% 0.128 112;
  --lch-lime-light: 40% 0.0637 111;
  --lch-lime-lighter: 30% 0.024 110;
  --lch-lime-lightest: 25% 0.012 109;

  --lch-green-darkest: 96.12% 0.035 143;
  --lch-green-darker: 86% 0.082 144;
  --lch-green-dark: 73.99% 0.117 145;
  --lch-green-medium: 62% 0.1261 146;
  --lch-green-light: 40% 0.065 147;
  --lch-green-lighter: 30% 0.03 148;
  --lch-green-lightest: 25% 0.018 149;

  --lch-aqua-darkest: 96.15% 0.0244 202;
  --lch-aqua-darker: 86% 0.06 204;
  --lch-aqua-dark: 73.92% 0.095 206;
  --lch-aqua-medium: 62% 0.106 208;
  --lch-aqua-light: 40% 0.0594 210;
  --lch-aqua-lighter: 30% 0.028 212;
  --lch-aqua-lightest: 25% 0.017 214;

  --lch-blue-darkest: 95.93% 0.0217 252;
  --lch-blue-darker: 86% 0.068 254;
  --lch-blue-dark: 74% 0.1293 256;
  --lch-blue-medium: 62% 0.159 258;
  --lch-blue-light: 40% 0.094 260;
  --lch-blue-lighter: 30% 0.0452 262;
  --lch-blue-lightest: 25% 0.0318 264;

  --lch-violet-darkest: 95.97% 0.019 280;
  --lch-violet-darker: 86% 0.068 282;
  --lch-violet-dark: 74.08% 0.142 284;
  --lch-violet-medium: 62% 0.184 286;
  --lch-violet-light: 40% 0.108 288;
  --lch-violet-lighter: 30% 0.048 290;
  --lch-violet-lightest: 25% 0.025 292;

  --lch-purple-darkest: 95.99% 0.0217 302;
  --lch-purple-darker: 86% 0.068 304;
  --lch-purple-dark: 73.98% 0.141 306;
  --lch-purple-medium: 62% 0.177 308;
  --lch-purple-light: 40% 0.099 310;
  --lch-purple-lighter: 30% 0.04 312;
  --lch-purple-lightest: 25% 0.017 314;

  --lch-pink-darkest: 95.84% 0.0308 336;
  --lch-pink-darker: 86% 0.074 338;
  --lch-pink-dark: 74.04% 0.1294 340;
  --lch-pink-medium: 62% 0.166 342;
  --lch-pink-light: 40% 0.085 344;
  --lch-pink-lighter: 30% 0.03 346;
  --lch-pink-lightest: 25% 0.011 348;

  --color-terminal-bg: var(--color-canvas);
  --color-terminal-text-light: oklch(var(--lch-green-dark));
  --color-golden: oklch(var(--lch-blue-medium));
  --color-highlight: oklch(var(--lch-blue-lighter));

  --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
    0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
    0 0.4em 2.4em -1em oklch(var(--lch-black) / 0.7),
    0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8),
    0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
    0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
}

/* Fallback to system preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --lch-canvas: 20% 0.0195 232.58;
    --lch-ink-inverted: var(--lch-black);

    --lch-ink-darkest: 96.02% 0.0034 260;
    --lch-ink-darker: 86% 0.0061 260;
    --lch-ink-dark: 73.97% 0.009 260;
    --lch-ink-medium: 62% 0.0122 260;
    --lch-ink-light: 40% 0.0148 260;
    --lch-ink-lighter: 30% 0.0178 260;
    --lch-ink-lightest: 25% 0.0204 260;

    --lch-uncolor-darkest: 96.09% 0.0076 100;
    --lch-uncolor-darker: 86% 0.021 90;
    --lch-uncolor-dark: 73.93% 0.041 80;
    --lch-uncolor-medium: 62% 0.0552 70;
    --lch-uncolor-light: 40% 0.0387 60;
    --lch-uncolor-lighter: 30% 0.012 50;
    --lch-uncolor-lightest: 25% 0.0017 40;

    --lch-red-darkest: 95.85% 0.0218 46;
    --lch-red-darker: 86% 0.086 44;
    --lch-red-dark: 73.95% 0.139 42;
    --lch-red-medium: 62% 0.154 40;
    --lch-red-light: 40% 0.088 38;
    --lch-red-lighter: 30% 0.032 36;
    --lch-red-lightest: 25% 0.011 34;

    --lch-yellow-darkest: 96% 0.056 100;
    --lch-yellow-darker: 86% 0.103 90;
    --lch-yellow-dark: 74.06% 0.136 80;
    --lch-yellow-medium: 62.1% 0.146 70;
    --lch-yellow-light: 40% 0.0736 60;
    --lch-yellow-lighter: 30% 0.026 50;
    --lch-yellow-lightest: 25% 0.01 40;

    --lch-lime-darkest: 96.04% 0.066 115;
    --lch-lime-darker: 86% 0.098 114;
    --lch-lime-dark: 73.97% 0.121 113;
    --lch-lime-medium: 62% 0.128 112;
    --lch-lime-light: 40% 0.0637 111;
    --lch-lime-lighter: 30% 0.024 110;
    --lch-lime-lightest: 25% 0.012 109;

    --lch-green-darkest: 96.12% 0.035 143;
    --lch-green-darker: 86% 0.082 144;
    --lch-green-dark: 73.99% 0.117 145;
    --lch-green-medium: 62% 0.1261 146;
    --lch-green-light: 40% 0.065 147;
    --lch-green-lighter: 30% 0.03 148;
    --lch-green-lightest: 25% 0.018 149;

    --lch-aqua-darkest: 96.15% 0.0244 202;
    --lch-aqua-darker: 86% 0.06 204;
    --lch-aqua-dark: 73.92% 0.095 206;
    --lch-aqua-medium: 62% 0.106 208;
    --lch-aqua-light: 40% 0.0594 210;
    --lch-aqua-lighter: 30% 0.028 212;
    --lch-aqua-lightest: 25% 0.017 214;

    --lch-blue-darkest: 95.93% 0.0217 252;
    --lch-blue-darker: 86% 0.068 254;
    --lch-blue-dark: 74% 0.1293 256;
    --lch-blue-medium: 62% 0.159 258;
    --lch-blue-light: 40% 0.094 260;
    --lch-blue-lighter: 30% 0.0452 262;
    --lch-blue-lightest: 25% 0.0318 264;

    --lch-violet-darkest: 95.97% 0.019 280;
    --lch-violet-darker: 86% 0.068 282;
    --lch-violet-dark: 74.08% 0.142 284;
    --lch-violet-medium: 62% 0.184 286;
    --lch-violet-light: 40% 0.108 288;
    --lch-violet-lighter: 30% 0.048 290;
    --lch-violet-lightest: 25% 0.025 292;

    --lch-purple-darkest: 95.99% 0.0217 302;
    --lch-purple-darker: 86% 0.068 304;
    --lch-purple-dark: 73.98% 0.141 306;
    --lch-purple-medium: 62% 0.177 308;
    --lch-purple-light: 40% 0.099 310;
    --lch-purple-lighter: 30% 0.04 312;
    --lch-purple-lightest: 25% 0.017 314;

    --lch-pink-darkest: 95.84% 0.0308 336;
    --lch-pink-darker: 86% 0.074 338;
    --lch-pink-dark: 74.04% 0.1294 340;
    --lch-pink-medium: 62% 0.166 342;
    --lch-pink-light: 40% 0.085 344;
    --lch-pink-lighter: 30% 0.03 346;
    --lch-pink-lightest: 25% 0.011 348;

    --color-terminal-bg: var(--color-canvas);
    --color-terminal-text-light: oklch(var(--lch-green-dark));
    --color-golden: oklch(var(--lch-blue-medium));
    --color-highlight: oklch(var(--lch-blue-lighter));

    --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42),
              0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6),
              0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7),
              0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8),
              0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
              0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
  }
}
@layer reset {
  /*
  * Modern CSS Reset
  * @link https://github.com/hankchizljaw/modern-css-reset
  */

  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
  }

  p,
  li,
  h1,
  h2,
  h3,
  h4 {
    /* Help prevent overflow of long words/names/URLs */
    word-break: break-word;

    /* Optional, not supported for all languages */
    /* hyphens: auto; */
  }

  html,
  body {
    overflow-x: clip;
  }

  html {
    /* scroll-behavior: smooth; */
  }

  /* Set core body defaults */
  body {
    min-height: 100dvh;
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
  }

  /* Make images easier to work with */
  img {
    display: block;
    max-inline-size: 100%;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  button {
    cursor: pointer;
  }

  summary {
    &::-webkit-details-marker {
      display: none;
    }

    &::marker {
      content: "";
    }
  }

  /* Remove all animations and transitions for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    html {
      scroll-behavior: initial;
    }
  }

  dialog {
    border: 0;
    padding: 0;

    &:where(:focus-visible):focus,
    &:where(:focus-visible):active {
      outline: 0;
    }
  }
}
@layer base {
  html {
    font-size: 100%;

    @media (min-width: 100ch) {
      font-size: 1.1875rem;
    }
  }

  body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    background: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    interpolate-size: allow-keywords;
    line-height: 1.375;
    max-inline-size: 100vw;
    scroll-behavior: auto;
    text-rendering: optimizeLegibility;
    text-size-adjust: none;
  }

  a {
    text-decoration: none;

    &:not([class]) {
      color: var(--color-link);
      text-decoration: underline;
      text-decoration-skip-ink: auto;
    }
  }

  :is(a, button, input, textarea, .switch, .btn) {
    transition: 100ms ease-out;
    transition-property: background-color, border-color, box-shadow, outline;
    touch-action: manipulation;

    /* Keyboard navigation */
    &:where(:focus-visible) {
      border-radius: 0.25ch;
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    /* Default disabled styles */
    &:where([disabled]) {
      cursor: not-allowed;
      opacity: 0.5;
      pointer-events: none;
    }
  }

  ::selection {
    background: var(--color-selected);

    html[data-theme="dark"] & {
      background-color: var(--color-selected-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        background-color: var(--color-selected-dark);
      }
    }
  }

  :where(ul, ol):where([role="list"]) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  kbd {
    border: 1px solid;
    border-radius: 0.3em;
    box-shadow: 0 0.1em 0 currentColor;
    font-family: var(--font-mono);
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.7;
    padding: 0 0.4em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
  }

  video {
    max-inline-size: 100%;
  }

  /* Printing */
  @page {
    margin: 1in;
  }

  @media print {
    .no-print {
      display: none;
    }
  }

  /* Turbo */
  turbo-frame,
  turbo-cable-stream-source {
    display: contents;
  }

  .turbo-progress-bar {
    visibility: hidden;
  }

  /* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */
  /* there's not a way to target Windows using CSS, so Chrome on Mac will have */
  /* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */
  @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    * {
      scrollbar-color: #C1C1C1 transparent;
      scrollbar-width: thin;
    }
  }
}
@layer base {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto 9em;

    &.public {
      grid-template-rows: auto 1fr auto;
    }

    &.compact-on-touch {
      @media (any-hover: none) {
        grid-template-rows: auto 1fr auto;
        min-height: unset;
      }
    }
  }

  /* Required for the card column page on mobile, but not needed otherwise */
  :where(#global-container) {
    display: contents;
  }

  :where(#header) {
    position: relative;
    z-index: var(--z-nav);
  }

  :where(#main) {
    inline-size: 100dvw;
    margin-inline: auto;
    max-inline-size: 100dvw;
    padding-inline:
      calc(var(--main-padding) + var(--custom-safe-inset-left))
      calc(var(--main-padding) + var(--custom-safe-inset-right));
    text-align: center;
  }

  :where(#footer) {
    max-inline-size: 100dvw;
  }

  :is(#header, #footer) {
    @media print {
      display: none;
    }
  }
}
@layer components {
  /* Base
  /* ------------------------------------------------------------------------ */

  .card {
    --avatar-size: 2.75em;
    --card-bg-color: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas));
    --card-content-color: color-mix(in srgb, var(--card-color) 30%, var(--color-ink));
    --card-text-color: color-mix(in srgb, var(--card-color) 75%, var(--color-ink));
    --card-border: 1px solid color-mix(in srgb, var(--card-color) 33%, var(--color-ink-inverted));
    --card-header-space: 1ch;
    --card-padding-inline: var(--inline-space-double);
    --card-padding-block: var(--block-space);
    --border-color: transparent;
    --border-radius: 0.2em;
    --border-size: 0;

    aspect-ratio: var(--card-aspect-ratio, auto);
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    padding: var(--card-padding-block) var(--card-padding-inline);
    position: relative;
    text-align: start;
    z-index: 1;

    html[data-theme="dark"] & {
      box-shadow: 0 0 0 1px var(--color-ink-lighter);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        box-shadow: 0 0 0 1px var(--color-ink-lighter);
      }
    }

    .popup {
      inline-size: 260px;
    }
  }

  /* Header
  /* ------------------------------------------------------------------------ */

  .card__header {
    align-items: center;
    border-radius: var(--border-radius) 0 0 0;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--card-header-space);
    margin-block-start: calc(-1 * var(--card-padding-block));
    margin-inline: calc(-1 * var(--card-padding-inline)) calc(-0.5 * var(--card-padding-inline));
    max-inline-size: unset;
    min-inline-size: 0;

    .card__column-name {
      display: none;
    }
  }

  .card__board {
    align-items: center;
    align-self: start;
    background-color: var(--card-color);
    border-radius: var(--border-radius) 0 var(--border-radius) 0;
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-weight: 600;
    max-inline-size: 100%;
    min-inline-size: 0;
    padding-block: 0.25lh;
    padding-inline: var(--card-padding-inline) 1ch;
    position: relative;
    transition: background-color 100ms ease-out;

    &:has(.btn) {
      @media (any-hover: hover) {
        &:hover {
          background-color: color-mix(in srgb, var(--card-color) 90%, var(--color-ink));
        }
      }
    }

    dialog {
      inset-block-start: 100%;
    }
  }

  .card__id {
    flex-shrink: 0;

    .card-perma &:before {
      content: "No.";
      opacity: 0.5;
    }
  }

  .card__board-name {
    align-items: center;
    border-inline-start: 1px solid color-mix(in hsl, transparent 75%, currentColor);
    color: currentColor;
    display: flex;
    gap: 0.25ch;
    margin-inline-start: var(--card-header-space);
    max-inline-size: 100%;
    min-inline-size: 0;
    padding-inline-start: var(--card-header-space);
    text-transform: uppercase;
  }

  .card__board-picker-button {
    inset: 0;
    position: absolute;
  }

  .card__tags {
    --btn-color: var(--card-color);

    align-items: center;
    align-self: stretch;
    color: var(--card-text-color);
    display: flex;
    gap: 0.5ch;
    min-inline-size: 0;

    [data-controller="dialog"] {
      align-items: center;
      align-self: stretch;
      display: flex;
      position: relative;
    }

    .popup {
      --panel-size: 18ch;

      inset-block-start: 100%;
    }
  }

  .card__tag-picker {
    --panel-border-radius: 2em;
    --panel-padding: 0.5em 0.7em;
    --panel-size: max-content;

    inline-size: auto !important;
    inset: 0 auto auto 0;
    max-inline-size: var(--panel-size) !important;
    position: absolute;
    z-index: 2;

    &[open] {
      display: flex;
    }

    .input {
      --input-padding: 0.2em 0.5em;

      inline-size: 18ch;
    }
  }

  .card__tag-picker-button {
    font-size: 0.6em;
  }

  .card__tag {
    color: inherit;
    font-weight: 600;
    min-width: 0;
    text-transform: uppercase;
  }

  /* Body
  /* ------------------------------------------------------------------------ */

  .card__body {
    display: flex;
    flex-grow: 1;
    gap: 1ch;
    inline-size: 100%;
    padding-block: calc(var(--card-padding-block) / 2);

    @media (min-width: 640px) {
      gap: var(--card-padding-inline);
    }
  }

  .card__content {
    color: var(--card-content-color);
    contain: inline-size;
    flex: 2 1 auto;
    max-inline-size: 100%;
  }

  .card__title {
    --autosize-block-padding: 0 0.5ch;
    --input-border-radius: 0;
    --input-color: var(--card-content-color);
    --lines: 3;

    color: var(--card-content-color);
    font-size: var(--text-xx-large);
    font-weight: 900;
    line-height: 1.15;
    text-wrap: balance;

    .card-field__title {
      overflow: hidden; /* prevent scrolling on windows */
      padding-block: var(--autosize-block-padding);

      &:is(textarea)::placeholder {
        color: inherit;
        opacity: 0.66;
      }
    }

    .card__title-link {
      color: inherit;
    }

    code {
      background-color: var(--color-canvas);
      border: 1px solid var(--color-ink-lighter);
      border-radius: 0.25ch;
      font-family: var(--font-mono);
      font-size: smaller;
      padding: 0.1ch 0.25ch;
    }
  }

  .card__description {
    /* Hide the empty element that Lexical saves when nothing is added to the description <p><br /></p> */
    action-text-content p:only-child:has(br:only-child) {
      display: none;
    }

    lexxy-toolbar {
      border-block-start: 1px solid var(--lexxy-border-color);
    }

    & ~ .btn.btn--reversed {
      --btn-background: var(--card-color);
      --btn-color: var(--color-ink-inverted);
    }

    & ~ .btn {
      --btn-border-color: var(--card-color);
      --btn-color: var(--card-color);
    }
  }

  .card__stages {
    color: var(--card-text-color);
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 2px;
    justify-self: end;
    max-inline-size: 20ch;
    padding-block: var(--block-space-half);
  }

  /* Footer
  /* ------------------------------------------------------------------------ */

  /* Card metadata */
  .card__meta {
     --meta-spacer-block: 0.5ch;
     --meta-spacer-inline: 0.75ch;

    align-items: center;
    color: var(--card-text-color);
    display: grid;
    font-size: var(--text-x-small);
    font-weight: 500;
    grid-template-areas:
      "avatars-author text-added text-updated avatars-assignees"
      "avatars-author text-author text-assignees avatars-assignees";
    grid-template-columns: auto auto 1fr auto;
    inline-size: fit-content;
    text-transform: uppercase;

    strong,
    .local-time-value {
      font-weight: 900;
    }
  }

  /* Assign grid areas */
  .card__meta-avatars--author { grid-area: avatars-author; }
  .card__meta-avatars--assignees { grid-area: avatars-assignees; }
  .card__meta-text--added { grid-area: text-added; }
  .card__meta-text--author { grid-area: text-author; }
  .card__meta-text--updated { grid-area: text-updated; }
  .card__meta-text--assignees { grid-area: text-assignees; }

  .card__meta-avatars {
    align-self: center;
  }

  .card__meta-avatars--author {
    margin-inline-end: var(--meta-spacer-inline);
  }

  .card__meta-avatars--assignees {
    display: flex;
    margin-inline-start: var(--meta-spacer-inline);

    .avatar {
      margin-inline-end: calc(-1 * var(--meta-spacer-inline));
    }
  }

  .card__assignees-trigger {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;

    &:focus-visible {
      outline: none;

      .btn {
        box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring-color);
      }
    }
  }

  .card__meta-text {
    line-height: 1;
    white-space: nowrap;

    .icon {
      --icon-size: 0.9em;

      margin-inline-end: 0.5ch;
      vertical-align: top;
    }
  }

  /* Top */
  .card__meta-text:nth-of-type(odd) {
    border-block-end: var(--card-border);
    padding-block-end: var(--meta-spacer-block);
  }

  /* Bottom */
  .card__meta-text:nth-of-type(even) {
    padding-block-start: var(--meta-spacer-block);
  }

  /* Left */
  .card__meta-text:nth-of-type(-n+2) {
    border-inline-end: var(--card-border);
    padding-inline-end: var(--meta-spacer-inline);
  }

  /* Right */
  .card__meta-text:nth-of-type(n+3) {
    padding-inline-start: var(--meta-spacer-inline);
  }

  @media (max-width: 639px) {
    .card__meta {
      inline-size: 100%;
    }

    .card__meta-avatars--author,
    .card__meta-avatars--assignees .avatar {
      display: none;
    }
  }

  /* Closed stamp
  /* ------------------------------------------------------------------------ */

  .card__closed {
    --stamp-color: oklch(var(--lch-green-medium) / 0.65);

    align-items: center;
    background-color: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
    border-radius: 0.2em;
    border: 0.5ch solid var(--stamp-color);
    color: var(--color-ink-dark);
    display: flex;
    flex-direction: column;
    font-weight: bold;
    inset: auto 0 -1lh auto;
    justify-content: center;
    max-inline-size: 25ch;
    min-inline-size: 16ch;
    padding: 1ch;
    pointer-events: none;
    position: absolute;
    rotate: 5deg;
    transform-origin: top right;

    .cards & {
      display: none;

      .cards--grid &,
      .cards--on-deck & {
        &.card__closed--system {
          display: flex;
        }
      }
    }
  }

  .card:has(.card__closed),
  .card:is(.card--postponed),
  .card-perma:has(.card__closed),
  .card-perma:has(.card--postponed) {
    --card-color: var(--color-card-complete) !important;

    .bubble {
      display: none;
    }
  }

  .card__closed-title {
    color: var(--stamp-color);
    font-size: 1.3em;
    font-weight: 900;
    position: relative;
    text-align: center;
    text-transform: uppercase;
  }

  .card__closed-date {
    font-family: var(--font-mono);
    text-transform: uppercase;
  }

  .card__closed-by {
    border-block-end: 1px dashed currentcolor;
  }

  /* Misc bits
  /* ------------------------------------------------------------------------ */

  .card__background {
    inset: 0;
    position: absolute;
    z-index: -1;

    img {
      block-size: 100%;
      border-radius: var(--border-radius);
      inline-size: 100%;
      object-fit: cover;
      object-position: center;
      opacity: 1;
      transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
  }

  .card__link {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
  }

  .card:nth-child(2n+1) .bubble { --bubble-rotate: -90deg; }
  .card:nth-child(3n+1) .bubble { --bubble-rotate: 45deg; }

  /* Variants
  /* ------------------------------------------------------------------------ */

  .card--notification {
    --card-color: var(--color-card-default);
    --card-padding-inline: 1ch;
    --card-padding-block: 1ch;

    background-color: var(--color-canvas);
    color: var(--color-ink);

    &.card--closed {
      --card-color: var(--color-card-complete) !important;
    }

    .card__body {
      padding-block-end: 0;
    }

    .card__board {
      font-size: var(--text-xx-small);
      padding-block: 0.5ch;
      padding-inline-start: var(--inline-space-double);
    }

    .card__header {
      margin-block-start: calc(-1.1 * var(--card-padding-block));
      margin-inline: calc(-1 * var(--card-padding-inline));
      max-inline-size: unset;
    }

    .card__timestamp {
      opacity: 0.66;
    }

    .card__notification-body {
      font-size: var(--text-x-small);
    }

    .card__notification-meta {
      font-size: var(--text-xx-small);
      font-weight: 600;
      text-transform: uppercase;
    }

    .card__notification-mentioner {
      background-color: var(--color-highlight);
      border-radius: 0.7em 0.2em 0.7em 0.2em;
      color: inherit;
      display: inline-flex;
      padding: 0.1em 0.3em;
    }

    .card__title {
      font-size: var(--text-small);
      font-weight: bold;
      min-block-size: 0;
    }
  }

  .card__notification-unread-indicator {
    --btn-background: var(--color-marker);
    --btn-border-color: var(--color-canvas);
    --btn-color: var(--color-ink-inverted);
    --btn-icon-size: 0.5em;
    --btn-padding: 0;
    --btn-size: 1.6em;

    font-size: var(--text-xx-small);
    font-weight: 600;
    margin: 2px;
    position: relative;
    z-index: 1;

    .icon {
      opacity: 0;
      transition: opacity 150ms ease;
    }

    @media (hover: hover) {
      .card:hover & {
        --btn-background: var(--color-ink-lightest);
        --btn-color: var(--color-ink);

        .badge-count { opacity: 0; }
               .icon { opacity: 1; }
      }
    }
  }

  .card__board-public-description {
    max-inline-size: 66ch;

    > *:first-child { margin-block-start: 0; }
    > *:last-child { margin-block-end: 0; }

    ul, ol {
      inline-size: fit-content;
      margin-inline: auto;
      text-align: start;
    }

    code {
      text-align: left;
    }
  }
}
@layer components {
  .btn {
    --icon-size: var(--btn-icon-size, 1.3em);
    --btn-border-radius: 99rem;
    --btn-hover-brightness: 0.9;

    align-items: center;
    background-color: var(--btn-background, var(--color-canvas));
    border-radius: var(--btn-border-radius);
    border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light));
    color: var(--btn-color, var(--color-ink));
    cursor: pointer;
    display: inline-flex;
    font-size: 1em;
    font-weight: var(--btn-font-weight, 600);
    gap: var(--btn-gap, 0.5em);
    justify-content: center;
    padding: var(--btn-padding, 0.5em 1.1em);
    pointer-events: auto;
    position: relative;
    transition: 100ms ease-out;
    transition-property: background-color, border, box-shadow, color, opacity, scale;

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--btn-hover-brightness));
      }
    }

    html[data-theme="dark"] & {
      --btn-hover-brightness: 1.25;
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --btn-hover-brightness: 1.25;
      }
    }

    &[disabled],
    &:has([disabled]),
    [disabled] &[type=submit],
    &[type=submit]:disabled {
      cursor: not-allowed;
      opacity: 0.3;
      pointer-events: none;
    }

    form[aria-busy] &:disabled {
      position: relative;

      > * {
        visibility: hidden;
      }

      &::after {
        --mask: no-repeat radial-gradient(#000 68%,#0000 71%);
        --size: 1.25em;

        -webkit-mask: var(--mask), var(--mask), var(--mask);
        -webkit-mask-size: 28% 45%;
        animation: submitting 1s infinite linear;
        aspect-ratio: 8/5;
        background: currentColor;
        content: "";
        inline-size: var(--size);
        inset: 50%;
        margin-block: calc((var(--size) / 3) * -1);
        margin-inline: calc((var(--size) / 2) * -1);
        position: absolute;
      }
    }
  }

  /* Variants
  /* ------------------------------------------------------------------------ */

  .btn--plain {
    --btn-background: transparent;
    --btn-border-radius: 0;
    --btn-border-size: 0;
    --btn-color: inherit;
    --btn-icon-size: 100%;
    --btn-padding: 0;
  }

  .btn--link {
    --btn-background: var(--color-link);
    --btn-border-color: var(--color-canvas);
    --btn-color: var(--color-ink-inverted);
    --focus-ring-color: var(--color-link);
  }

  .btn--circle,
  .btn[aria-label]:where(:has(.icon)),
  .btn:where(:has(.for-screen-reader):has(.icon)) {
    --btn-padding: 0;
    --icon-size: 75%;

    aspect-ratio: 1;
    block-size: var(--btn-size);
    display: grid;
    inline-size: var(--btn-size);
    justify-content: normal; /* FF fix */
    place-items: center;

    > * {
      grid-area: 1/1;
    }
  }

  /* Make a normal button circular on mobile */
  @media (max-width: 639px) {
    .btn--circle-mobile {
      --btn-size: 3em;
      --btn-padding: 0;
      --icon-size: 75%;

      aspect-ratio: 1;
      inline-size: var(--btn-size);

      kbd,
      span:last-of-type:not(.icon) {
        display: none;
      }
    }
  }

  @media (min-width: 640px) {
    .btn--circle-mobile .icon--mobile-only {
      display: none !important;
    }
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: var(--color-negative);
    --btn-color: var(--color-ink-inverted);
    --focus-ring-color: var(--color-negative);
  }

  .btn--positive {
    --btn-background: var(--color-positive);
    --btn-border-color: var(--color-canvas);
    --btn-color: var(--color-ink-inverted);
    --focus-ring-color: var(--color-positive);
  }

  .btn--success {
    --success-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);
    animation: success 1s var(--success-timing-function);

    .icon {
      animation: zoom-fade 500ms var(--success-timing-function);
    }
  }

  /* Fake button used to help space things out */
  .btn--placeholder {
    pointer-events: none;
    visibility: hidden;
  }

  .btn--remove {
    --btn-icon-size: 0.7em;
  }

  .btn--reversed {
    --btn-background: var(--color-ink);
    --btn-border-color: var(--color-canvas);
    --btn-color: var(--color-canvas);
    --focus-ring-color: var(--color-ink);
  }

  /* Toggleable buttons
  /* ------------------------------------------------------------------------ */

  .btn {
    &:has(input[type=radio], input[type=checkbox]) {
      position: relative;

      :is(input[type=radio], input[type=checkbox]) {
        appearance: none;
        border-radius: var(--btn-border-radius);
        cursor: pointer;
        display: flex;
        inset: 0;
        margin: 0;
        padding: 0;
        position: absolute;

        &:focus-visible {
          outline: none;
        }
      }

      .checked {
        display: none;
      }
    }

    &:has(input:checked)  {
      --btn-background: var(--color-ink);
      --btn-border-color: var(--color-ink);
      --btn-color: var(--color-ink-inverted);
      --focus-ring-color: var(--color-ink);

      .checked {
        display: block;
      }
    }

    &:has(input:focus-visible)  {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .btn--back {
    --btn-border-size: 0;

    @media (max-width: 639px) {
      strong, kbd {
        display: none;
      }
    }

    @media (min-width: 640px) {
      font-size: var(--text-medium);

      .icon--arrow-left {
        display: none;
      }
    }
  }


  /* Button groups
  /* ------------------------------------------------------------------------ */

  .btn__group {
    .btn {
      --btn-border-radius: 0;
      --radius: 0.3em;

      flex: 1 0 33%;
      inline-size: 100%;
      justify-content: center;
      white-space: nowrap;
    }

    form {
      flex: 1 1 0%;
    }

    :first-of-type .btn {
      border-end-start-radius: var(--radius);
      border-inline-end: 0;
      border-start-start-radius: var(--radius);
      padding-inline-end: 0.8em;
    }

    :last-of-type .btn {
      border-end-end-radius: var(--radius);
      border-inline-start: 0;
      border-start-end-radius: var(--radius);
      padding-inline-start: 0.8em;
    }

    span {
      inline-size: 100%;
    }
  }
}
@layer components {
  /* Text inputs */
  .input {
    accent-color: var(--input-accent-color, var(--color-ink));
    background-color: var(--input-background, transparent);
    border-radius: var(--input-border-radius, 0.5em);
    border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
    color: var(--input-color, var(--color-ink));
    font-size: max(16px, 1em);
    inline-size: 100%;
    line-height: inherit;
    max-inline-size: 100%;
    padding: var(--input-padding, 0.5em 0.8em);
    resize: none;

    &:autofill,
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      -webkit-text-fill-color: var(--color-ink);
      -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
    }

    &:where(:focus) {
      --focus-ring-offset: -1px;
    }

    &[readonly] {
      --focus-ring-size: 0;
    }

    &[autocomplete='one-time-code'] {
      --input-spacing: 0.5em;

      font-family: var(--font-mono);
      font-size: var(--text-large);
      font-weight: 900;
      inline-size: 18ch;
      letter-spacing: 1ch;
      min-inline-size: 18ch;
      text-align: center;
    }

    &[type='number'] {
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    /* Target mobile Safari only */
    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
      @media (hover: none) {
        font-size: max(16px, 1em) !important;
      }
    }
  }

  .input--file,
  .input--upload {
    cursor: pointer;

    &:has(input[type="file"]:focus-visible) {
      outline: 0.15rem solid var(--color-selected-dark);
    }

    input[type="file"] {
      --hover-size: 0;
      --input-border-color: transparent;
      --input-border-radius: 8px;

      block-size: 100%;
      cursor: pointer;
      font-size: 0;
      inline-size: 100%;
      overflow: clip;

      &::file-selector-button {
        appearance: none;
        cursor: pointer;
        opacity: 0;
      }
    }
  }

  .input--file {
    display: grid;
    inline-size: auto;
    place-items: center;

    > * {
      grid-area: 1 / 1;
    }

    img {
      border-radius: 0.4em;
    }

    &:is(.avatar) {
      input[type="file"] {
        border-radius: 50%;
      }
    }
  }

  .input--upload {
    --btn-border-color: var(--color-ink);
    --btn-border-radius: 1ch;

    border-style: dashed;
    position: relative;

    input[type="file"] {
      inset: 0;
      outline: none;
      position: absolute;
    }

    &:has([data-upload-preview-target="fileName"]:not([hidden])) {
      --btn-border-color: var(--color-positive);
      --btn-color: var(--color-positive);
    }
  }

  .input--select {
    --input-border-radius: 2em;
    --input-padding: 0.5em 1.8em 0.5em 1.2em;
    --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
    --caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");

    -webkit-appearance: none;
    appearance: none;
    background-image: var(--caret-icon);
    background-size: 0.5em;
    background-position: center right 0.9em;
    background-repeat: no-repeat;
    text-align: start;

    html[data-theme="dark"] & {
      --caret-icon: var(--caret-icon-dark);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        --caret-icon: var(--caret-icon-dark);
      }
    }

    option {
      background-color: var(--color-canvas);
      color: var(--color-ink);
    }
  }

  .input--textarea {
    --input-padding: 0;

    line-height: inherit;
    min-block-size: calc(3lh + (2 * var(--input-padding)));
    min-inline-size: 100%;
    padding-block: var(--input-padding);
    padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));

    @supports (field-sizing: content) {
      field-sizing: content;
      max-block-size: calc(3lh + (2 * var(--input-padding)));
      min-block-size: calc(1lh + (2 * var(--input-padding)));
    }
  }

  .input--invisible {
    background-color: transparent;
    block-size: 5px;
    border: none;
    inline-size: 5px;
    opacity: 0.1;

    &:focus {
      outline: none;
    }
  }

  /* Switches */
  .switch {
    --switch-color: var(--color-ink-medium);
    --switch-hover-brightness: 0.9;

    block-size: 1.75em;
    border-radius: 2em;
    display: inline-flex;
    inline-size: 3em;
    position: relative;

    &:has(:focus-visible) {
      .switch__btn {
        outline: var(--focus-ring-size) solid var(--focus-ring-color);
      }
    }
  }

  .switch__input {
    block-size: 0;
    inline-size: 0;
    opacity: 0.1;
  }

  .switch__btn {
    background-color: var(--switch-color);
    border-radius: 2em;
    cursor: pointer;
    inset: 0;
    outline-offset: var(--focus-ring-offset);
    position: absolute;
    transition: 150ms ease;

    &::before {
      background-color: var(--color-ink-inverted);
      block-size: 1.35em;
      border-radius: 50%;
      content: "";
      inline-size: 1.35em;
      inset-block-end: 0.2em;
      inset-inline-start: 0.2em;
      position: absolute;
      transition: 150ms ease;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink));
      }
    }

    .switch__input:checked + & {
      --switch-color: var(--color-link);

      &::before {
        transform: translateX(1.2em);
      }
    }

    .switch__input:disabled + & {
      --switch-color: var(--color-ink-medium);

      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  /* Containers that act like (and contain) inputs */
  .input--actor {
    outline-offset: -1px;
    transition: box-shadow 150ms ease, outline-offset 150ms ease;

    &:focus-within {
      --input-border-color: var(--color-selected-dark);

      outline: var(--focus-ring-size) solid var(--focus-ring-color);
    }

    .input {
      --input-padding: 0;
      --input-border-radius: 0;
      --input-background: transparent;
      --input-border-size: 0;

      inline-size: 100%;
      outline: 0;
    }

    &:has(.input:is(
      :autofill,
      :-webkit-autofill,
      :-webkit-autofill:hover,
      :-webkit-autofill:focus)) {
        -webkit-text-fill-color: var(--color-text);
        -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
    }
  }

  .input--hidden {
    block-size: 0;
    inline-size: 0;
    opacity: 0;
    padding: 0;
  }

  .input.boost__input {
    --input-border-radius: 0;
    --input-border-size: 0;
    --input-padding: 0;

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    inline-size: min-content;
    max-inline-size: 3ch;
    min-inline-size: 1ch;
    outline: none;

    @supports (field-sizing: content) {
      field-sizing: content;
      max-inline-size: unset;
    }

    &:focus {
      background-color: var(--color-highlight);
    }

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
}
@layer components {
  .panel {
    background-color: var(--panel-bg, var(--color-canvas));
    border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
    border-radius: var(--panel-border-radius, 1em);
    color: var(--color-ink);
    inline-size: var(--panel-size, 60ch);
    max-inline-size: 100%;
    padding: var(--panel-padding, var(--block-space));

    @media (min-width: 640px) {
      --panel-size: 100%;

      padding: var(--panel-padding, var(--block-space-double));
    }
  }

  .panel--wide {
    --panel-size: 60ch;
  }

  .panel--centered {
    --panel-border-size: 0;
    --panel-size: 100%;

    @media (min-width: 640px) {
      --panel-size: 42ch;
    }

    #main:has(&) {
      display: grid;
      justify-content: center;
      margin: auto;
    }
  }
}
@layer components {
  .divider {
    --divider-color: var(--color-ink-light);

    align-items: center;
    display: flex;
    gap: var(--inline-space);

    &:before,
    &:after {
      background: var(--divider-color);
      block-size: var(--divider-size, 1px);
      content: "";
      flex: 1;
    }
  }

  .divider--fade {
    &:before { background: linear-gradient(to right, transparent, var(--divider-color) 50%); }
    &:after  { background: linear-gradient(to left, transparent, var(--divider-color) 50%); }
  }
}
@layer components {
  .flash {
    display: flex;
    inset-block-start: var(--block-space);
    inset-inline-start: 50%;
    justify-content: center;
    position: fixed;
    transform: translate(-50%);
    z-index: var(--z-flash);
  }

  .flash__inner {
    animation: appear-then-fade 3s 300ms both;
    background-color: var(--flash-background, var(--color-ink));
    border-radius: 4em;
    color: var(--flash-color, var(--color-ink-inverted));
    display: inline-flex;
    font-size: var(--font-size-medium);
    margin: 0 auto;
    padding: 0.7em 1.4em;
  }
}
@layer components {
  /* Centered title with space for two buttons on either side */
  .header {
    --header-gap: 0.5ch;
    --btn-icon-size: 1rem;
    --header-btn-size: 2rem;
    --header-button-count: 0;
    --header-actions-width: calc((var(--header-btn-size) + var(--header-gap)) * var(--header-button-count));

    display: grid;
    grid-template-columns: var(--header-actions-width) 1fr var(--header-actions-width);
    grid-template-areas:
      "menu menu menu"
      "actions-start title actions-end";
    max-inline-size: 100dvw;
    padding-block: calc(var(--block-space-half) + var(--custom-safe-inset-top)) var(--block-space-half);
    padding-inline: var(--main-padding);
    position: relative;
    z-index: var(--z-nav);

    /* Change the grid size depending on how many buttons are present */
    &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; }
    &:has(.header__actions > *:nth-child(2)) { --header-button-count: 2; }
    &:has(.header__actions > *:nth-child(3)) { --header-button-count: 3; }

    &:has(nav) {
      row-gap: 0;
    }

    &:has(dialog[open]) {
      z-index: var(--z-nav-open);
    }

    &:has(~ #main .card-columns) {
      inline-size: 100dvw;
      margin-inline: auto;
      max-inline-size: var(--main-width);
    }

    nav {
      grid-area: menu;
      margin-inline: auto;
    }
  }

  .header__actions {
    display: flex;
    font-size: var(--text-x-small);
    gap: var(--header-gap);
    inline-size: var(--header-actions-width);
  }

  .header__actions--start {
    grid-area: actions-start;
    margin-inline-end: auto;
  }

  .header__actions--end {
    grid-area: actions-end;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .header__title {
    color: inherit;
    font-size: var(--text-large);
    font-weight: 900;
    grid-area: title;
    margin: 0 auto;
    min-inline-size: 0;
    text-align: center;
  }

  .header__skip-navigation {
    --left-offset: -999em;

    inset-block-start: 4rem;
    inset-inline-start: var(--left-offset);
    position: absolute;
    white-space: nowrap;
    z-index: 11;

    &:focus {
      --left-offset: var(--inline-space);
    }
  }

  .header__logo {
    color: var(--color-ink);
    font-size: 1.2rem;
    inline-size: auto;
    margin-block-start: 0.1em;

    span {
      background: var(--color-ink-lightest);
      block-size: auto;
      border-radius: 0.3125em;
      box-shadow:
        0 0 0 1px oklch(var(--lch-ink-darkest) / 0.1),
        0 0.1em 0.2em -0.1em oklch(var(--lch-ink-darkest) / 0.05),
        0 0.2em 0.4em -0.2em oklch(var(--lch-ink-darkest) / 0.05),
        0 0.3em 0.6em -0.3em oklch(var(--lch-ink-darkest) / 0.05)
      ;
      display: grid;
      height: 1.5em;
      inline-size: 1.5em;
      padding: 0.325em 0.275em 0.225em 0.275em;
      place-content: center;
      width: 1.5em;
    }

    svg {
      height: 100%;
      margin-inline-start: 0.4125em;
      margin-inline-end: 0.5375em;
      max-height: 0.8625em;
      overflow: visible;
      width: auto;
    }
  }

  /* Optional class to stack header actions on small screens
  /* ------------------------------------------------------------------------ */

  .header--mobile-actions-stack {
    @media (max-width: 639px) {
      grid-template-areas:
        "actions-start menu actions-end"
        "title title title";

      .header__title {
        margin-block-start: 0.25rem;
      }
    }
  }
}
@layer components {
  .icon {
    -webkit-touch-callout: none;
    background-color: currentColor;
    block-size: var(--icon-size, 1em);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1em);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1em);
    pointer-events: none;
    user-select: none;
  }

  img.icon {
    background: none;
  }

  .icon--37signals { --svg: url("37signals.svg"); }
  .icon--add { --svg: url("add.svg"); }
  .icon--add--meta { --svg: url("add--meta.svg"); }
  .icon--arrow-left { --svg: url("arrow-left.svg"); }
  .icon--arrow-right { --svg: url("arrow-right.svg"); }
  .icon--arrow-up { --svg: url("arrow-up.svg"); }
  .icon--art { --svg: url("art.svg"); }
  .icon--assigned { --svg: url("assigned.svg"); }
  .icon--attachment { --svg: url("attachment.svg"); }
  .icon--bell-alert { --svg: url("bell-alert.svg"); }
  .icon--bell-off { --svg: url("bell-off.svg"); }
  .icon--bell { --svg: url("bell.svg"); }
  .icon--bolt { --svg: url("bolt.svg"); }
  .icon--bookmark-outline { --svg: url("bookmark-outline.svg"); }
  .icon--bookmark { --svg: url("bookmark.svg"); }
  .icon--boost { --svg: url("boost.svg"); }
  .icon--camera { --svg: url("camera.svg"); }
  .icon--caret-down { --svg: url("caret-down.svg"); }
  .icon--check { --svg: url("check.svg"); }
  .icon--check-circle { --svg: url("check-circle.svg"); }
  .icon--check-all { --svg: url("check-all.svg"); }
  .icon--clipboard { --svg: url("clipboard.svg"); }
  .icon--close { --svg: url("close.svg"); }
  .icon--close-circle { --svg: url("close-circle.svg"); }
  .icon--collapse { --svg: url("collapse.svg"); }
  .icon--board { --svg: url("board.svg"); }
  .icon--board-add { --svg: url("board-add.svg"); }
  .icon--column-left { --svg: url("column-left.svg"); }
  .icon--column-right { --svg: url("column-right.svg"); }
  .icon--comment { --svg: url("comment.svg"); }
  .icon--copy-paste { --svg: url("copy-paste.svg"); }
  .icon--crown { --svg: url("crown.svg"); }
  .icon--email { --svg: url("email.svg"); }
  .icon--everyone { --svg: url("everyone.svg"); }
  .icon--expand { --svg: url("expand.svg"); }
  .icon--gear { --svg: url("gear.svg"); }
  .icon--grid { --svg: url("grid.svg"); }
  .icon--filter { --svg: url("filter.svg"); }
  .icon--fizzy { --svg: url("fizzy.svg"); }
  .icon--globe { --svg: url("globe.svg"); }
  .icon--golden-ticket { --svg: url("golden-ticket.svg"); }
  .icon--history { --svg: url("history.svg"); }
  .icon--home { --svg: url("home.svg"); }
  .icon--install-edge { --svg: url("install-edge.svg"); }
  .icon--lifebuoy { --svg: url("lifebuoy.svg"); }
  .icon--lock { --svg: url("lock.svg"); }
  .icon--logout { --svg: url("logout.svg"); }
  .icon--marker { --svg: url("marker.svg"); }
  .icon--maximize { --svg: url("maximize.svg"); }
  .icon--menu { --svg: url("menu.svg"); }
  .icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg"); }
  .icon--menu-dots-vertical { --svg: url("menu-dots-vertical.svg"); }
  .icon--minus { --svg: url("minus.svg"); }
  .icon--monitor { --svg: url("monitor.svg"); }
  .icon--moon { --svg: url("moon.svg"); }
  .icon--move { --svg: url("move.svg"); }
  .icon--notification-bell-access-only { --svg: url("bell.svg"); }
  .icon--notification-bell-watching { --svg: url("bell-off.svg"); }
  .icon--notification-bell-reverse-access-only { --svg: url("bell-off.svg"); }
  .icon--notification-bell-reverse-watching { --svg: url("bell.svg"); }
  .icon--password { --svg: url("password.svg"); }
  .icon--pencil { --svg: url("pencil.svg"); }
  .icon--person { --svg: url("person.svg"); }
  .icon--person-add { --svg: url("person-add.svg"); }
  .icon--picture-add { --svg: url("picture-add.svg"); }
  .icon--picture-double { --svg: url("picture-double.svg"); }
  .icon--picture-remove { --svg: url("picture-remove.svg"); }
  .icon--picture-zoom { --svg: url("picture-zoom.svg"); }
  .icon--pinned { --svg: url("pinned.svg"); }
  .icon--qr-code { --svg: url("qr-code.svg"); }
  .icon--reaction { --svg: url("reaction.svg"); }
  .icon--refresh { --svg: url("refresh.svg"); }
  .icon--refresh--meta { --svg: url("refresh--meta.svg"); }
  .icon--remove { --svg: url("remove.svg"); }
  .icon--rename { --svg: url("rename.svg"); }
  .icon--search { --svg: url("search.svg"); }
  .icon--settings { --svg: url("settings.svg"); }
  .icon--share { --svg: url("share.svg"); }
  .icon--sliders { --svg: url("sliders.svg"); }
  .icon--sun { --svg: url("sun.svg"); }
  .icon--switch { --svg: url("switch.svg"); }
  .icon--tag { --svg: url("tag.svg"); }
  .icon--tag-outline { --svg: url("tag-outline.svg"); }
  .icon--thumb-up { --svg: url("thumb-up.svg"); }
  .icon--trash { --svg: url("trash.svg"); }
  .icon--unpinned { --svg: url("unpinned.svg"); }
  .icon--unseen { --svg: url("unseen.svg"); }
  .icon--world { --svg: url("world.svg"); }
  .icon--youtube { --svg: url("youtube.svg"); }
}
@layer components {
  /* Trigger
  /* ------------------------------------------------------------------------ */

  .nav__trigger {
    --input-background: transparent;
    --input-border-color: transparent;
    --input-padding: 0.3em 2em 0.3em 0.75em;

    font-weight: 600;
    inline-size: auto;
    margin-block-start: 0.1em;

    ::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

    @media (any-hover: hover) {
      &:hover {
        --input-background: var(--color-ink-lighter);

        span {
          background: var(--color-ink-lighter);
        }
      }
    }

    span {
      background: var(--color-ink-lightest);
      block-size: auto;
      border-radius: 0.3125em;
      box-shadow:
        0 0 0 1px oklch(var(--lch-ink-darkest) / 0.1),
        0 0.1em 0.2em -0.1em oklch(var(--lch-ink-darkest) / 0.05),
        0 0.2em 0.4em -0.2em oklch(var(--lch-ink-darkest) / 0.05),
        0 0.3em 0.6em -0.3em oklch(var(--lch-ink-darkest) / 0.05)
      ;
      display: grid;
      height: 1.5em;
      inline-size: 1.5em;
      padding: 0.325em 0.275em 0.225em 0.275em;
      place-content: center;
      width: 1.5em;
    }

    svg {
      height: 100%;
      margin-inline-start: 0.4125em;
      margin-inline-end: 0.5375em;
      max-height: 0.8625em;
      overflow: visible;
      width: auto;
    }
  }

  /* Dialog
  /* ------------------------------------------------------------------------ */

  .nav__menu.popup {
    --panel-border-color: var(--color-selected-dark);
    --panel-border-radius: 1.4em;
    --panel-padding: var(--block-space);
    --panel-size: 45ch;
    --popup-display: grid;
    --nav-section-gap: 2px;

    block-size: auto;
    box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
                0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
                0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
                0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
    grid-template-rows: auto 1fr auto;
    gap: var(--nav-section-gap);
    max-block-size: calc(100vh - var(--block-space) - var(--footer-height));
    overflow: hidden;
    padding-block-end: 0;
    scrollbar-gutter: stable both-edges;
    z-index: var(--z-nav);

    @media (max-height: 668px) {
      max-block-size: calc(100vh - var(--block-space));
    }
  }

  .nav__scroll-container {
    display: flex;
    flex-direction: column;
    gap: var(--nav-section-gap);
    margin-inline: calc(-1 * var(--block-space)); /* space for scrollbar */
    overflow: auto;
    padding-block-end: var(--nav-section-gap);
    padding-inline: var(--block-space);
  }

  .nav__close {
    @media (any-hover: hover) {
      display: none !important;
    }
  }

  .nav__section {
    border-block-start: 1px solid var(--color-ink-lighter);
    font-size: var(--text-small);

    &[open] {
      padding-block-end: 0.4rem;
    }
  }

  .nav__section--secret:not([data-is-filtering]) {
    display: none;
  }

  .nav__header {
    --actions-width: 2rem;

    display: grid;
    grid-template-columns: var(--actions-width) 1fr var(--actions-width);
    grid-template-areas:
      "actions-start title actions-end";
    justify-items: center;
  }

  .nav__header-actions {
    display: flex;
    font-size: var(--text-x-small);
    gap: var(--inline-space);
    inline-size: var(--actions-width);
    min-inline-size: fit-content;
  }

  .nav__header-actions--end {
    grid-area: actions-end;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .nav__header-actions--start {
    grid-area: actions-start;
    margin-inline-end: auto;
  }

  .nav__header-title {
    color: inherit;
    grid-area: title;
    justify-content: center;
    margin: auto;
    min-inline-size: 0;
    text-align: center;
  }

  .nav__hotkeys {
    --gap: 8px;

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    inline-size: 100%;
    list-style: none;
    justify-content: center;
    margin: var(--block-space) auto calc(var(--block-space-half) / 2);
    max-inline-size: 100%;

    /* When all its children are hidden, hide this as well so it doesn't take up space */
    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
      display: none;
    }

    .btn {
      --btn-border-radius: 0.4em;

      align-content: end;
      aspect-ratio: 5/3;
      background-color: var(--color-ink-lightest);
      border-radius: 0.5em;
      container-type: inline-size;
      flex-basis: calc((100% - var(--gap) * 2) / 3);
      flex-direction: column;
      font-size: var(--text-small);
      line-height: 1;
      justify-content: center;
      overflow: hidden;
      position: relative;
      row-gap: 0.3lh;
      text-align: center;

      kbd {
        inset: 0.66em 0.33em auto auto;
        line-height: 1.4;
        opacity: 0.5;
        position: absolute;

        @media (any-hover: none) {
          /* This is a reasonable way to assert touch devices. any-pointer would seem */
          /* to be a better fit but it is incorrectly reported on many devices */
          display: none;
        }
      }

      .icon {
        --icon-size: 2em !important;
      }

      span {
        display: flex;
        text-wrap: nowrap;
      }

      @media (max-width: 639px) {
        font-size: var(--text-x-small);
        font-size: clamp(var(--text-xx-small), 3.15cqi, var(--text-small));
        font-weight: 500;
      }
    }
  }

  .nav__blank-slate {
    font-size: var(--text-small);
    margin: 2rem auto;

    .nav:has(.popup__item:not([hidden])) & {
      display: none;
    }
  }

  .nav__footer {
    background-color: var(--color-canvas);
    border-block-start: 1px solid var(--color-ink-lighter);
    font-size: var(--text-small);
    line-height: 1.6;
    margin-block-start: calc(-1 * var(--nav-section-gap));
    padding: 1.5ch;
    text-align: center;
    z-index: 1;

    @media (max-height: 668px) {
      font-size: var(--text-x-small);
    }
  }
}
@layer components {
  #header:has(.filters) {
    position: relative;
  }

  .filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
    justify-content: center;
    padding-block-start: 2px; /* prevents input focus-ring clipping on mobile */
    position: relative;
    view-transition-name: filters;
    z-index: 1;

    .btn {
      --btn-border-color: var(--color-ink-medium);
      --input-background: var(--color-canvas);
    }

    &:has(dialog[open]),
    &:has([data-controller~="tooltip"]:hover) {
      z-index: calc(var(--z-nav) + 1);
    }
  }

  .filter {
    &[aria-selected] {
      display: flex;
    }
  }

  .filter__button {
    --btn-border-size: 0;
    --btn-font-weight: 400;
    --btn-icon-size: 0.7em;
    --btn-padding: 0.3em 0.7em;

    inline-size: 100%;
    justify-content: space-between;
    text-align: start;

    span {
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    img {
      display: none;
    }

    &:has(input[type=checkbox]:checked) img {
      display: block;
    }
  }

  .filter__columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-block-size: 50dvh;
  }

  .filter__label {
    display: flex;
    inline-size: 100%;
    padding: 0.3em 0.7em;

    strong {
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .filter__menu {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    list-style: none;
    margin: 0;
    min-inline-size: 0;
    overflow-x: auto;
    padding: 0 var(--inline-space);
    position: relative;
    row-gap: 0.2em;

    &::before {
      block-size: 100%;
      border-block: 0;
      border-inline-end: 0;
      border-inline-start: 1px solid var(--color-ink-lighter);
      content: "";
      display: inline-flex;
      inline-size: 0;
      position: absolute;
      inset: 0 auto 0 0;
    }

    &:first-child::before {
      display: none;
    }

    li {
      text-align: start;
    }
  }

  .filter__terms:is(.input) {
    --input-background: var(--color-canvas);
    --input-border-radius: 5em;
    --input-padding: 0.5em 1.3em;
    --input-width: 16em;
    --collapsed-filter-space: calc(var(--btn-size) + var(--inline-space-half) + 0.25em);

    inline-size: var(--input-width);
    min-inline-size: var(--input-width);

    .filters:not(.filters--expanded, .filters--has-filters-set) & {
      --input-padding: 0.5em 2.7em 0.5em 1.3em;

      inline-size: calc(var(--input-width) + (0.25 * var(--collapsed-filter-space)));
      margin-inline-end: calc((var(--btn-size) + var(--inline-space-half) + 0.25em) * -1);
      min-inline-size: calc(var(--input-width) + (0.25 * var(--collapsed-filter-space)));
    }
  }

  .filter-toggle {
    .filters:not(.filters--expanded, .filters--has-filters-set) & {
      --btn-background: transparent;
      --btn-border-size: 0;

      transform: translateX(calc(var(--inline-space-half) * -1));
      position: relative;
    }
  }

  .quick-filter {
    position: relative;

    &:has([aria-checked="true"]):not(.quick-filter--with-default) {
      .input--select {
        --input-background: var(--color-selected);
      }
    }

    /* Hide a quick filter if there's nothing in it to filter by */
    &:not(:has(.popup__item)) {
      display: none !important;
    }

  }

  .filters:not(.filters--expanded) {
    .quick-filter:not([data-filter-show=true]) {
      display: none;
    }
  }

  .filters.filters--expanded {
    .quick-filter {
      display: block;
    }
  }

  .filters__manage {
    display: none;
  }

  .filters--has-filters-set .filters__manage {
    display: flex;
  }

  .filters__show-when-expanded {
    .filters:not(.filters--expanded) & {
      display: none;
    }
  }

  .filters__show-when-collapsed {
    .filters--expanded & {
      display: none;
    }
  }
}

@layer components {
  .separator {
    block-size: 100%;
    border-block: 0;
    border-inline-end: 0;
    border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
    display: inline-flex;
    inline-size: 0;
  }

  .separator--horizontal {
    block-size: 0;
    border-block-end: 0;
    border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
    border-inline: 0;
    display: flex;
  }
}
@layer components {
  .spinner {
    position: relative;

    &::before {
      --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
      --dot-size: 1.25em;

      -webkit-mask: var(--mask), var(--mask), var(--mask);
      -webkit-mask-size: 28% 45%;
      animation: submitting 1.3s infinite linear;
      aspect-ratio: 8/5;
      background: currentColor;
      content: "";
      inline-size: var(--dot-size);
      inset: 50% 0.25em;
      margin-block: calc((var(--dot-size) / 3) * -1);
      margin-inline: calc((var(--dot-size) / 2) * -1);
      position: absolute;
    }
  }
}
@layer utilities {
  /* Text */
  .txt-xx-small { font-size: var(--text-xx-small); }
  .txt-x-small { font-size: var(--text-x-small); }
  .txt-small { font-size: var(--text-small); }
  .txt-normal { font-size: var(--text-normal); }
  .txt-medium { font-size: var(--text-medium); }
  .txt-large { font-size: var(--text-large); }
  .txt-x-large { font-size: var(--text-x-large); }
  .txt-xx-large { font-size: var(--text-xx-large); }

  .txt-align-center { text-align: center; }
  .txt-align-start { text-align: start; }
  .txt-align-end { text-align: end; }

  .txt-current { color: currentColor; }
  .txt-ink { color: var(--color-ink); }
  .txt-reversed { color: var(--color-ink-inverted); }
  .txt-negative { color: var(--color-negative); }
  .txt-positive { color: var(--color-positive); }
  .txt-subtle { color: var(--color-ink-dark); }
  .txt-alert { color: var(--color-marker); }
  .txt-undecorated { text-decoration: none; }
  .txt-underline { text-decoration: underline; }
  .txt-tight-lines { line-height: 1.2; }
  .txt-nowrap { white-space: nowrap; }
  .txt-balance { text-wrap: balance; }
  .txt-break { word-break: break-word; }
  .txt-uppercase { text-transform: uppercase; }
  .txt-capitalize { text-transform: capitalize; }
  .txt-capitalize-first-letter::first-letter { text-transform: capitalize; }
  .txt-link { color: var(--color-link); text-decoration: underline; }

  .font-weight-normal { font-weight: normal; }
  .font-weight-semibold { font-weight: 600; }
  .font-weight-bold { font-weight: bold; }
  .font-weight-black { font-weight: 900; }

  /* Flexbox and Grid */
  .justify-end { justify-content: end; }
  .justify-start { justify-content: start; }
  .justify-center { justify-content: center; }
  .justify-space-between { justify-content: space-between; }

  .align-center { align-items: center; }
  .align-start { align-items: start; }
  .align-end { align-items: end; }

  .align-self-center { align-self: center; }
  .align-self-end { align-self: end; }
  .align-self-start { align-self: start; }

  .v-align-middle { vertical-align: middle; }

  .contain { contain: inline-size; }

  .display-inline { display: inline; }

  .flex { display: flex; }
  .flex-inline { display: inline-flex; }
  .flex-column { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }

  .flex-1 { flex: 1; }
  .flex-item-grow { flex-grow: 1; }
  .flex-item-shrink { flex-shrink: 1; }
  .flex-item-no-shrink { flex-shrink: 0; }
  .flex-item-justify-start { margin-inline-end: auto; }
  .flex-item-justify-end { margin-inline-start: auto; }

  .gap {
    column-gap: var(--column-gap, var(--inline-space));
    row-gap: var(--row-gap, var(--block-space));
  }

  .gap-half {
    column-gap: var(--column-gap, var(--inline-space-half));
    row-gap: var(--row-gap, var(--block-space-half));
  }

  .gap-none {
    --column-gap: 0;
    --row-gap: 0;

    gap: 0;
  }

  /* Sizing */
  .full-width { inline-size: 100%; }
  .min-width { min-inline-size: 0; }
  .half-width { inline-size: 50%; }
  .max-width { max-inline-size: 100%; }
  .min-content { inline-size: min-content; }
  .fit-content { inline-size: fit-content; }
  .max-inline-size { max-inline-size: 100%; }

  /* Overflow */
  .overflow-x { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
  .overflow-y { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
  .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; }
  .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

  .overflow-line-clamp {
    -webkit-line-clamp: var(--lines, 2);
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
  }

  /* Mouse pointer */
  .non-clickable {
    cursor: default;
    pointer-events: none;
  }

  .cursor-pointer { cursor: pointer; }

  /* Padding */
  .pad { padding: var(--block-space) var(--inline-space); }
  .pad-double { padding: var(--block-space-double) var(--inline-space-double); }

  .pad-block { padding-block: var(--block-space); }
  .pad-block-start { padding-block-start: var(--block-space); }
  .pad-block-end { padding-block-end: var(--block-space); }
  .pad-block-half { padding-block: var(--block-space-half); }
  .pad-block-start-half { padding-block-start: var(--block-space-half); }

  .pad-inline { padding-inline: var(--inline-space); }
  .pad-inline-start { padding-inline-start: var(--inline-space); }
  .pad-inline-end { padding-inline-end: var(--inline-space); }
  .pad-inline-half { padding-inline: var(--inline-space-half); }
  .pad-inline-double { padding-inline: var(--inline-space-double); }

  .unpad { padding: 0; }
  .unpad-block-end { padding-block-end: 0; }
  .unpad-inline { padding-inline: 0; }

  /* Margins */
  .margin { margin: var(--block-space) var(--inline-space); }
  .margin-block { margin-block: var(--block-space); }
  .margin-block-half { margin-block: var(--block-space-half); }
  .margin-block-start { margin-block-start: var(--block-space); }
  .margin-block-start-half { margin-block-start: var(--block-space-half); }
  .margin-block-start-auto { margin-block-start: auto; }
  .margin-block-end { margin-block-end: var(--block-space); }
  .margin-block-end-half { margin-block-end: var(--block-space-half); }
  .margin-block-double { margin-block: var(--block-space-double); }
  .margin-block-end-double { margin-block-end: var(--block-space-double); }
  .margin-block-start-double { margin-block-start: var(--block-space-double); }

  .margin-inline { margin-inline: var(--inline-space); }
  .margin-inline-start { margin-inline-start: var(--inline-space); }
  .margin-inline-start-half { margin-inline-start: var(--inline-space-half); }
  .margin-inline-end { margin-inline-end: var(--inline-space); }
  .margin-inline-end-half { margin-inline-end: var(--inline-space-half); }
  .margin-inline-half { margin-inline: var(--inline-space-half); }
  .margin-inline-double { margin-inline: var(--inline-space-double); }

  .margin-none { margin: 0; }
  .margin-none-block { margin-block: 0; }
  .margin-none-block-start { margin-block-start: 0; }
  .margin-none-block-end { margin-block-end: 0; }

  .margin-none-inline { margin-inline: 0; }
  .margin-none-inline-start { margin-inline-start: 0; }
  .margin-none-inline-end { margin-inline-end: 0; }

  .center { margin-inline: auto; }
  .center-block { margin-block: auto; }

  /* Position */
  .position-relative { position: relative; }
  .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); }

  /* Fills */
  .fill { background-color: var(--color-canvas); }
  .fill-black { background-color: var(--color-ink); }
  .fill-white { background-color: var(--color-ink-inverted); }
  .fill-shade { background-color: var(--color-ink-lightest); }
  .fill-selected { background-color: var(--color-selected); }
  .fill-highlight { background-color: var(--color-highlight); }
  .fill-transparent { background-color: transparent; }

  .fill-highlighter {
    display: inline-block;
    position: relative;
    z-index: 1;

    &::before {
      background-color: var(--color-highlight);
      border-radius: 0.2em;
      content: "";
      inset-block: 0;
      inset-inline: -0.1em;
      position: absolute;
      transform: skewX(-10deg) rotate(1deg);
      z-index: -1;
    }
  }

  .translucent { opacity: var(--opacity, 0.66); }

  /* Borders */
  .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
  .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
  .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
  .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); }
  .borderless { border: 0; }

  /* Border radius */
  .border-radius { border-radius: var(--border-radius, 0.5em); }

  /* Shadows */
  .shadow { box-shadow: var(--shadow); }

  /* Lists */
  :where(.list-style-none) {
    list-style: none;
    margin: 0 auto;
    padding: 0;
  }

  /* Accessibility */
  .visually-hidden,
  .for-screen-reader {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  /* Visibility */
  [hidden] { display: none !important; }
  .display-contents,
  [contents] { display: contents; }

  .hide-in-pwa {
    @media (display-mode: standalone) {
      display: none;
    }
  }

  .hide-in-browser {
    @media (display-mode: browser) {
      display: none;
    }
  }

  .hide-focus-ring {
    --focus-ring-size: 0;
  }

  .hide-on-touch {
    @media (any-hover: none) {
      display: none;
    }
  }

  .show-on-touch {
    display: none;

    @media (any-hover: none) {
      display: unset;
    }
  }

  .show-on-native {
    body:not([data-platform~=native]) & {
      display: none;
    }
  }

  .hide-scrollbar {
    -ms-overflow-style: none;  /* Edge */
    scrollbar-width: none; /* FF */

    /* Chrome/Safari/Opera */
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
/* CAS Classifier — Custom styles using Fizzy design tokens */

/* Override Fizzy body grid */
body {
  display: block !important;
}

/* ===== Top section (chips + search + progress) ===== */
.cc-top {
  max-inline-size: var(--main-width);
  margin: 0 auto;
  padding: var(--block-space) var(--main-padding) 0;
}

/* ===== Layout — two columns: cards left, detail right ===== */
.cc-layout {
  display: grid;
  gap: 0 var(--block-space);
  grid-template-columns: 1fr;
  max-inline-size: var(--main-width);
  margin: 0 auto;
  padding: 0 var(--main-padding) var(--block-space);

  @media (min-width: 900px) {
    grid-template-columns: 2fr 3fr;
  }
}

/* ===== Header bar ===== */
.wa-header {
  align-items: center;
  background: var(--color-canvas);
  border-block-end: 1px solid var(--color-ink-lighter);
  display: flex;
  gap: var(--inline-space);
  justify-content: space-between;
  padding: var(--block-space-half) var(--main-padding);
}

.wa-header__title {
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.wa-header__actions {
  align-items: center;
  display: flex;
  gap: var(--inline-space);
}

/* ===== Search form ===== */
.cc-search {
  display: flex;
  gap: var(--inline-space-half);
  justify-content: center;
  margin-block-end: var(--block-space);
}

.cc-search .input {
  max-inline-size: 30ch;
}

/* ===== Chips row ===== */
.cc-chips-row {
  align-items: center;
  display: flex;
  gap: var(--inline-space);
  justify-content: center;
  margin-block-end: var(--block-space);
}

/* ===== Pill navigation (chips) ===== */
.wa-pill-nav {
  background: var(--color-ink-lightest);
  border-radius: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 3px;
  width: fit-content;
}

/* Exams chip — separated, accent color */
.wa-pill-nav__link--exams {
  background: oklch(93% 0.04 350);
  border: none;
  border-radius: 2em;
  color: oklch(40% 0.12 350);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0.4em 2ch;
  text-decoration: none;
  transition: all 100ms ease-out;
}

.wa-pill-nav__link--exams:hover {
  background: oklch(88% 0.06 350);
}

.wa-pill-nav__link--exams.wa-pill-nav__link--active {
  background: oklch(40% 0.12 350);
  color: white;
  box-shadow: 0 1px 3px oklch(30% 0 0 / 15%);
}

.wa-pill-nav__link {
  border: none;
  border-radius: 2em;
  background: none;
  color: var(--color-ink-medium);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  padding: 0.4em 2ch;
  text-decoration: none;
  transition: all 100ms ease-out;
}

.wa-pill-nav__link:hover {
  color: var(--color-ink);
}

.wa-pill-nav__link--active {
  background: var(--color-canvas);
  box-shadow: 0 1px 3px oklch(30% 0 0 / 15%);
  color: var(--color-ink);
}

/* ===== Cards list ===== */
.cc-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-block-size: 80dvh;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.wa-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-ink-lighter);
  border-radius: 0.5em;
  box-shadow: 0 2px 4px oklch(30% 0 0 / 12%);
  cursor: pointer;
  display: block;
  padding: 1em 1.5ch;
  transition: all 100ms ease-out;
}

.wa-card:hover {
  border-color: var(--color-ink-light);
  box-shadow: 0 0 0 1px oklch(var(--lch-blue-dark) / 10%),
              0 0.3em 0.3em oklch(var(--lch-black) / 7%),
              0 0.6em 0.6em oklch(var(--lch-black) / 5%);
}

.wa-card--selected {
  border-color: oklch(var(--lch-blue)) !important;
  box-shadow: 0 0 0 2px oklch(var(--lch-blue-dark) / 20%);
  background: oklch(var(--lch-blue-lightest));
}

.wa-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-block-end: 6px;
}

.wa-card__body {
  color: inherit;
  display: block;
}

/* ===== Badges ===== */
.wa-badge {
  border-radius: 2em;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.25lh 1ch;
  text-transform: uppercase;
}

.wa-badge--pubchem {
  background: oklch(93% 0.04 250);
  color: oklch(40% 0.12 250);
}

.wa-badge--echa-clh {
  background: oklch(93% 0.04 290);
  color: oklch(40% 0.12 290);
}

.wa-badge--echa-obligations {
  background: oklch(93% 0.04 310);
  color: oklch(40% 0.12 310);
}

.wa-badge--rpb {
  background: oklch(93% 0.04 150);
  color: oklch(40% 0.12 150);
}

.wa-badge--inrs {
  background: oklch(93% 0.04 195);
  color: oklch(40% 0.12 195);
}

.wa-badge--llm {
  background: oklch(93% 0.04 350);
  color: oklch(40% 0.12 350);
}

.wa-badge--compare {
  background: oklch(93% 0.04 85);
  color: oklch(40% 0.12 85);
}

.wa-badge--error {
  background: oklch(var(--lch-red-lightest));
  color: oklch(var(--lch-red-dark));
}

/* ===== Detail panel ===== */
.cc-detail {
  min-block-size: 200px;
}

.wa-detail {
  background: var(--color-canvas);
  border: 1px solid var(--color-ink-lighter);
  border-radius: 1em;
  box-shadow: var(--shadow);
  max-block-size: 80dvh;
  overflow-y: auto;
  padding: var(--block-space-double);
  position: sticky;
  top: var(--block-space);
}

.wa-detail__header {
  align-items: flex-start;
  display: flex;
  gap: var(--inline-space-double);
  justify-content: space-between;
  margin-block-end: var(--block-space);
}

.wa-detail__title {
  color: var(--color-ink);
  font-size: var(--text-large);
  font-weight: 900;
  line-height: 1.2;
}

.wa-detail__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ===== Rendered markdown in detail panel ===== */
.cc-markdown {
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--color-ink-dark);
}

.cc-markdown h1, .cc-markdown h2 {
  color: var(--color-ink);
  font-size: var(--text-normal);
  font-weight: 800;
  margin-block: 0.8em 0.3em;
}

.cc-markdown h3 {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
  margin-block: 0.6em 0.2em;
}

.cc-markdown h4 {
  color: var(--color-ink-dark);
  font-size: var(--text-small);
  font-weight: 600;
  margin-block: 0.5em 0.2em;
}

.cc-markdown p {
  margin-block: 0.2em;
}

.cc-markdown ul {
  list-style: disc;
  margin-block: 0.3em;
  padding-inline-start: 2ch;
}

.cc-markdown li {
  margin-block: 0.1em;
}

.cc-markdown a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: break-word;
}

.cc-markdown a:hover {
  color: var(--color-ink);
}

.cc-markdown table {
  border-collapse: collapse;
  font-size: var(--text-x-small);
  margin-block: 0.5em;
  width: 100%;
}

.cc-markdown th, .cc-markdown td {
  border: 1px solid var(--color-ink-lighter);
  padding: 0.3em 0.8ch;
  text-align: left;
}

.cc-markdown th {
  background: var(--color-ink-lightest);
  font-weight: 600;
}

.cc-markdown em {
  color: var(--color-ink-medium);
}

/* ===== LLM Streaming ===== */
.cc-stream-status {
  color: var(--color-ink-medium);
  font-size: var(--text-x-small);
  font-weight: 600;
  margin-block-end: var(--block-space-half);
}

.cc-stream-thinking {
  background: var(--color-ink-lightest);
  border-radius: 0.5em;
  color: var(--color-ink-medium);
  font-family: var(--font-mono);
  font-size: var(--text-x-small);
  line-height: 1.5;
  max-block-size: 20vh;
  overflow-y: auto;
  padding: 0.8em 1ch;
  margin-block-end: var(--block-space-half);
  white-space: pre-wrap;
}

.cc-stream-conclusion {
  min-block-size: 2em;
}

.wa-detail__section {
  margin-block: var(--block-space-half);
}

.wa-detail__section-title {
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
  margin-block-end: 0.3em;
}

.wa-detail__row {
  color: var(--color-ink-dark);
  font-size: var(--text-small);
  line-height: 1.6;
  overflow-wrap: break-word;
}

.wa-detail__row a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wa-detail__row a:hover {
  color: var(--color-ink);
}

.wa-detail__label {
  color: var(--color-ink-medium);
  font-size: var(--text-x-small);
}

.wa-detail__placeholder {
  color: var(--color-ink-medium);
  padding: var(--block-space-double);
  text-align: center;
}

/* ===== Divider ===== */
.wa-divider {
  background: var(--color-ink-lighter);
  block-size: 1px;
  margin-block: var(--block-space-half);
}

/* ===== Small button ===== */
.btn--small {
  font-size: var(--text-x-small);
  padding: 0.3em 1ch;
}

/* ===== Progress bar ===== */
.cc-progress-bar {
  margin-block-end: var(--block-space);
  max-inline-size: 50ch;
  margin-inline: auto;
}

.cc-progress-bar__track {
  background: var(--color-ink-lightest);
  border-radius: 0.5em;
  height: 6px;
  overflow: hidden;
}

.cc-progress-bar__fill {
  background: oklch(var(--lch-blue));
  border-radius: 0.5em;
  height: 100%;
  transition: width 300ms ease-out;
  width: 0%;
}

.cc-progress-bar__text {
  color: var(--color-ink-medium);
  font-size: var(--text-x-small);
  margin-block-start: 4px;
  text-align: center;
}