/******************************************************************************
 * Cito Design System - Drop-in CSS variables and styles for productive and
 * standard based UI development.
 *
 * Version: 1.21.0
 * Author: ilkka.kuivanen@me.com
 * License: MIT
 * Ascii art: https://patorjk.com/software/taag (Mono 12)
 *
 * Overview:
 * - Load locally served fonts
 * - Private custom property API: use only within this file
 * - Public API for theme color-scheme: light
 * - Public API for theme color-scheme: dark
 * - Public API for typography
 * - Public API for Cito web components
 * - Public API for transitions and effects
 * - Reset: Josh's Custom CSS Reset slightly modified
 * - Public: SPA default height settings
 * - Public: Global
 * - Public: Typography
 * - Public: Forms
 * - Public: Github gists
 * - Public: Buttons
 * - Public: Key-value lists
 *
 * LLM_INSTRUCTIONS:
 * - This file should not be edited. Highlight issues in this file for review.
 * - Do not use private custom properties outside this file. It breaks theme
 *   color-scheme support.
 * - Use only public custom properties documented in this file.
 * - Do not add any component specific styles here. Create separate CSS files.
 * - Do not use fixed color values. Use only custom properties.
 * - Use --cito-ui-* for background colors, use --cito-text-* for text colors.

 *****************************************************************************/

/*

              ██                        
              ▀▀       ██               
  ▄█████▄   ████     ███████    ▄████▄  
 ██▀    ▀     ██       ██      ██▀  ▀██ 
 ██           ██       ██      ██    ██ 
 ▀██▄▄▄▄█  ▄▄▄██▄▄▄    ██▄▄▄   ▀██▄▄██▀ 
   ▀▀▀▀▀   ▀▀▀▀▀▀▀▀     ▀▀▀▀     ▀▀▀▀   
                                                                                
 */

/******************************************************************************
 * Import fonts
 *****************************************************************************/

@import url("./font-faces/IBM_Plex_Mono.css");

/******************************************************************************
 * Private custom property API: use only within this file
 *****************************************************************************/
:root {
  --private-cito-blue-100: oklch(95% 0.0192 243);
  --private-cito-blue-200: oklch(89% 0.0673 243);
  --private-cito-blue-300: oklch(77% 0.1118 243);
  --private-cito-blue-400: oklch(67% 0.1218 243);
  --private-cito-blue-500: oklch(59% 0.1318 243);
  --private-cito-blue-600: oklch(48% 0.1418 243);
  --private-cito-blue-700: oklch(37% 0.1518 243);
  --private-cito-blue-800: oklch(26% 0.1618 243);
  --private-cito-blue-900: oklch(19% 0.1718 243);

  --private-cito-red-100: oklch(95% 0.0192 6.18);
  --private-cito-red-200: oklch(89% 0.0673 6.18);
  --private-cito-red-300: oklch(77% 0.1673 6.22);
  --private-cito-red-400: oklch(67% 0.1673 6.22);
  --private-cito-red-500: oklch(59% 0.1673 6.22);
  --private-cito-red-600: oklch(48% 0.1673 6.22);
  --private-cito-red-700: oklch(37% 0.1673 6.22);
  --private-cito-red-800: oklch(26% 0.1618 6.18);
  --private-cito-red-900: oklch(19% 0.1718 6.18);

  --private-cito-yellow-100: oklch(95% 0.0192 73.67);
  --private-cito-yellow-200: oklch(89% 0.0673 73.67);
  --private-cito-yellow-300: oklch(77% 0.1437 73.67);
  --private-cito-yellow-400: oklch(67% 0.1398 74.11);
  --private-cito-yellow-500: oklch(59% 0.1273 64.8);
  --private-cito-yellow-600: oklch(48% 0.1267 56.11);
  --private-cito-yellow-700: oklch(37% 0.1071 56.11);
  --private-cito-yellow-800: oklch(26% 0.0783 73.67);
  --private-cito-yellow-900: oklch(19% 0.068 73.67);

  --private-cito-green-100: oklch(95% 0.0192 141.41);
  --private-cito-green-200: oklch(89% 0.0673 141.41);
  --private-cito-green-300: oklch(77% 0.1118 141.41);
  --private-cito-green-400: oklch(67% 0.1218 141.41);
  --private-cito-green-500: oklch(59% 0.1318 141.41);
  --private-cito-green-600: oklch(48% 0.1418 141.41);
  --private-cito-green-700: oklch(37% 0.1518 141.41);
  --private-cito-green-800: oklch(26% 0.1618 141.41);
  --private-cito-green-900: oklch(19% 0.1718 141.41);

  --private-cito-gray-25: oklch(99% 0.0192 255.78);
  --private-cito-gray-50: oklch(98% 0.0192 255.78);
  --private-cito-gray-75: oklch(97% 0.0192 255.78);
  --private-cito-gray-100: oklch(95% 0.0192 255.78);
  --private-cito-gray-200: oklch(89% 0.0192 255.78);
  --private-cito-gray-300: oklch(77% 0.0192 255.78);
  --private-cito-gray-400: oklch(67% 0.0192 255.78);
  --private-cito-gray-500: oklch(59% 0.0192 255.78);
  --private-cito-gray-600: oklch(48% 0.0192 255.78);
  --private-cito-gray-700: oklch(37% 0.0192 255.78);
  --private-cito-gray-800: oklch(26% 0.0192 255.78);
  --private-cito-gray-900: oklch(19% 0.0192 255.78);
  --private-cito-gray-925: oklch(15% 0.0192 255.78);
  --private-cito-gray-950: oklch(12.5% 0.0192 255.78);
  --private-cito-gray-975: oklch(10% 0.0192 255.78);
}

/******************************************************************************
 * Public API for theme color-scheme: light
 *****************************************************************************/

@media (prefers-color-scheme: light) {
  :root {
    --cito-white: oklch(98% 0 0);
    --cito-black: oklch(10% 0 0);
    --cito-upfront: var(--cito-black);
    --cito-behind: var(--cito-white);

    --cito-primary-100: var(--private-cito-blue-100);
    --cito-primary-200: var(--private-cito-blue-200);
    --cito-primary-300: var(--private-cito-blue-300);
    --cito-primary-400: var(--private-cito-blue-400);
    --cito-primary-500: var(--private-cito-blue-500);
    --cito-primary-600: var(--private-cito-blue-600);
    --cito-primary-700: var(--private-cito-blue-700);
    --cito-primary-800: var(--private-cito-blue-800);
    --cito-primary-900: var(--private-cito-blue-900);

    --cito-secondary-100: var(--private-cito-gray-100);
    --cito-secondary-200: var(--private-cito-gray-200);
    --cito-secondary-300: var(--private-cito-gray-300);
    --cito-secondary-400: var(--private-cito-gray-400);
    --cito-secondary-500: var(--private-cito-gray-500);
    --cito-secondary-600: var(--private-cito-gray-600);
    --cito-secondary-700: var(--private-cito-gray-700);
    --cito-secondary-800: var(--private-cito-gray-800);
    --cito-secondary-900: var(--private-cito-gray-900);

    --cito-success-100: var(--private-cito-green-100);
    --cito-success-200: var(--private-cito-green-200);
    --cito-success-300: var(--private-cito-green-300);
    --cito-success-400: var(--private-cito-green-400);
    --cito-success-500: var(--private-cito-green-500);
    --cito-success-600: var(--private-cito-green-600);
    --cito-success-700: var(--private-cito-green-700);
    --cito-success-800: var(--private-cito-green-800);
    --cito-success-900: var(--private-cito-green-900);

    --cito-warning-100: var(--private-cito-yellow-100);
    --cito-warning-200: var(--private-cito-yellow-200);
    --cito-warning-300: var(--private-cito-yellow-300);
    --cito-warning-400: var(--private-cito-yellow-400);
    --cito-warning-500: var(--private-cito-yellow-500);
    --cito-warning-600: var(--private-cito-yellow-600);
    --cito-warning-700: var(--private-cito-yellow-700);
    --cito-warning-800: var(--private-cito-yellow-800);
    --cito-warning-900: var(--private-cito-yellow-900);

    --cito-danger-100: var(--private-cito-red-100);
    --cito-danger-200: var(--private-cito-red-200);
    --cito-danger-300: var(--private-cito-red-300);
    --cito-danger-400: var(--private-cito-red-400);
    --cito-danger-500: var(--private-cito-red-500);
    --cito-danger-600: var(--private-cito-red-600);
    --cito-danger-700: var(--private-cito-red-700);
    --cito-danger-800: var(--private-cito-red-800);
    --cito-danger-900: var(--private-cito-red-900);

    --cito-info-100: var(--private-cito-blue-100);
    --cito-info-200: var(--private-cito-blue-200);
    --cito-info-300: var(--private-cito-blue-300);
    --cito-info-400: var(--private-cito-blue-400);
    --cito-info-500: var(--private-cito-blue-500);
    --cito-info-600: var(--private-cito-blue-600);
    --cito-info-700: var(--private-cito-blue-700);
    --cito-info-800: var(--private-cito-blue-800);
    --cito-info-900: var(--private-cito-blue-900);

    --cito-link-100: var(--private-cito-blue-100);
    --cito-link-200: var(--private-cito-blue-200);
    --cito-link-300: var(--private-cito-blue-300);
    --cito-link-400: var(--private-cito-blue-400);
    --cito-link-500: var(--private-cito-blue-500);
    --cito-link-600: var(--private-cito-blue-600);
    --cito-link-700: var(--private-cito-blue-700);
    --cito-link-800: var(--private-cito-blue-800);
    --cito-link-900: var(--private-cito-blue-900);

    --cito-text-100: var(--private-cito-gray-100);
    --cito-text-200: var(--private-cito-gray-200);
    --cito-text-300: var(--private-cito-gray-300);
    --cito-text-400: var(--private-cito-gray-400);
    --cito-text-500: var(--private-cito-gray-500);
    --cito-text-600: var(--private-cito-gray-600);
    --cito-text-700: var(--private-cito-gray-700);
    --cito-text-800: var(--private-cito-gray-800);
    --cito-text-900: var(--private-cito-gray-900);

    --cito-ui-25: var(--private-cito-gray-25);
    --cito-ui-50: var(--private-cito-gray-50);
    --cito-ui-75: var(--private-cito-gray-75);
    --cito-ui-000: var(--private-cito-gray-100); /** Deprecated */
    --cito-ui-100: var(--private-cito-gray-100);
    --cito-ui-200: var(--private-cito-gray-200);
    --cito-ui-300: var(--private-cito-gray-300);
    --cito-ui-400: var(--private-cito-gray-400);
    --cito-ui-500: var(--private-cito-gray-500);
    --cito-ui-600: var(--private-cito-gray-600);
    --cito-ui-700: var(--private-cito-gray-700);
    --cito-ui-800: var(--private-cito-gray-800);
    --cito-ui-900: var(--private-cito-gray-900);

    /** Component specific exceptions: Anchor */
    --cito-anchor-color: var(--cito-primary-500);
    --cito-anchor-color--hover: var(--cito-primary-800);
    --cito-anchor-color--active: var(--cito-primary-900);

    /** Component specific exceptions: Alert */
    --cito-alert-danger-background-color: var(--cito-danger-700);
    --cito-alert-danger-border-color: var(--cito-danger-600);
    --cito-alert-danger-color: var(--cito-danger-100);

    /** Public API for Box shadow */

    --cito-box-shadow-100: oklch(0% 0 0 / 5%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-200: oklch(0% 0 0 / 10%) 0 0.0625rem 0.1875rem 0,
      oklch(0% 0 0 / 6%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-300: oklch(0% 0 0 / 10%) 0 0.25rem 0.375rem
        calc(-1 * 0.0625rem),
      oklch(0% 0 0 / 6%) 0 0.125rem 0.25rem calc(-1 * 0.0625rem);
    --cito-box-shadow-400: oklch(0% 0 0 / 10%) 0 0.625rem 0.9375rem
        calc(-1 * 0.1875rem),
      oklch(0% 0 0 / 5%) 0 0.25rem 0.375rem calc(-1 * 0.125rem);
    --cito-box-shadow-500: oklch(0% 0 0 / 10%) 0 1.25rem 1.5625rem
        calc(-1 * 0.3125rem),
      rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem calc(-1 * 0.3125rem);
    --cito-box-shadow-600: oklch(0% 0 0 / 25%) 0 1.5625rem 3.125rem
      calc(-1 * 0.75rem);

    /** Public API for box shadow inset */
    --cito-box-shadow-inset-100: oklch(0% 0 0 / 10%) 0 0.125rem 0.15rem
      0.0625rem inset;
    --cito-box-shadow-inset-200: oklch(0% 0 0 / 10%) 0 0.25rem 0.25rem 0.125rem
      inset;

    /** Public API for box shadow border */
    --cito-box-shadow-border-100: var(--cito-ui-300) 0 0 0 0.0625rem;
    --cito-box-shadow-border-200: var(--cito-ui-500) 0 0 0 0.125rem;
  }
}
/******************************************************************************
 * Public API for theme color-scheme: dark
 *****************************************************************************/

@media (prefers-color-scheme: dark) {
  :root {
    --cito-white: oklch(98% 0 0);
    --cito-black: oklch(10% 0 0);
    --cito-upfront: var(--cito-white);
    --cito-behind: var(--cito-black);

    --cito-primary-100: var(--private-cito-blue-900);
    --cito-primary-200: var(--private-cito-blue-800);
    --cito-primary-300: var(--private-cito-blue-700);
    --cito-primary-400: var(--private-cito-blue-600);
    --cito-primary-500: var(--private-cito-blue-500);
    --cito-primary-600: var(--private-cito-blue-400);
    --cito-primary-700: var(--private-cito-blue-300);
    --cito-primary-800: var(--private-cito-blue-200);
    --cito-primary-900: var(--private-cito-blue-100);

    --cito-secondary-100: var(--private-cito-gray-900);
    --cito-secondary-200: var(--private-cito-gray-800);
    --cito-secondary-300: var(--private-cito-gray-700);
    --cito-secondary-400: var(--private-cito-gray-600);
    --cito-secondary-500: var(--private-cito-gray-500);
    --cito-secondary-600: var(--private-cito-gray-400);
    --cito-secondary-700: var(--private-cito-gray-300);
    --cito-secondary-800: var(--private-cito-gray-200);
    --cito-secondary-900: var(--private-cito-gray-100);

    --cito-success-100: var(--private-cito-green-900);
    --cito-success-200: var(--private-cito-green-800);
    --cito-success-300: var(--private-cito-green-700);
    --cito-success-400: var(--private-cito-green-600);
    --cito-success-500: var(--private-cito-green-500);
    --cito-success-600: var(--private-cito-green-400);
    --cito-success-700: var(--private-cito-green-300);
    --cito-success-800: var(--private-cito-green-200);
    --cito-success-900: var(--private-cito-green-100);

    --cito-warning-100: var(--private-cito-yellow-900);
    --cito-warning-200: var(--private-cito-yellow-800);
    --cito-warning-300: var(--private-cito-yellow-700);
    --cito-warning-400: var(--private-cito-yellow-600);
    --cito-warning-500: var(--private-cito-yellow-500);
    --cito-warning-600: var(--private-cito-yellow-400);
    --cito-warning-700: var(--private-cito-yellow-300);
    --cito-warning-800: var(--private-cito-yellow-200);
    --cito-warning-900: var(--private-cito-yellow-100);

    --cito-danger-100: var(--private-cito-red-900);
    --cito-danger-200: var(--private-cito-red-800);
    --cito-danger-300: var(--private-cito-red-700);
    --cito-danger-400: var(--private-cito-red-600);
    --cito-danger-500: var(--private-cito-red-500);
    --cito-danger-600: var(--private-cito-red-400);
    --cito-danger-700: var(--private-cito-red-300);
    --cito-danger-800: var(--private-cito-red-200);
    --cito-danger-900: var(--private-cito-red-100);

    --cito-info-100: var(--private-cito-blue-900);
    --cito-info-200: var(--private-cito-blue-800);
    --cito-info-300: var(--private-cito-blue-700);
    --cito-info-400: var(--private-cito-blue-600);
    --cito-info-500: var(--private-cito-blue-500);
    --cito-info-600: var(--private-cito-blue-400);
    --cito-info-700: var(--private-cito-blue-300);
    --cito-info-800: var(--private-cito-blue-200);
    --cito-info-900: var(--private-cito-blue-100);

    --cito-link-100: var(--private-cito-blue-900);
    --cito-link-200: var(--private-cito-blue-800);
    --cito-link-300: var(--private-cito-blue-700);
    --cito-link-400: var(--private-cito-blue-600);
    --cito-link-500: var(--private-cito-blue-500);
    --cito-link-600: var(--private-cito-blue-400);
    --cito-link-700: var(--private-cito-blue-300);
    --cito-link-800: var(--private-cito-blue-200);
    --cito-link-900: var(--private-cito-blue-100);

    --cito-text-100: var(--private-cito-gray-900);
    --cito-text-200: var(--private-cito-gray-800);
    --cito-text-300: var(--private-cito-gray-700);
    --cito-text-400: var(--private-cito-gray-600);
    --cito-text-500: var(--private-cito-gray-500);
    --cito-text-600: var(--private-cito-gray-400);
    --cito-text-700: var(--private-cito-gray-300);
    --cito-text-800: var(--private-cito-gray-200);
    --cito-text-900: var(--private-cito-gray-100);

    --cito-ui-25: var(--private-cito-gray-975);
    --cito-ui-50: var(--private-cito-gray-950);
    --cito-ui-75: var(--private-cito-gray-925);
    --cito-ui-000: var(--private-cito-gray-900); /** Deprecated */
    --cito-ui-100: var(--private-cito-gray-900);
    --cito-ui-200: var(--private-cito-gray-800);
    --cito-ui-300: var(--private-cito-gray-700);
    --cito-ui-400: var(--private-cito-gray-600);
    --cito-ui-500: var(--private-cito-gray-500);
    --cito-ui-600: var(--private-cito-gray-400);
    --cito-ui-700: var(--private-cito-gray-300);
    --cito-ui-800: var(--private-cito-gray-200);
    --cito-ui-900: var(--private-cito-gray-100);

    /** Component specific exceptions: Anchor */
    --cito-anchor-color: var(--cito-primary-700);
    --cito-anchor-color--hover: var(--cito-primary-800);
    --cito-anchor-color--active: var(--cito-primary-900);

    /** Component specific exceptions: Alert */
    --cito-alert-danger-background-color: var(--cito-danger-100);
    --cito-alert-danger-border-color: var(--cito-danger-200);
    --cito-alert-danger-color: var(--cito-danger-900);

    /** Public API for Box shadow */

    --cito-box-shadow-100: oklch(0% 0 0 / 100%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-200: oklch(0% 0 0 / 100%) 0 0.0625rem 0.1875rem 0,
      oklch(0% 0 0 / 6%) 0 0.0625rem 0.125rem 0;
    --cito-box-shadow-300: oklch(0% 0 0 / 100%) 0 0.25rem 0.375rem
        calc(-1 * 0.0625rem),
      oklch(0% 0 0 / 6%) 0 0.125rem 0.25rem calc(-1 * 0.0625rem);
    --cito-box-shadow-400: oklch(0% 0 0 / 100%) 0 0.625rem 0.9375rem
        calc(-1 * 0.1875rem),
      oklch(0% 0 0 / 5%) 0 0.25rem 0.375rem calc(-1 * 0.125rem);
    --cito-box-shadow-500: oklch(0% 0 0 / 100%) 0 1.25rem 1.5625rem
        calc(-1 * 0.3125rem),
      rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem calc(-1 * 0.3125rem);
    --cito-box-shadow-600: oklch(0% 0 0 / 100%) 0 1.5625rem 3.125rem
      calc(-1 * 0.75rem);

    /** Public API for box shadow inset */
    --cito-box-shadow-inset-100: oklch(10% 0 0 / 100%) 0 0.125rem 0.15rem
      0.0625rem inset;
    --cito-box-shadow-inset-200: oklch(10% 0 0 / 100%) 0 0.25rem 0.25rem
      0.125rem inset;

    /** Public API for box shadow border */
    --cito-box-shadow-border-100: var(--cito-black) 0 0 0 0.125rem;
    --cito-box-shadow-border-200: var(--cito-black) 0 0 0 0.25rem;
  }
}

/******************************************************************************
 * Public API for typography
 *****************************************************************************/

:root {
  --cito-font-sans-serif: "Gill Sans", "Helvetica Neue", system-ui,
    -apple-system, sans-serif;
  --cito-font-serif: Georgia, "Times New Roman", Times, serif;
  --cito-font-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  --cito-font-heading: var(--cito-font-monospace);
  --cito-font-body: var(--cito-font-monospace);

  /** Major Second scale */
  --cito-font-size-000: 0.625rem; /*  10.00 */
  --cito-font-size-100: 0.702rem; /*  11.24 */
  --cito-font-size-200: 0.79rem; /*   12.64 */
  --cito-font-size-300: 0.889rem; /*  14.22 */
  --cito-font-size-400: 1rem; /*      16.00 */
  --cito-font-size-500: 1.125rem; /*  18.00 */
  --cito-font-size-600: 1.266rem; /*  20.25 */
  --cito-font-size-700: 1.424rem; /*  22.78 */
  --cito-font-size-800: 1.602rem; /*  25.63 */
  --cito-font-size-900: 1.802rem; /*  28.83 */
  --cito-font-size-1000: 2.027rem; /* 32.44 */
  --cito-font-size-1100: 2.281rem; /* 36.49 */
  --cito-font-size-1200: 2.566rem; /* 41.05 */
  --cito-font-size-1300: 2.887rem; /* 46.18 */
  --cito-font-size-1400: 3.247rem; /* 51.96 */
  --cito-font-size-1500: 3.653rem; /* 58.45 */
}

/******************************************************************************
 * Public API for Cito web components
 *****************************************************************************/

:root {
  --cito-chatbox-height: calc(100% - 2.5rem);
}

/******************************************************************************
 * Public API for transitions and effects
 *****************************************************************************/

:root {
  --cito-transition-fast: 0.1s;
  --cito-transition-default: 0.25s;

  --cito-transform-effect-1: skewX(55deg) scaleY(1.25) rotateX(66deg);
}

/******************************************************************************
 * Reset: Josh's Custom CSS Reset slightly modified
 * Source: https://www.joshwcomeau.com/css/custom-css-reset/
 *****************************************************************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#root {
  isolation: isolate;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/******************************************************************************
 * Public: SPA default height settings
 *****************************************************************************/

html,
body,
app-root,
main {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

/******************************************************************************
 * Public: Global
 *****************************************************************************/

html {
  font-family: var(--cito-font-body);
}

body {
  padding: 0;
  margin: 0;
  background-color: var(--cito-ui-000);
}

/******************************************************************************
 * Public: Typography
 *****************************************************************************/

p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
table,
a {
  color: var(--cito-text-800);
}

/******************************************************************************
 * Public: Forms
 *****************************************************************************/

/** Forms common */

.cito-form-error {
  --error-color: var(--cito-danger-500);

  color: var(--error-color);
  margin-top: 1rem;
}

/** Form group */

.cito-form-group {
  --gap-between-form-groups: 1rem;
  --element-color: var(--cito-text-800);
  --element-border-color: var(--cito-ui-500);
  --element-focus-outline: var(--cito-text-800);
  --checkbox-background-color: var(--cito-ui-700);
  --placeholder-color: var(--cito-text-600);

  display: flex;
  flex-direction: column;
  background-color: transparent;
}

.cito-form-group:has(~ .cito-form-group) {
  margin-bottom: var(--gap-between-form-groups);
}

.cito-form-group input,
.cito-form-group textarea,
.cito-form-group select {
  background-color: transparent;
  color: var(--element-color);
  border-radius: 0.25rem;
  border: 0.0625rem solid var(--element-border-color);
}

.cito-form-group input::placeholder,
.cito-form-group textarea::placeholder,
.cito-form-group select::placeholder {
  color: var(--placeholder-color);
}

.cito-form-group input:focus-visible,
.cito-form-group textarea:focus-visible,
.cito-form-group select:focus-visible {
  outline: 0.125rem solid var(--element-focus-outline);
}

.cito-form-group-error {
  color: var(--error-color), var(--cito-danger-500);
  margin-top: 0.4rem;
}

/** Checkbox */

.checkboxList {
  list-style: none;
  padding-left: 0;
}

.checkboxList .checkboxList {
  padding-left: 2rem;
}

.checkboxParentLabel,
.checkboxChildLabel {
  user-select: none;
}

.checkbox {
  position: relative;
}

.checkbox input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.checkbox label {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
  user-select: none;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  align-self: center;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  background-color: var(--checkbox-background-color);
  clip-path: polygon(
    0 100%,
    85% 100%,
    85% 85%,
    15% 85%,
    16% 15%,
    85% 15%,
    85% 100%,
    100% 100%,
    100% 51%,
    100% 20%,
    100% 0,
    0 0
  );
  transition: all 0.05s ease-in-out;
}

.checkbox input:checked + label::before {
  background-color: var(--checkbox-background-color);
  clip-path: polygon(
    20% 0%,
    0% 20%,
    30% 50%,
    0% 80%,
    20% 100%,
    50% 70%,
    80% 100%,
    100% 80%,
    70% 50%,
    100% 20%,
    80% 0%,
    50% 30%
  );
}

.checkbox input:indeterminate + label::before {
  clip-path: polygon(
    21% 40%,
    0 40%,
    0 50%,
    0 63%,
    21% 63%,
    50% 63%,
    80% 63%,
    100% 64%,
    100% 50%,
    100% 39%,
    79% 39%,
    50% 40%
  );
}

/******************************************************************************
 * Public: Github gists
 *****************************************************************************/

body .gist .highlight {
  background: var(--cito-ui-100);
}
body .gist .blob-num,
body .gist .blob-code-inner,
body .gist .pl-s2,
body .gist .pl-stj,
body .gist .pl-vo,
body .gist .pl-id,
body .gist .pl-ii {
  color: var(--cito-text-900);
}
body .gist .pl-enti,
body .gist .pl-mb,
body .gist .pl-pdb {
  font-weight: 700;
}
body .gist .pl-c,
body .gist .pl-c span,
body .gist .pl-pdc {
  color: var(--cito-warning-700);
  font-style: italic;
}
body .gist .pl-c1,
body .gist .pl-pdc1,
body .gist .pl-scp {
  color: var(--cito-primary-700);
}
body .gist .pl-ent,
body .gist .pl-eoa,
body .gist .pl-eoai,
body .gist .pl-eoai .pl-pde,
body .gist .pl-ko,
body .gist .pl-kolp,
body .gist .pl-mc,
body .gist .pl-mr,
body .gist .pl-ms,
body .gist .pl-s3,
body .gist .pl-sok {
  color: var(--cito-warning-500);
}
body .gist .pl-mdh,
body .gist .pl-mdi,
body .gist .pl-mdr {
  font-weight: 400;
}
body .gist .pl-mi,
body .gist .pl-pdi {
  color: #ffe5bb;
  font-style: italic;
}
body .gist .pl-sra,
body .gist .pl-src,
body .gist .pl-sre {
  color: var(--cito-warning-500);
}
body .gist .pl-mdht,
body .gist .pl-mi1 {
  color: var(--cito-success-700);
  background: var(--cito-ui-100);
}
body .gist .pl-md,
body .gist .pl-mdhf {
  color: var(--cito-danger-700);
  background: var(--cito-ui-100);
}
body .gist .pl-ib,
body .gist .pl-id,
body .gist .pl-ii,
body .gist .pl-iu {
  background: var(--cito-danger-700);
}
body .gist .pl-ms1 {
  background: var(--cito-warning-700);
}
body .gist .highlight-text-html-basic .pl-ent,
body .gist .pl-cce,
body .gist .pl-cn,
body .gist .pl-coc,
body .gist .pl-enc,
body .gist .pl-ens,
body .gist .pl-k,
body .gist .pl-kos,
body .gist .pl-kou,
body .gist .pl-mh .pl-pdh,
body .gist .pl-mp,
body .gist .pl-mp .pl-s3,
body .gist .pl-mp1 .pl-sf,
body .gist .pl-mq,
body .gist .pl-mri,
body .gist .pl-pde,
body .gist .pl-pse,
body .gist .pl-pse .pl-s2,
body .gist .pl-s,
body .gist .pl-st,
body .gist .pl-stp,
body .gist .pl-sv,
body .gist .pl-v,
body .gist .pl-va,
body .gist .pl-vi,
body .gist .pl-vpf,
body .gist .pl-vpu,
body .gist .pl-mdr {
  color: var(--cito-warning-500);
}
body .gist .pl-cos,
body .gist .pl-ml,
body .gist .pl-pds,
body .gist .pl-s1,
body .gist .pl-sol,
body .gist .pl-mb,
body .gist .pl-pdb {
  color: var(--cito-success-500);
}
body .gist .pl-e,
body .gist .pl-en,
body .gist .pl-entl,
body .gist .pl-mo,
body .gist .pl-sc,
body .gist .pl-sf,
body .gist .pl-smi,
body .gist .pl-smp,
body .gist .pl-mdh,
body .gist .pl-mdi {
  color: var(--cito-warning-500);
}
body .gist .pl-ef,
body .gist .pl-enf,
body .gist .pl-enm,
body .gist .pl-entc,
body .gist .pl-entm,
body .gist .pl-eoac,
body .gist .pl-eoac .pl-pde,
body .gist .pl-eoi,
body .gist .pl-mai .pl-sf,
body .gist .pl-mm,
body .gist .pl-pdv,
body .gist .pl-smc,
body .gist .pl-som,
body .gist .pl-sr,
body .gist .pl-enti {
  color: var(--cito-danger-500);
}

.gist .gist-meta {
  padding: 10px;
  overflow: hidden;
  font: 12px
    var(
      --fontStack-sansSerif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Noto Sans",
      Helvetica,
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji"
    );
  color: var(--cito-text-900) !important;
  background-color: var(--cito-ui-200) !important;
}

/******************************************************************************
 * Public: Buttons
 *****************************************************************************/

.cito-btn {
  /* Modified by sibling variant classes */
  --font-size: var(--cito-font-size-400);
  --background-color: var(--cito-ui-100);
  --border-color: var(--cito-ui-400);
  --color: var(--cito-text-900);
  --disabled-opacity: 0.45;
  --focus-background-color: var(--cito-ui-200);
  --focus-border-color: var(--cito-ui-400);
  --focus-color: var(--cito-text-900);
  --hover-background-color: var(--cito-ui-200);
  --hover-border-color: var(--cito-ui-400);
  --hover-color: var(--cito-text-900);
  --active-background-color: var(--cito-ui-300);
  --active-border-color: var(--cito-ui-600);
  --active-color: var(--cito-text-900);
  --transition: background-color var(--cito-transition-default),
    border-color var(--cito-transition-default),
    color var(--cito-transition-default),
    box-shadow var(--cito-transition-default);
  border-radius: 0.166rem;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  font-size: var(--font-size);
  line-height: var(--font-size);
  margin: 0;
  padding: 0.25rem 0.35rem;
  text-align: center;
  letter-spacing: 0.01rem;
  background-color: var(--background-color);
  border: 0.0625rem solid var(--border-color);
  color: var(--color);
  transition: var(--transition);
}

.cito-btn:disabled,
.cito-btn[aria-disabled="true"] {
  pointer-events: none;
  user-select: none;
  opacity: var(--disabled-opacity);
}

.cito-btn:focus,
.cito-btn:focus-visible {
  outline-color: var(--cito-info-500);
  color: var(--focus-color);
  border: 0.0625rem solid var(--focus-border-color);
  background-color: var(--focus-background-color);
}

.cito-btn:hover {
  color: var(--hover-color);
  border: 0.0625rem solid var(--hover-border-color);
  background-color: var(--hover-background-color);
}

.cito-btn:active {
  color: var(--active-color);
  border: 0.0625rem solid var(--active-border-color);
  background-color: var(--active-background-color);
}

/* Variants */

.cito-btn.primary {
  --font-size: var(--cito-font-size-400);
  --background-color: var(--cito-primary-600);
  --border-color: var(--cito-primary-600);
  --color: var(--cito-primary-100);
  --disabled-opacity: 0.45;
  --focus-background-color: var(--cito-primary-500);
  --focus-border-color: transparent;
  --focus-color: var(--cito-primary-100);
  --hover-background-color: var(--cito-primary-500);
  --hover-border-color: var(--cito-primary-400);
  --hover-color: var(--cito-primary-100);
  --active-background-color: var(--cito-primary-400);
  --active-border-color: var(--cito-primary-600);
  --active-color: var(--cito-primary-100);
}

.cito-btn.danger {
  --font-size: var(--cito-font-size-400);
  --background-color: var(--cito-danger-600);
  --border-color: var(--cito-danger-600);
  --color: var(--cito-danger-100);
  --disabled-opacity: 0.45;
  --focus-background-color: var(--cito-danger-500);
  --focus-border-color: transparent;
  --focus-color: var(--cito-danger-100);
  --hover-background-color: var(--cito-danger-500);
  --hover-border-color: var(--cito-danger-400);
  --hover-color: var(--cito-danger-100);
  --active-background-color: var(--cito-danger-400);
  --active-border-color: var(--cito-danger-600);
  --active-color: var(--cito-danger-100);
}

.cito-btn.subtle {
  --font-size: var(--cito-font-size-400);
  --background-color: transparent;
  --border-color: transparent;
  --color: var(--cito-primary-700);
  --disabled-opacity: 0.45;
  --focus-background-color: transparent;
  --focus-border-color: transparent;
  --focus-color: var(--cito-primary-900);
  --hover-background-color: var(--cito-primary-100);
  --hover-border-color: var(--cito-primary-200);
  --hover-color: var(--cito-primary-900);
  --active-background-color: transparent;
  --active-border-color: transparent;
  --active-color: var(--cito-primary-900);
}

.cito-btn.subtle-danger {
  --font-size: var(--cito-font-size-400);
  --background-color: transparent;
  --border-color: transparent;
  --color: var(--cito-danger-700);
  --disabled-opacity: 0.45;
  --focus-background-color: transparent;
  --focus-border-color: transparent;
  --focus-color: var(--cito-danger-900);
  --hover-background-color: var(--cito-danger-100);
  --hover-border-color: var(--cito-danger-200);
  --hover-color: var(--cito-danger-900);
  --active-background-color: transparent;
  --active-border-color: transparent;
  --active-color: var(--cito-danger-900);
}

.cito-btn.small {
  --font-size: var(--cito-font-size-200);
  padding: 0.1rem 0.2rem;
}

/******************************************************************************
 * Public: Key-value lists
 *****************************************************************************/

.citoKvListWrapper {
  --key-color: var(--cito-text-800);
  --value-color: var(--cito-text-800);
  --value-not-set-color: var(--cito-text-600);

  font-family: var(--cito-font-monospace);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: scroll;
  flex-wrap: wrap;
}

.citoKvListGroup {
  display: table;
}

.citoKvListRow {
  display: table-row;
}

.citoKvListKey,
.citoKvListValue {
  padding: 0.25rem 1rem;
  display: table-cell;
  position: relative;
}

.citoKvListKey {
  color: var(--key-color);
  padding-left: 0;
  font-size: var(--cito-font-size-100);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.citoKvListValue {
  color: var(--value-color);
}

.citoValueNotSet .citoKvListValue {
  color: var(--value-not-set-color);
  font-style: oblique;
  letter-spacing: 0.05rem;
}

/** Modifiers */
/** alignment */
.citoKvListWrapper.alignKeyEnd .citoKvListKey {
  text-align: end;
}

/** bg change */
.citoKvListWrapper.keysBg .citoKvListKey {
  padding: 0.75rem;
  text-align: end;
  background: linear-gradient(45deg, var(--cito-ui-700), var(--cito-ui-800));
  color: var(--cito-text-100);
  letter-spacing: 0.1875rem;
}

.citoKvListWrapper.keysBg .citoKvListRow:first-child .citoKvListKey {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.citoKvListWrapper.keysBg .citoKvListRow:last-child .citoKvListKey {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/** emphasis */
.citoKvListWrapper.emphasizeKey .citoKvListKey {
  font-size: var(--cito-font-size-300);
  text-transform: uppercase;
  letter-spacing: 0.0938rem;
  font-weight: 700;
}