@font-face {
    font-family: "primeicons";
    font-display: block;
    src: url("/assets/primeicons-C1oiW3xv.eot");
    src:
        url("/assets/primeicons-C1oiW3xv.eot?#iefix") format("embedded-opentype"),
        url("/assets/primeicons-Cw7jw2u3.woff2") format("woff2"),
        url("/assets/primeicons-DFbS0HxT.woff") format("woff"),
        url("/assets/primeicons-MNyB0pWW.ttf") format("truetype"),
        url("/assets/primeicons-DI7WxhAS.svg?#primeicons") format("svg");
    font-weight: normal;
    font-style: normal;
}

.pi {
    font-family: "primeicons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pi:before {
    --webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pi-fw {
    width: 1.28571429em;
    text-align: center;
}

.pi-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
    .pi-spin {
        -webkit-animation-delay: -1ms;
        animation-delay: -1ms;
        -webkit-animation-duration: 1ms;
        animation-duration: 1ms;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transition-duration: 0s;
        transition-duration: 0s;
    }
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

.pi-eye-dropper:before {
    content: "\ea3c";
}
.pi-code-branch:before {
    content: "\ea3a";
}
.pi-signature:before {
    content: "\ea3b";
}
.pi-stamp:before {
    content: "\ea3d";
}
.pi-rectangle-xmark:before {
    content: "\ea3e";
}
.pi-note-sticky:before {
    content: "\ea3f";
}
.pi-sidebar:before {
    content: "\ea40";
}
.pi-slash:before {
    content: "\ea41";
}
.pi-grid-2:before {
    content: "\ea42";
}
.pi-columns-2:before {
    content: "\ea43";
}
.pi-rows-2:before {
    content: "\ea44";
}
.pi-square:before {
    content: "\ea45";
}
.pi-compress:before {
    content: "\ea46";
}
.pi-pen-line:before {
    content: "\ea47";
}
.pi-case-sensitive:before {
    content: "\ea48";
}
.pi-text-color:before {
    content: "\ea49";
}
.pi-list-tree:before {
    content: "\ea4a";
}
.pi-highlighter:before {
    content: "\ea4b";
}
.pi-text:before {
    content: "\ea4c";
}
.pi-heading-6:before {
    content: "\ea4d";
}
.pi-heading-5:before {
    content: "\ea4e";
}
.pi-heading-4:before {
    content: "\ea4f";
}
.pi-heading-3:before {
    content: "\ea50";
}
.pi-heading-2:before {
    content: "\ea51";
}
.pi-heading-1:before {
    content: "\ea52";
}
.pi-heading:before {
    content: "\ea53";
}
.pi-grip:before {
    content: "\ea54";
}
.pi-grip-horizontal:before {
    content: "\ea55";
}
.pi-grip-vertical:before {
    content: "\ea56";
}
.pi-paragraph-right:before {
    content: "\ea57";
}
.pi-paragraph-left:before {
    content: "\ea58";
}
.pi-arrow-u-turn-up-left:before {
    content: "\ea59";
}
.pi-arrow-u-turn-up-right:before {
    content: "\ea5a";
}
.pi-horizontal-rule:before {
    content: "\ea5b";
}
.pi-outdent:before {
    content: "\ea5c";
}
.pi-indent:before {
    content: "\ea5d";
}
.pi-list-ol:before {
    content: "\ea5e";
}
.pi-block-quote:before {
    content: "\ea5f";
}
.pi-superscript:before {
    content: "\ea60";
}
.pi-subscript:before {
    content: "\ea61";
}
.pi-strikethrough:before {
    content: "\ea62";
}
.pi-underline:before {
    content: "\ea63";
}
.pi-italic:before {
    content: "\ea64";
}
.pi-bold:before {
    content: "\ea65";
}
.pi-dot:before {
    content: "\ea66";
}
.pi-folder-plus:before {
    content: "\ea05";
}
.pi-receipt:before {
    content: "\ea06";
}
.pi-asterisk:before {
    content: "\ea07";
}
.pi-face-smile:before {
    content: "\ea08";
}
.pi-pinterest:before {
    content: "\ea09";
}
.pi-expand:before {
    content: "\ea0a";
}
.pi-pen-to-square:before {
    content: "\ea0b";
}
.pi-wave-pulse:before {
    content: "\ea0c";
}
.pi-turkish-lira:before {
    content: "\ea0d";
}
.pi-spinner-dotted:before {
    content: "\ea0e";
}
.pi-crown:before {
    content: "\ea0f";
}
.pi-pause-circle:before {
    content: "\ea10";
}
.pi-warehouse:before {
    content: "\ea11";
}
.pi-objects-column:before {
    content: "\ea12";
}
.pi-clipboard:before {
    content: "\ea13";
}
.pi-play-circle:before {
    content: "\ea14";
}
.pi-venus:before {
    content: "\ea15";
}
.pi-cart-minus:before {
    content: "\ea16";
}
.pi-file-plus:before {
    content: "\ea17";
}
.pi-microchip:before {
    content: "\ea18";
}
.pi-twitch:before {
    content: "\ea19";
}
.pi-building-columns:before {
    content: "\ea1a";
}
.pi-file-check:before {
    content: "\ea1b";
}
.pi-microchip-ai:before {
    content: "\ea1c";
}
.pi-trophy:before {
    content: "\ea1d";
}
.pi-barcode:before {
    content: "\ea1e";
}
.pi-file-arrow-up:before {
    content: "\ea1f";
}
.pi-mars:before {
    content: "\ea20";
}
.pi-tiktok:before {
    content: "\ea21";
}
.pi-arrow-up-right-and-arrow-down-left-from-center:before {
    content: "\ea22";
}
.pi-ethereum:before {
    content: "\ea23";
}
.pi-list-check:before {
    content: "\ea24";
}
.pi-thumbtack:before {
    content: "\ea25";
}
.pi-arrow-down-left-and-arrow-up-right-to-center:before {
    content: "\ea26";
}
.pi-equals:before {
    content: "\ea27";
}
.pi-lightbulb:before {
    content: "\ea28";
}
.pi-star-half:before {
    content: "\ea29";
}
.pi-address-book:before {
    content: "\ea2a";
}
.pi-chart-scatter:before {
    content: "\ea2b";
}
.pi-indian-rupee:before {
    content: "\ea2c";
}
.pi-star-half-fill:before {
    content: "\ea2d";
}
.pi-cart-arrow-down:before {
    content: "\ea2e";
}
.pi-calendar-clock:before {
    content: "\ea2f";
}
.pi-sort-up-fill:before {
    content: "\ea30";
}
.pi-sparkles:before {
    content: "\ea31";
}
.pi-bullseye:before {
    content: "\ea32";
}
.pi-sort-down-fill:before {
    content: "\ea33";
}
.pi-graduation-cap:before {
    content: "\ea34";
}
.pi-hammer:before {
    content: "\ea35";
}
.pi-bell-slash:before {
    content: "\ea36";
}
.pi-gauge:before {
    content: "\ea37";
}
.pi-shop:before {
    content: "\ea38";
}
.pi-headphones:before {
    content: "\ea39";
}
.pi-eraser:before {
    content: "\ea04";
}
.pi-stopwatch:before {
    content: "\ea01";
}
.pi-verified:before {
    content: "\ea02";
}
.pi-delete-left:before {
    content: "\ea03";
}
.pi-hourglass:before {
    content: "\e9fe";
}
.pi-truck:before {
    content: "\ea00";
}
.pi-wrench:before {
    content: "\e9ff";
}
.pi-microphone:before {
    content: "\e9fa";
}
.pi-megaphone:before {
    content: "\e9fb";
}
.pi-arrow-right-arrow-left:before {
    content: "\e9fc";
}
.pi-bitcoin:before {
    content: "\e9fd";
}
.pi-file-edit:before {
    content: "\e9f6";
}
.pi-language:before {
    content: "\e9f7";
}
.pi-file-export:before {
    content: "\e9f8";
}
.pi-file-import:before {
    content: "\e9f9";
}
.pi-file-word:before {
    content: "\e9f1";
}
.pi-gift:before {
    content: "\e9f2";
}
.pi-cart-plus:before {
    content: "\e9f3";
}
.pi-thumbs-down-fill:before {
    content: "\e9f4";
}
.pi-thumbs-up-fill:before {
    content: "\e9f5";
}
.pi-arrows-alt:before {
    content: "\e9f0";
}
.pi-calculator:before {
    content: "\e9ef";
}
.pi-sort-alt-slash:before {
    content: "\e9ee";
}
.pi-arrows-h:before {
    content: "\e9ec";
}
.pi-arrows-v:before {
    content: "\e9ed";
}
.pi-pound:before {
    content: "\e9eb";
}
.pi-prime:before {
    content: "\e9ea";
}
.pi-chart-pie:before {
    content: "\e9e9";
}
.pi-reddit:before {
    content: "\e9e8";
}
.pi-code:before {
    content: "\e9e7";
}
.pi-sync:before {
    content: "\e9e6";
}
.pi-shopping-bag:before {
    content: "\e9e5";
}
.pi-server:before {
    content: "\e9e4";
}
.pi-database:before {
    content: "\e9e3";
}
.pi-hashtag:before {
    content: "\e9e2";
}
.pi-bookmark-fill:before {
    content: "\e9df";
}
.pi-filter-fill:before {
    content: "\e9e0";
}
.pi-heart-fill:before {
    content: "\e9e1";
}
.pi-flag-fill:before {
    content: "\e9de";
}
.pi-circle:before {
    content: "\e9dc";
}
.pi-circle-fill:before {
    content: "\e9dd";
}
.pi-bolt:before {
    content: "\e9db";
}
.pi-history:before {
    content: "\e9da";
}
.pi-box:before {
    content: "\e9d9";
}
.pi-at:before {
    content: "\e9d8";
}
.pi-arrow-up-right:before {
    content: "\e9d4";
}
.pi-arrow-up-left:before {
    content: "\e9d5";
}
.pi-arrow-down-left:before {
    content: "\e9d6";
}
.pi-arrow-down-right:before {
    content: "\e9d7";
}
.pi-telegram:before {
    content: "\e9d3";
}
.pi-stop-circle:before {
    content: "\e9d2";
}
.pi-stop:before {
    content: "\e9d1";
}
.pi-whatsapp:before {
    content: "\e9d0";
}
.pi-building:before {
    content: "\e9cf";
}
.pi-qrcode:before {
    content: "\e9ce";
}
.pi-car:before {
    content: "\e9cd";
}
.pi-instagram:before {
    content: "\e9cc";
}
.pi-linkedin:before {
    content: "\e9cb";
}
.pi-send:before {
    content: "\e9ca";
}
.pi-slack:before {
    content: "\e9c9";
}
.pi-moon:before {
    content: "\e9c7";
}
.pi-sun:before {
    content: "\e9c8";
}
.pi-youtube:before {
    content: "\e9c5";
}
.pi-vimeo:before {
    content: "\e9c6";
}
.pi-flag:before {
    content: "\e9c4";
}
.pi-wallet:before {
    content: "\e9c3";
}
.pi-map:before {
    content: "\e9c2";
}
.pi-link:before {
    content: "\e9c1";
}
.pi-credit-card:before {
    content: "\e9bf";
}
.pi-discord:before {
    content: "\e9c0";
}
.pi-percentage:before {
    content: "\e9be";
}
.pi-euro:before {
    content: "\e9bd";
}
.pi-book:before {
    content: "\e9ba";
}
.pi-shield:before {
    content: "\e9b9";
}
.pi-paypal:before {
    content: "\e9bb";
}
.pi-amazon:before {
    content: "\e9bc";
}
.pi-phone:before {
    content: "\e9b8";
}
.pi-filter-slash:before {
    content: "\e9b7";
}
.pi-facebook:before {
    content: "\e9b4";
}
.pi-github:before {
    content: "\e9b5";
}
.pi-twitter:before {
    content: "\e9b6";
}
.pi-step-backward-alt:before {
    content: "\e9ac";
}
.pi-step-forward-alt:before {
    content: "\e9ad";
}
.pi-forward:before {
    content: "\e9ae";
}
.pi-backward:before {
    content: "\e9af";
}
.pi-fast-backward:before {
    content: "\e9b0";
}
.pi-fast-forward:before {
    content: "\e9b1";
}
.pi-pause:before {
    content: "\e9b2";
}
.pi-play:before {
    content: "\e9b3";
}
.pi-compass:before {
    content: "\e9ab";
}
.pi-id-card:before {
    content: "\e9aa";
}
.pi-ticket:before {
    content: "\e9a9";
}
.pi-file-o:before {
    content: "\e9a8";
}
.pi-reply:before {
    content: "\e9a7";
}
.pi-directions-alt:before {
    content: "\e9a5";
}
.pi-directions:before {
    content: "\e9a6";
}
.pi-thumbs-up:before {
    content: "\e9a3";
}
.pi-thumbs-down:before {
    content: "\e9a4";
}
.pi-sort-numeric-down-alt:before {
    content: "\e996";
}
.pi-sort-numeric-up-alt:before {
    content: "\e997";
}
.pi-sort-alpha-down-alt:before {
    content: "\e998";
}
.pi-sort-alpha-up-alt:before {
    content: "\e999";
}
.pi-sort-numeric-down:before {
    content: "\e99a";
}
.pi-sort-numeric-up:before {
    content: "\e99b";
}
.pi-sort-alpha-down:before {
    content: "\e99c";
}
.pi-sort-alpha-up:before {
    content: "\e99d";
}
.pi-sort-alt:before {
    content: "\e99e";
}
.pi-sort-amount-up:before {
    content: "\e99f";
}
.pi-sort-amount-down:before {
    content: "\e9a0";
}
.pi-sort-amount-down-alt:before {
    content: "\e9a1";
}
.pi-sort-amount-up-alt:before {
    content: "\e9a2";
}
.pi-palette:before {
    content: "\e995";
}
.pi-undo:before {
    content: "\e994";
}
.pi-desktop:before {
    content: "\e993";
}
.pi-sliders-v:before {
    content: "\e991";
}
.pi-sliders-h:before {
    content: "\e992";
}
.pi-search-plus:before {
    content: "\e98f";
}
.pi-search-minus:before {
    content: "\e990";
}
.pi-file-excel:before {
    content: "\e98e";
}
.pi-file-pdf:before {
    content: "\e98d";
}
.pi-check-square:before {
    content: "\e98c";
}
.pi-chart-line:before {
    content: "\e98b";
}
.pi-user-edit:before {
    content: "\e98a";
}
.pi-exclamation-circle:before {
    content: "\e989";
}
.pi-android:before {
    content: "\e985";
}
.pi-google:before {
    content: "\e986";
}
.pi-apple:before {
    content: "\e987";
}
.pi-microsoft:before {
    content: "\e988";
}
.pi-heart:before {
    content: "\e984";
}
.pi-mobile:before {
    content: "\e982";
}
.pi-tablet:before {
    content: "\e983";
}
.pi-key:before {
    content: "\e981";
}
.pi-shopping-cart:before {
    content: "\e980";
}
.pi-comments:before {
    content: "\e97e";
}
.pi-comment:before {
    content: "\e97f";
}
.pi-briefcase:before {
    content: "\e97d";
}
.pi-bell:before {
    content: "\e97c";
}
.pi-paperclip:before {
    content: "\e97b";
}
.pi-share-alt:before {
    content: "\e97a";
}
.pi-envelope:before {
    content: "\e979";
}
.pi-volume-down:before {
    content: "\e976";
}
.pi-volume-up:before {
    content: "\e977";
}
.pi-volume-off:before {
    content: "\e978";
}
.pi-eject:before {
    content: "\e975";
}
.pi-money-bill:before {
    content: "\e974";
}
.pi-images:before {
    content: "\e973";
}
.pi-image:before {
    content: "\e972";
}
.pi-sign-in:before {
    content: "\e970";
}
.pi-sign-out:before {
    content: "\e971";
}
.pi-wifi:before {
    content: "\e96f";
}
.pi-sitemap:before {
    content: "\e96e";
}
.pi-chart-bar:before {
    content: "\e96d";
}
.pi-camera:before {
    content: "\e96c";
}
.pi-dollar:before {
    content: "\e96b";
}
.pi-lock-open:before {
    content: "\e96a";
}
.pi-table:before {
    content: "\e969";
}
.pi-map-marker:before {
    content: "\e968";
}
.pi-list:before {
    content: "\e967";
}
.pi-eye-slash:before {
    content: "\e965";
}
.pi-eye:before {
    content: "\e966";
}
.pi-folder-open:before {
    content: "\e964";
}
.pi-folder:before {
    content: "\e963";
}
.pi-video:before {
    content: "\e962";
}
.pi-inbox:before {
    content: "\e961";
}
.pi-lock:before {
    content: "\e95f";
}
.pi-unlock:before {
    content: "\e960";
}
.pi-tags:before {
    content: "\e95d";
}
.pi-tag:before {
    content: "\e95e";
}
.pi-power-off:before {
    content: "\e95c";
}
.pi-save:before {
    content: "\e95b";
}
.pi-question-circle:before {
    content: "\e959";
}
.pi-question:before {
    content: "\e95a";
}
.pi-copy:before {
    content: "\e957";
}
.pi-file:before {
    content: "\e958";
}
.pi-clone:before {
    content: "\e955";
}
.pi-calendar-times:before {
    content: "\e952";
}
.pi-calendar-minus:before {
    content: "\e953";
}
.pi-calendar-plus:before {
    content: "\e954";
}
.pi-ellipsis-v:before {
    content: "\e950";
}
.pi-ellipsis-h:before {
    content: "\e951";
}
.pi-bookmark:before {
    content: "\e94e";
}
.pi-globe:before {
    content: "\e94f";
}
.pi-replay:before {
    content: "\e94d";
}
.pi-filter:before {
    content: "\e94c";
}
.pi-print:before {
    content: "\e94b";
}
.pi-align-right:before {
    content: "\e946";
}
.pi-align-left:before {
    content: "\e947";
}
.pi-align-center:before {
    content: "\e948";
}
.pi-align-justify:before {
    content: "\e949";
}
.pi-cog:before {
    content: "\e94a";
}
.pi-cloud-download:before {
    content: "\e943";
}
.pi-cloud-upload:before {
    content: "\e944";
}
.pi-cloud:before {
    content: "\e945";
}
.pi-pencil:before {
    content: "\e942";
}
.pi-users:before {
    content: "\e941";
}
.pi-clock:before {
    content: "\e940";
}
.pi-user-minus:before {
    content: "\e93e";
}
.pi-user-plus:before {
    content: "\e93f";
}
.pi-trash:before {
    content: "\e93d";
}
.pi-window-minimize:before {
    content: "\e93a";
}
.pi-window-maximize:before {
    content: "\e93b";
}
.pi-external-link:before {
    content: "\e93c";
}
.pi-refresh:before {
    content: "\e938";
}
.pi-user:before {
    content: "\e939";
}
.pi-exclamation-triangle:before {
    content: "\e922";
}
.pi-calendar:before {
    content: "\e927";
}
.pi-chevron-circle-left:before {
    content: "\e928";
}
.pi-chevron-circle-down:before {
    content: "\e929";
}
.pi-chevron-circle-right:before {
    content: "\e92a";
}
.pi-chevron-circle-up:before {
    content: "\e92b";
}
.pi-angle-double-down:before {
    content: "\e92c";
}
.pi-angle-double-left:before {
    content: "\e92d";
}
.pi-angle-double-right:before {
    content: "\e92e";
}
.pi-angle-double-up:before {
    content: "\e92f";
}
.pi-angle-down:before {
    content: "\e930";
}
.pi-angle-left:before {
    content: "\e931";
}
.pi-angle-right:before {
    content: "\e932";
}
.pi-angle-up:before {
    content: "\e933";
}
.pi-upload:before {
    content: "\e934";
}
.pi-download:before {
    content: "\e956";
}
.pi-ban:before {
    content: "\e935";
}
.pi-star-fill:before {
    content: "\e936";
}
.pi-star:before {
    content: "\e937";
}
.pi-chevron-left:before {
    content: "\e900";
}
.pi-chevron-right:before {
    content: "\e901";
}
.pi-chevron-down:before {
    content: "\e902";
}
.pi-chevron-up:before {
    content: "\e903";
}
.pi-caret-left:before {
    content: "\e904";
}
.pi-caret-right:before {
    content: "\e905";
}
.pi-caret-down:before {
    content: "\e906";
}
.pi-caret-up:before {
    content: "\e907";
}
.pi-search:before {
    content: "\e908";
}
.pi-check:before {
    content: "\e909";
}
.pi-check-circle:before {
    content: "\e90a";
}
.pi-times:before {
    content: "\e90b";
}
.pi-times-circle:before {
    content: "\e90c";
}
.pi-plus:before {
    content: "\e90d";
}
.pi-plus-circle:before {
    content: "\e90e";
}
.pi-minus:before {
    content: "\e90f";
}
.pi-minus-circle:before {
    content: "\e910";
}
.pi-circle-on:before {
    content: "\e911";
}
.pi-circle-off:before {
    content: "\e912";
}
.pi-sort-down:before {
    content: "\e913";
}
.pi-sort-up:before {
    content: "\e914";
}
.pi-sort:before {
    content: "\e915";
}
.pi-step-backward:before {
    content: "\e916";
}
.pi-step-forward:before {
    content: "\e917";
}
.pi-th-large:before {
    content: "\e918";
}
.pi-arrow-down:before {
    content: "\e919";
}
.pi-arrow-left:before {
    content: "\e91a";
}
.pi-arrow-right:before {
    content: "\e91b";
}
.pi-arrow-up:before {
    content: "\e91c";
}
.pi-bars:before {
    content: "\e91d";
}
.pi-arrow-circle-down:before {
    content: "\e91e";
}
.pi-arrow-circle-left:before {
    content: "\e91f";
}
.pi-arrow-circle-right:before {
    content: "\e920";
}
.pi-arrow-circle-up:before {
    content: "\e921";
}
.pi-info:before {
    content: "\e923";
}
.pi-info-circle:before {
    content: "\e924";
}
.pi-home:before {
    content: "\e925";
}
.pi-spinner:before {
    content: "\e926";
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/*
 * Stable semantic seam between Components structure and product design systems.
 * Conservative light defaults keep an unthemed surface usable. Products may override
 * these variables directly; optional theme.css adds dark, forced-color, and subtree behavior.
 */
:root {
    --cratis-surface-0: #ffffff;
    --cratis-surface-100: #f3f4f6;
    --cratis-surface-ground: #f9fafb;
    --cratis-surface-section: #ffffff;
    --cratis-surface-card: #ffffff;
    --cratis-surface-overlay: #ffffff;
    --cratis-surface-hover: #f6f9fc;
    --cratis-surface-border: #dfe7ef;
    --cratis-control-background: #ffffff;
    --cratis-control-border: #8492a6;
    --cratis-number-input-adornment-color: var(--cratis-text-color-secondary);
    --cratis-number-input-step-background: var(--cratis-surface-100);
    --cratis-number-input-step-background-hover: var(--cratis-surface-hover);

    --cratis-text-color: #4b5563;
    --cratis-text-color-secondary: #6b7280;

    --cratis-primary-color: #2563eb;
    --cratis-primary-color-text: #ffffff;
    --cratis-primary-300: #93c5fd;
    --cratis-primary-400: #60a5fa;
    --cratis-primary-500: #3b82f6;
    --cratis-primary-600: #2563eb;
    --cratis-primary-600-text: #ffffff;
    --cratis-action-background: #2563eb;
    --cratis-action-background-hover: #1d4ed8;
    --cratis-action-background-active: #1e40af;
    --cratis-action-text: #ffffff;

    --cratis-highlight-bg: #eff6ff;
    --cratis-highlight-text-color: #1d4ed8;

    --cratis-green-500: #16a34a;
    --cratis-orange-500: #d97706;
    --cratis-red-500: #dc2626;
    --cratis-info-background: #0369a1;
    --cratis-info-text: #ffffff;
    --cratis-success-background: #15803d;
    --cratis-success-text: #ffffff;
    --cratis-warning-background: #c2410c;
    --cratis-warning-text: #ffffff;
    --cratis-danger-background: #b91c1c;
    --cratis-danger-text: #ffffff;

    --cratis-border-radius: 6px;
    --cratis-control-height: 2.75rem;
    --cratis-control-height-small: 2.25rem;
    --cratis-control-height-large: 3.25rem;
    --cratis-disabled-opacity: 0.55;
    --cratis-focus-ring: 0 0 0 3px #2563eb;
    --cratis-maskbg: rgb(0 0 0 / 40%);
    --cratis-shadow-subtle: 0 1px 2px rgb(0 0 0 / 5%);
    --cratis-shadow-overlay: 0 2px 12px rgb(0 0 0 / 10%);
    --cratis-shadow-dialog: 0 1rem 3rem rgb(0 0 0 / 22%);
    --cratis-shadow-toast: 0 2px 12px rgb(0 0 0 / 10%);

    --cratis-z-index-dialog: 1100;
    --cratis-z-index-overlay: 1200;
    --cratis-z-index-filter: 1250;
    --cratis-z-index-tooltip: 1300;
    --cratis-z-index-toast: 1400;
}

@layer properties;
@layer cratis-theme, cratis-components, cratis-utilities;
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer cratis-theme {
  :root, :host {
    --cratis-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --cratis-color-red-100: oklch(93.6% 0.032 17.717);
    --cratis-color-green-100: oklch(96.2% 0.044 156.743);
    --cratis-color-blue-600: oklch(54.6% 0.245 262.881);
    --cratis-color-gray-200: oklch(92.8% 0.006 264.531);
    --cratis-color-gray-500: oklch(55.1% 0.027 264.364);
    --cratis-color-gray-600: oklch(44.6% 0.03 256.802);
    --cratis-color-white: #fff;
    --cratis-spacing: 0.25rem;
    --cratis-text-xs: 0.75rem;
    --cratis-text-xs--line-height: calc(1 / 0.75);
    --cratis-text-sm: 0.875rem;
    --cratis-text-sm--line-height: calc(1.25 / 0.875);
    --cratis-text-base: 1rem;
    --cratis-text-base--line-height: calc(1.5 / 1);
    --cratis-text-lg: 1.125rem;
    --cratis-text-lg--line-height: calc(1.75 / 1.125);
    --cratis-text-2xl: 1.5rem;
    --cratis-text-2xl--line-height: calc(2 / 1.5);
    --cratis-text-3xl: 1.875rem;
    --cratis-text-3xl--line-height: calc(2.25 / 1.875);
    --cratis-font-weight-semibold: 600;
    --cratis-font-weight-bold: 700;
    --cratis-radius-lg: 0.5rem;
    --cratis-radius-xl: 0.75rem;
    --cratis-radius-2xl: 1rem;
    --cratis-default-transition-duration: 150ms;
    --cratis-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer cratis-utilities {
  .cratis\:visible {
    visibility: visible;
  }
  .cratis\:absolute {
    position: absolute;
  }
  .cratis\:relative {
    position: relative;
  }
  .cratis\:bottom-4 {
    bottom: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:z-10 {
    z-index: 10;
  }
  .cratis\:m-0 {
    margin: 0px;
  }
  .cratis\:mx-2 {
    margin-inline: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:mt-2 {
    margin-top: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:mt-3 {
    margin-top: calc(var(--cratis-spacing) * 3);
  }
  .cratis\:mt-4 {
    margin-top: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:mr-2 {
    margin-right: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:mb-0 {
    margin-bottom: 0px;
  }
  .cratis\:mb-2 {
    margin-bottom: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:mb-3 {
    margin-bottom: calc(var(--cratis-spacing) * 3);
  }
  .cratis\:mb-4 {
    margin-bottom: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:ml-2 {
    margin-left: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:ml-3 {
    margin-left: calc(var(--cratis-spacing) * 3);
  }
  .cratis\:flex {
    display: flex;
  }
  .cratis\:hidden {
    display: none;
  }
  .cratis\:inline-flex {
    display: inline-flex;
  }
  .cratis\:size-5 {
    width: calc(var(--cratis-spacing) * 5);
    height: calc(var(--cratis-spacing) * 5);
  }
  .cratis\:h-9 {
    height: calc(var(--cratis-spacing) * 9);
  }
  .cratis\:h-10 {
    height: calc(var(--cratis-spacing) * 10);
  }
  .cratis\:h-full {
    height: 100%;
  }
  .cratis\:w-9 {
    width: calc(var(--cratis-spacing) * 9);
  }
  .cratis\:w-10 {
    width: calc(var(--cratis-spacing) * 10);
  }
  .cratis\:w-80 {
    width: calc(var(--cratis-spacing) * 80);
  }
  .cratis\:w-full {
    width: 100%;
  }
  .cratis\:min-w-\[3\.25rem\] {
    min-width: 3.25rem;
  }
  .cratis\:min-w-\[4rem\] {
    min-width: 4rem;
  }
  .cratis\:flex-1 {
    flex: 1;
  }
  .cratis\:flex-shrink-0 {
    flex-shrink: 0;
  }
  .cratis\:cursor-pointer {
    cursor: pointer;
  }
  .cratis\:flex-col {
    flex-direction: column;
  }
  .cratis\:flex-row {
    flex-direction: row;
  }
  .cratis\:items-center {
    align-items: center;
  }
  .cratis\:items-end {
    align-items: flex-end;
  }
  .cratis\:items-start {
    align-items: flex-start;
  }
  .cratis\:justify-center {
    justify-content: center;
  }
  .cratis\:justify-start {
    justify-content: flex-start;
  }
  .cratis\:gap-1 {
    gap: var(--cratis-spacing);
  }
  .cratis\:gap-2 {
    gap: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:gap-3 {
    gap: calc(var(--cratis-spacing) * 3);
  }
  .cratis\:gap-4 {
    gap: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:gap-6 {
    gap: calc(var(--cratis-spacing) * 6);
  }
  .cratis\:gap-8 {
    gap: calc(var(--cratis-spacing) * 8);
  }
  :where(.cratis\:space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--cratis-spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--cratis-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  .cratis\:overflow-hidden {
    overflow: hidden;
  }
  .cratis\:rounded {
    border-radius: 0.25rem;
  }
  .cratis\:rounded-2xl {
    border-radius: var(--cratis-radius-2xl);
  }
  .cratis\:rounded-lg {
    border-radius: var(--cratis-radius-lg);
  }
  .cratis\:rounded-xl {
    border-radius: var(--cratis-radius-xl);
  }
  .cratis\:border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .cratis\:border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .cratis\:border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .cratis\:bg-blue-600 {
    background-color: var(--cratis-color-blue-600);
  }
  .cratis\:bg-gray-600 {
    background-color: var(--cratis-color-gray-600);
  }
  .cratis\:bg-green-100 {
    background-color: var(--cratis-color-green-100);
  }
  .cratis\:bg-red-100 {
    background-color: var(--cratis-color-red-100);
  }
  .cratis\:p-2 {
    padding: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:p-3 {
    padding: calc(var(--cratis-spacing) * 3);
  }
  .cratis\:p-4 {
    padding: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:p-8 {
    padding: calc(var(--cratis-spacing) * 8);
  }
  .cratis\:px-1\.5 {
    padding-inline: calc(var(--cratis-spacing) * 1.5);
  }
  .cratis\:px-2 {
    padding-inline: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:px-3 {
    padding-inline: calc(var(--cratis-spacing) * 3);
  }
  .cratis\:px-4 {
    padding-inline: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:py-1 {
    padding-block: var(--cratis-spacing);
  }
  .cratis\:py-1\.5 {
    padding-block: calc(var(--cratis-spacing) * 1.5);
  }
  .cratis\:py-2 {
    padding-block: calc(var(--cratis-spacing) * 2);
  }
  .cratis\:py-4 {
    padding-block: calc(var(--cratis-spacing) * 4);
  }
  .cratis\:text-center {
    text-align: center;
  }
  .cratis\:text-2xl {
    font-size: var(--cratis-text-2xl);
    line-height: var(--tw-leading, var(--cratis-text-2xl--line-height));
  }
  .cratis\:text-3xl {
    font-size: var(--cratis-text-3xl);
    line-height: var(--tw-leading, var(--cratis-text-3xl--line-height));
  }
  .cratis\:text-base {
    font-size: var(--cratis-text-base);
    line-height: var(--tw-leading, var(--cratis-text-base--line-height));
  }
  .cratis\:text-lg {
    font-size: var(--cratis-text-lg);
    line-height: var(--tw-leading, var(--cratis-text-lg--line-height));
  }
  .cratis\:text-sm {
    font-size: var(--cratis-text-sm);
    line-height: var(--tw-leading, var(--cratis-text-sm--line-height));
  }
  .cratis\:text-xs {
    font-size: var(--cratis-text-xs);
    line-height: var(--tw-leading, var(--cratis-text-xs--line-height));
  }
  .cratis\:font-bold {
    --tw-font-weight: var(--cratis-font-weight-bold);
    font-weight: var(--cratis-font-weight-bold);
  }
  .cratis\:font-semibold {
    --tw-font-weight: var(--cratis-font-weight-semibold);
    font-weight: var(--cratis-font-weight-semibold);
  }
  .cratis\:text-\[var\(--cratis-red-500\)\] {
    color: var(--cratis-red-500);
  }
  .cratis\:text-gray-200 {
    color: var(--cratis-color-gray-200);
  }
  .cratis\:text-white {
    color: var(--cratis-color-white);
  }
  .cratis\:capitalize {
    text-transform: capitalize;
  }
  .cratis\:tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .cratis\:accent-\[var\(--cratis-primary-color\)\] {
    accent-color: var(--cratis-primary-color);
  }
  .cratis\:transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--cratis-default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--cratis-default-transition-duration));
  }
  .cratis\:select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
  @media (hover: hover) {
    .cratis\:hover\:bg-gray-500:hover {
      background-color: var(--cratis-color-gray-500);
    }
  }
  @media (width >= 48rem) {
    .cratis\:md\:flex-row {
      flex-direction: row;
    }
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
    }
  }
}

@layer cratis-components {
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/*
 * The manifest for `@cratis/components/styles` — every stylesheet the components need.
 *
 * Why a manifest rather than a `.css` import inside each component: a CSS import sitting in the
 * JavaScript module graph is what makes the published ESM unloadable by Node
 * (Cratis/Components#118 — `ERR_UNKNOWN_FILE_EXTENSION` on every subpath that reaches one, and no
 * node-environment consumer can render a `Dialog` in a spec). The components therefore import no
 * CSS at all, and every rule arrives through this one entry point instead.
 *
 * The build flattens these `@import`s into `dist/esm/styles.css`, with the compiled Tailwind
 * utilities prepended. Storybook and Vite dev resolve them directly.
 *
 * Adding a component stylesheet? Add its `@import` here. The build fails if a `.css` file under
 * `Source/` is not reachable from this manifest, so the two cannot drift apart silently.
 *
 * The per-area entry points are derived from this same list (scripts/lib/area-stylesheets.mjs).
 *
 * Consumers import this alongside the token layer:
 *
 *     import '@cratis/components/tokens';   // the --cratis-* seam (always)
 *     import '@cratis/components/styles';   // component rules (always)
 *     import '@cratis/components/theme';    // optional license-free baseline look
 */

/* Third-party: Allotment lays its split view out entirely from this stylesheet, so a `DataPage`
   with a details pane only sides its panes — and only keeps its paginator in frame — once these
   rules are present. Vendored in here rather than imported from `DataPage.tsx` for the same
   reason as everything else in this file. @cratis-area DataPage */
/* ── allotment/dist/style.css ─────────────────────────────────────── */
:root {
  --separator-border: rgba(128, 128, 128, 0.35);
  --sash-hover-transition-duration: 0.1s;
}

.allotment-module_splitView__L-yRc {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF {
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF > .allotment-module_sash__QA-2t {
  pointer-events: auto;
}

.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa {
  height: 100%;
  position: relative;
  white-space: nowrap;
  width: 100%;
}

.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
  overflow: hidden;
  position: absolute;
  white-space: initial;
}

.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
  width: 100%;
}

.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
  height: 100%;
}

.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS
  > .allotment-module_splitViewContainer__rQnVa
  > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
  background-color: var(--separator-border);
  content: " ";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 5;
}

.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_vertical__WSwwa
  > .allotment-module_splitViewContainer__rQnVa
  > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
  height: 1px;
  width: 100%;
}

.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_horizontal__7doS8
  > .allotment-module_splitViewContainer__rQnVa
  > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
  height: 100%;
  width: 1px;
}

:root {
  --focus-border: #007fd4;
  --sash-size: 8px;
  --sash-hover-size: 4px;
}

.sash-module_sash__K-9lB {
  position: absolute;
  z-index: 35;
  touch-action: none;
  pointer-events: auto;
  text-align: initial;
}

.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx {
  pointer-events: none;
}

.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_vertical__pB-rs {
  cursor: col-resize;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_minimum__-UKxp {
  cursor: e-resize;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_maximum__TCWxD {
  cursor: w-resize;
}

.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_horizontal__kFbiw {
  cursor: row-resize;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_minimum__-UKxp {
  cursor: s-resize;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_maximum__TCWxD {
  cursor: n-resize;
}

.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx {
  cursor: default !important;
  pointer-events: none !important;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs {
  cursor: ew-resize;
  top: 0;
  width: var(--sash-size);
  height: 100%;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw {
  cursor: ns-resize;
  left: 0;
  width: 100%;
  height: var(--sash-size);
}

.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2- {
  content: " ";
  height: calc(var(--sash-size) * 2);
  width: calc(var(--sash-size) * 2);
  z-index: 100;
  display: block;
  cursor: all-scroll;
  position: absolute;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,
.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
  cursor: nwse-resize;
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,
.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
  cursor: nesw-resize;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
  left: calc(var(--sash-size) * -0.5);
  top: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
  left: calc(var(--sash-size) * -0.5);
  bottom: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
  top: calc(var(--sash-size) * -0.5);
  left: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
  top: calc(var(--sash-size) * -0.5);
  right: calc(var(--sash-size) * -1);
}

.sash-module_sash__K-9lB:before {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: background-color var(--sash-hover-transition-duration) ease-out;
  background: transparent;
}

.sash-module_sash__K-9lB.sash-module_vertical__pB-rs:before {
  width: var(--sash-hover-size);
  left: calc(50% - (var(--sash-hover-size) / 2));
}

.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw:before {
  height: var(--sash-hover-size);
  top: calc(50% - (var(--sash-hover-size) / 2));
}

.sash-module_sash__K-9lB.sash-module_hover__80W6I:before,
.sash-module_sash__K-9lB.sash-module_active__bJspD:before {
  background: var(--focus-border);
}


/* ── ./Canvas/Canvas.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* ── Canvas surface ──────────────────────────────────────────────────────── */

/* The canvas owns every touch on it: without this the browser claims one- and two-finger gestures
   for its own page scroll and pinch-zoom, so on a tablet the board could neither be panned nor
   zoomed. Inner scroll containers (the fixed editor overlays) still scroll — the browser stops
   combining touch-action at the element that actually scrolls. */
.canvas-surface {
    touch-action: none;
    /* Individual items opt out of this where they need to (an editable textarea sets
       user-select: text explicitly), but the canvas as a whole must never let a drag start a native
       text/element selection instead of a move or resize — a freshly created item can be dragged
       before its own CSS has had a chance to matter to a gesture that started a pixel outside its
       still-settling bounds, which would otherwise start a native selection. */
    -webkit-user-select: none;
    user-select: none;
}

/* ── Canvas control bar ──────────────────────────────────────────────────── */
.canvas-controls-glass {
    position: relative;
    display: inline-flex;
}

/* Fallback for large boards where a full-scene compositor capture is too expensive: a frosted pill
   using the GPU-composited backdrop-filter instead of re-rasterizing every interaction frame. */
.canvas-controls-glass--plain {
    background: color-mix(in srgb, var(--cratis-surface-card) 78%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 999px;
}

/* The glass surface behind supplies the chrome - the bar itself stays clear. */
.canvas-controls-bar {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 1px solid transparent;
}

.canvas-controls-separator {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--cratis-surface-border);
    border-radius: 1px;
    margin-inline: 2px;
    flex-shrink: 0;
}

/* ── Canvas control buttons ──────────────────────────────────────────────── */
.canvas-controls-icon-btn,
.canvas-controls-zoom-btn {
    color: var(--cratis-text-color-secondary);
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
}

.canvas-controls-icon-btn:hover,
.canvas-controls-icon-btn--active,
.canvas-controls-zoom-btn:hover {
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color);
}

/* ── Canvas minimap ──────────────────────────────────────────────────────── */
.canvas-minimap {
    background: var(--cratis-surface-hover);
    border: 1px solid var(--cratis-surface-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.canvas-minimap-viewport {
    border: 2px solid var(--cratis-primary-color);
    background: color-mix(in srgb, var(--cratis-primary-color) 12%, transparent);
}

/* ── ./Canvas/shapes/Note/Note.css ─────────────────────────────────────── */
/*
 * Copyright (c) Cratis. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project root for full license information.
 */

/* Patrick Hand is embedded rather than merely named: it ships on no operating system, and neither
   does the 'Comic Sans MS' fallback on iOS/iPadOS — there the stack fell through to the generic
   `cursive`, which Safari resolves to Snell Roundhand, a formal script that looks nothing like a
   handwritten note. Self-hosting the woff2 subsets (the same ones Google Fonts serves) makes notes
   render identically on every platform. Licensed under the SIL Open Font License — see
   PatrickHand-OFL.txt. */
@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/PatrickHand-latin-CLvioJyB.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/PatrickHand-latin-ext-BrmbLZ0Z.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Patrick Hand';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/PatrickHand-vietnamese-BHPMs6Ph.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

.canvas-note {
    /* One source of truth for the note font: the visible text, the textarea being edited and the
       off-screen measurer must resolve to the exact same face or the fitted font size is wrong. */
    --canvas-note-font-family: 'Patrick Hand', 'Comic Sans MS', cursive, sans-serif;

    position: relative;
    background-color: #fffe9e;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    overflow: visible;
    border-radius: 1px;
}

.canvas-note:active {
    cursor: grabbing;
}

.canvas-note--selected {
    outline: 2px solid #aaa;
    outline-offset: 2px;
}

/* A note showing all of its text grows past its own box and over whatever is below it, so it has to
   read as lifted off the board rather than run into its neighbors. The height it grows to is measured
   from the text and set inline; only the lift and the easing belong here. */
.canvas-note--expanded {
    box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.3), 1px 2px 4px rgba(0, 0, 0, 0.15);
    transition: height 120ms ease;
}

.canvas-note__text {
    margin: 0;
    padding: 12px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--canvas-note-font-family);
    color: #333;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.canvas-note__textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    padding: 12px;
    box-sizing: border-box;
    font-family: var(--canvas-note-font-family);
    color: #333;
    cursor: text;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    /* The note itself is user-select: none so drags never start a selection; the text being edited
       must still be selectable. */
    user-select: text;
    -webkit-user-select: text;
}

/* Off-screen element used to measure text fitting. Mirrors the visible text
   styles exactly so the browser computes identical line breaks. */
.canvas-note__measurer {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
    left: -9999px;
    top: -9999px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: var(--canvas-note-font-family);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    color: #333;
}

.canvas-note__expand {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    color: #333;
    font-size: 10px;
    cursor: pointer;
    pointer-events: auto;
}

.canvas-note__handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1.5px solid #888;
    border-radius: 1px;
    z-index: 10;
    box-sizing: border-box;
}

/* ── ./Canvas/shapes/Region/Region.css ─────────────────────────────────────── */
/*
 * Copyright (c) Cratis. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project root for full license information.
 */

.canvas-region {
    position: relative;
    border: 2px dashed rgba(100, 150, 240, 0.55);
    border-radius: 4px;
    background: rgba(100, 150, 240, 0.06);
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
    /*
     * A host typically raises a selected/dragging region above other board items (via CanvasItem's
     * zIndex) so its title bar stays visible over cards/notes drifting under it — but that means this
     * backdrop would otherwise sit on top of, and swallow clicks meant for, whatever is positioned
     * inside or near it. Let presses pass straight through the backdrop to whatever's underneath; only
     * the title bar and resize handles below opt back into being interactive.
     */
    pointer-events: none;
}

.canvas-region:active {
    cursor: grabbing;
}

.canvas-region--selected {
    border-color: rgba(100, 150, 240, 0.9);
}

/*
 * Container for the region's member items. Positioned at the region's top-left (region.x/region.y)
 * with no border or padding, so member coordinates share the same origin used when converting between
 * absolute and region-relative positions. Zero-sized; only its absolutely-positioned children are
 * interactive.
 */
.canvas-region__items {
    position: absolute;
    top: 0;
    left: 0;
}

/* Title bar sits above the region box */
.canvas-region__title-bar {
    position: absolute;
    top: -28px;
    left: -2px;
    height: 28px;
    padding: 0 8px;
    background: rgba(100, 150, 240, 0.72);
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    cursor: grab;
    white-space: nowrap;
    pointer-events: auto;
}

.canvas-region__title-bar:active {
    cursor: grabbing;
}

.canvas-region__name {
    font-size: 12px;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
}

.canvas-region__name-input {
    font-size: 12px;
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    outline: none;
    padding: 0;
    min-width: 80px;
    cursor: text;
}

.canvas-region__handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1.5px solid rgba(100, 150, 240, 0.8);
    border-radius: 1px;
    z-index: 10;
    box-sizing: border-box;
    pointer-events: auto;
}

/* ── ./Chat/ChatConversation.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam so the conversation follows whatever theme the
   host runs. */
.cratis-chat-conversation {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cratis-chat-conversation__messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cratis-chat-conversation__empty {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--cratis-text-color-secondary);
}

.cratis-chat-message {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cratis-chat-message--continuation {
    margin-top: -0.625rem;
}

.cratis-chat-message__author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cratis-chat-message__author-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cratis-text-color);
}

.cratis-chat-message__content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cratis-chat-message__panel {
    position: relative;
    background: var(--cratis-surface-section);
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    padding: 0.5rem 0.625rem;
}

.cratis-chat-message__body {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--cratis-text-color);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cratis-chat-message__mention {
    color: var(--cratis-highlight-text-color);
    background: var(--cratis-highlight-bg);
    border-radius: 4px;
    padding: 0 0.2em;
    font-weight: 600;
}

.cratis-chat-message__mention[data-kind='agent'] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* The action buttons hang over the message's top-right corner and only show while the message is
   hovered — or while one of them holds keyboard focus, which is why they hide through opacity
   rather than display (a display:none button can never receive focus in the first place). */
.cratis-chat-message__actions {
    position: absolute;
    top: -0.75rem;
    right: 0.375rem;
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}

.cratis-chat-message:hover .cratis-chat-message__actions,
.cratis-chat-message__actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.cratis-chat-message__action {
    background: transparent;
    border: none;
    border-radius: 4px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cratis-text-color-secondary);
    font-size: 0.75rem;
    transition:
        background 0.12s,
        color 0.12s;
}

.cratis-chat-message__action:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

.cratis-chat-message__time {
    font-size: 0.6875rem;
    color: var(--cratis-text-color-secondary);
    padding-left: 0.125rem;
}

/* ── ./Chat/ChatSidebar.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* The overlay layer the sidebar portals into. It is transparent and does not intercept pointer
   events by default (`modal={false}`, the default) — a chat lives next to the work, so the rest
   of the page stays visible and interactive behind it. Only `data-modal='true'` paints a backdrop
   and blocks clicks outside the panel, matching a dialog's masking. */
.cratis-chat-sidebar__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--cratis-z-index-dialog);
    pointer-events: none;
}

.cratis-chat-sidebar__backdrop[data-modal='true'] {
    background: var(--cratis-maskbg);
    pointer-events: auto;
}

.cratis-chat-sidebar__backdrop[data-entering] {
    animation: cratis-chat-sidebar-backdrop-fade 160ms ease-out;
}

.cratis-chat-sidebar__backdrop[data-exiting] {
    animation: cratis-chat-sidebar-backdrop-fade 160ms reverse ease-in;
}

@keyframes cratis-chat-sidebar-backdrop-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Baseline chat sidebar — a panel needs a visible surface even before a theme preset is applied,
   so this ships a token-based default that a preset or `pt` can still override. Every color comes
   from the --cratis-* token seam so the sidebar follows whatever theme the host runs. */
.cratis-chat-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--cratis-surface-overlay);
    color: var(--cratis-text-color);
    border-left: 1px solid var(--cratis-surface-border);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    outline: none;
    transform: translateX(0);
    transition: transform 200ms ease;
}

.cratis-chat-sidebar[data-entering] {
    transform: translateX(100%);
    animation: cratis-chat-sidebar-slide-in 200ms ease-out forwards;
}

.cratis-chat-sidebar[data-exiting] {
    animation: cratis-chat-sidebar-slide-in 200ms ease-in reverse;
}

@keyframes cratis-chat-sidebar-slide-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.cratis-chat-sidebar[data-position='left'] {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--cratis-surface-border);
}

.cratis-chat-sidebar[data-position='left'][data-entering] {
    animation-name: cratis-chat-sidebar-slide-in-left;
}

.cratis-chat-sidebar[data-position='left'][data-exiting] {
    animation-name: cratis-chat-sidebar-slide-in-left;
}

@keyframes cratis-chat-sidebar-slide-in-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.cratis-chat-sidebar__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cratis-surface-border);
    flex-shrink: 0;
}

.cratis-chat-sidebar__title {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cratis-chat-sidebar__title--pending {
    font-style: italic;
    font-weight: 400;
    color: var(--cratis-text-color-secondary);
}

.cratis-chat-sidebar__back,
.cratis-chat-sidebar__close {
    background: transparent;
    border: none;
    border-radius: var(--cratis-border-radius);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cratis-text-color-secondary);
    font-size: 0.875rem;
    flex-shrink: 0;
    transition:
        color 0.12s,
        background 0.12s;
}

.cratis-chat-sidebar__back:hover,
.cratis-chat-sidebar__close:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

.cratis-chat-sidebar__content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .cratis-chat-sidebar__backdrop[data-entering],
    .cratis-chat-sidebar__backdrop[data-exiting],
    .cratis-chat-sidebar[data-entering],
    .cratis-chat-sidebar[data-exiting] {
        animation: none;
    }

    .cratis-chat-sidebar {
        transition: none;
    }
}

/* ── ./Chat/ChatTopicList.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam so the list follows whatever theme the host
   runs. */
.cratis-chat-topics {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-y: auto;
}

.cratis-chat-topics__start {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--cratis-primary-color);
    color: var(--cratis-primary-color-text);
    border: none;
    border-radius: var(--cratis-border-radius);
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.12s;
}

.cratis-chat-topics__start:hover:not(:disabled) {
    background: var(--cratis-primary-600);
}

.cratis-chat-topics__start:disabled {
    opacity: 0.35;
    cursor: default;
}

.cratis-chat-topics__empty {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--cratis-text-color-secondary);
}

.cratis-chat-topics__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cratis-chat-topics__topic {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: none;
    border-radius: var(--cratis-border-radius);
    text-align: left;
    cursor: pointer;
    color: var(--cratis-text-color);
    transition: background 0.12s;
}

.cratis-chat-topics__topic:hover,
.cratis-chat-topics__row:hover .cratis-chat-topics__topic {
    background: var(--cratis-surface-hover);
}

/* Topic actions reuse the message action overlay, centered on the row instead of hanging above it. */
.cratis-chat-topics__row {
    position: relative;
}

.cratis-chat-topics__row .cratis-chat-message__actions {
    top: 50%;
    transform: translateY(-50%);
}

.cratis-chat-topics__row:hover .cratis-chat-message__actions {
    opacity: 1;
    pointer-events: auto;
}

.cratis-chat-topics__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cratis-chat-topics__name {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cratis-chat-topics__name--pending {
    font-style: italic;
    font-weight: 400;
    color: var(--cratis-text-color-secondary);
}

.cratis-chat-topics__started-by {
    font-size: 0.75rem;
    color: var(--cratis-text-color-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cratis-chat-topics__activity {
    align-self: flex-start;
    flex-shrink: 0;
    font-size: 0.6875rem;
    color: var(--cratis-text-color-secondary);
}

/* ── ./Chat/Kit/Avatar/PersonAvatarCircle.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.person-avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.person-avatar-circle-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Avatars sit on draggable elements (chat bubbles, cards) — the browser's native image drag
       must never hijack the pointer gesture. draggable={false} covers most engines; WebKit also
       needs the CSS opt-out. */
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.person-avatar-circle-initials {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-family: system-ui, sans-serif;
}

/* ── ./Chat/Kit/Chat.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the conversation follows whatever theme
   the host runs — light, dark, or its own. */

/* ── Chat panel (floating dropdown from the chat button) ─────────────────── */
.chat-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    z-index: 300;
    overflow: hidden;
}

/* ── Panel header ─────────────────────────────────────────────────────────── */
.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--cratis-surface-border);
    flex-shrink: 0;
}

.chat-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--cratis-text-color);
}

.chat-panel-close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--cratis-text-color-secondary);
    padding: 0 2px;
    border-radius: 4px;
    transition: color 0.12s;
}

.chat-panel-close:hover {
    color: var(--cratis-text-color);
}

/* ── Scrollable messages area ─────────────────────────────────────────────── */
.chat-panel-messages {
    flex: 1;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chat-panel-empty {
    font-size: 12px;
    color: var(--cratis-text-color-secondary);
    text-align: center;
    margin: 16px 0;
}

/* ── Individual chat bubble ───────────────────────────────────────────────── */
.chat-bubble {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Continuation bubbles (same author, no avatar row) get tighter spacing. */
.chat-bubble--continuation {
    margin-top: -8px;
}

.chat-bubble-author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-bubble-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--cratis-text-color);
}

.chat-bubble-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 28px;
}

.chat-bubble-text {
    background: var(--cratis-surface-section);
    border-radius: 0 10px 10px 10px;
    padding: 7px 10px;
    margin: 0;
    font-size: 12px;
    color: var(--cratis-text-color);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-time {
    font-size: 10px;
    color: var(--cratis-text-color-secondary);
    padding-left: 2px;
}

/* ── Docked variant (the chat sidebar provides the frame and the heading) ── */
.chat-panel--docked {
    position: static;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.chat-panel--docked .chat-panel-messages {
    max-height: none;
}

/* ── ./Chat/Kit/ChatBubble.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* ── Thinking bubbles (small dots at top-right of avatar) ────────────────── */

@keyframes thinking-bubble-pop-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes thinking-bubble-pop-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}

.thinking-bubbles {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
}

.thinking-dot {
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    opacity: 0;
}

/* ── Enter animation ─────────────────────────────────────────────────────── */

.thinking-bubbles--entering .thinking-dot--1 {
    animation: thinking-bubble-pop-in 0.25s ease-out forwards;
}

.thinking-bubbles--entering .thinking-dot--2 {
    animation: thinking-bubble-pop-in 0.25s ease-out 0.1s forwards;
}

/* ── Exit animation ──────────────────────────────────────────────────────── */

.thinking-bubbles--exiting .thinking-dot--2 {
    transform: scale(1);
    opacity: 1;
    animation: thinking-bubble-pop-out 0.2s ease-in forwards;
}

.thinking-bubbles--exiting .thinking-dot--1 {
    transform: scale(1);
    opacity: 1;
    animation: thinking-bubble-pop-out 0.2s ease-in 0.06s forwards;
}

/* ── ./Chat/Kit/ChatComposer.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the compose row follows whatever theme the
   host runs. */
.chat-composer {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--cratis-surface-border);
    flex-shrink: 0;
}

.chat-composer__input {
    flex: 1;
    background: var(--cratis-surface-0);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 8px;
    color: var(--cratis-text-color);
    font-size: 12px;
    padding: 6px 8px;
    resize: none;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.12s;
}

.chat-composer__input::placeholder {
    color: var(--cratis-text-color-secondary);
}

.chat-composer__input:focus {
    border-color: var(--cratis-primary-color);
}

.chat-composer__emoji-toggle {
    background: var(--cratis-surface-100);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cratis-text-color-secondary);
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    transition:
        background 0.12s,
        color 0.12s;
}

.chat-composer__emoji-toggle:hover:not(:disabled) {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

.chat-composer__send {
    background: var(--cratis-primary-color);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cratis-primary-color-text);
    flex-shrink: 0;
    transition:
        background 0.12s,
        opacity 0.12s;
}

.chat-composer__send:hover:not(:disabled) {
    background: var(--cratis-primary-600);
}

.chat-composer__send:disabled,
.chat-composer__emoji-toggle:disabled,
.chat-composer__input:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ── ./Chat/Kit/ChatMessageBubble.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the bubble follows whatever theme the host
   runs. */

/* The positioning context for the corner buttons — the message panel itself, so they straddle its
   bottom edge rather than sitting below whatever else the bubble carries. */
.chat-bubble-panel {
    position: relative;
}

/* Room below the panel for the half of the buttons that hangs outside it, so they never land on the
   timestamp or the reactions underneath. Only when there are buttons: a bubble without them keeps its
   old height. */
.chat-bubble-panel--with-actions {
    margin-bottom: 13px;
}

/* And a little room inside, so the half that overlaps the panel sits on its padding rather than on
   the last line of the message. */
.chat-bubble-panel--with-actions .chat-bubble-text {
    padding-bottom: 14px;
}

/* Straddling the panel's bottom edge in its lower-right corner — half in, half out, so they read as
   belonging to the message without taking a line of their own inside it. */
.chat-bubble-actions {
    position: absolute;
    right: 10px;
    bottom: -11px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* A stroke around a solid fill: the button lies across the bubble's edge, so a translucent fill would
   let that edge run straight through it and stop it reading as one round control. The fill is the
   panel's own surface, which is what the half hanging outside is sitting on. */
.chat-bubble-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--cratis-surface-border);
    border-radius: 999px;
    background: var(--cratis-surface-overlay);
    color: var(--cratis-text-color-secondary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.chat-bubble-action:hover,
.chat-bubble-action:focus-visible {
    border-color: var(--cratis-text-color-secondary);
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

/* Once a person has reacted, the button shows their emoji as real state rather than a hover-only
   affordance, so it stays visible without hovering. */
.chat-bubble-action--own-reaction {
    border-color: var(--cratis-text-color-secondary);
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
    font-size: 13px;
}

/* ── ./Chat/Kit/Emoji/EmojiPicker.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the picker follows whatever theme the host
   runs — the same convention ReactionPicker.css and MentionSuggestions.css
   follow. */
.emoji-picker {
    display: flex;
    flex-direction: column;
    width: 296px;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.emoji-picker__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    height: 232px;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

.emoji-picker__emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker__emoji:hover,
.emoji-picker__emoji:focus-visible {
    background: var(--cratis-surface-hover);
}

.emoji-picker__emoji--selected {
    background: var(--cratis-highlight-bg);
}

.emoji-picker__tabs {
    display: flex;
    gap: 2px;
    padding: 6px;
    border-top: 1px solid var(--cratis-surface-border);
    background: var(--cratis-surface-ground);
}

.emoji-picker__tab {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    /* Muted until it is the section being shown, so the row reads as one control rather than nine
       competing emojis. */
    filter: grayscale(1);
    opacity: 0.55;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.emoji-picker__tab:hover {
    opacity: 0.85;
}

.emoji-picker__tab--current {
    background: var(--cratis-surface-hover);
    filter: none;
    opacity: 1;
}

/* ── ./Chat/Kit/FailedReply.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the failure line follows whatever theme
   the host runs. The warning tint is mixed from the orange token because
   the seam ships no alpha variants. */
.chat-failed-reply {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border-left: 2px solid var(--cratis-orange-500);
    background: color-mix(in srgb, var(--cratis-orange-500) 10%, transparent);
    border-radius: 0 6px 6px 0;
}

.chat-failed-reply__line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-failed-reply__icon {
    font-size: 12px;
    color: var(--cratis-orange-500);
}

.chat-failed-reply__text {
    font-size: 12px;
    color: var(--cratis-text-color);
}

.chat-failed-reply__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 18px;
}

.chat-failed-reply__action {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    color: var(--cratis-text-color);
    text-decoration: underline;
    cursor: pointer;
}

.chat-failed-reply__action:hover {
    color: var(--cratis-text-color);
}

.chat-failed-reply__detail {
    margin: 0;
    padding: 12px;
    border-radius: 6px;
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 24rem;
    overflow: auto;
}

/* ── ./Chat/Kit/Mentions/MentionSuggestions.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Sits above the compose row inside the chat panel. Every color comes from the --cratis-* token
   seam, so the list follows whatever theme the host runs. */
.mention-suggestions {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    max-height: 180px;
    overflow-y: auto;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 400;
}

.mention-suggestions__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--cratis-text-color);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.mention-suggestions__item--highlighted {
    background: var(--cratis-highlight-bg);
    color: var(--cratis-highlight-text-color);
}

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

/* ── ./Chat/Kit/MessageReactions.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the badges follow whatever theme the host
   runs. */
.message-reactions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.message-reactions__badge-wrapper {
    position: relative;
}

.message-reactions__badge {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px 2px 4px;
    border: 1px solid var(--cratis-surface-border);
    border-radius: 999px;
    background: var(--cratis-surface-100);
    cursor: pointer;
}

.message-reactions__badge:hover {
    background: var(--cratis-surface-hover);
}

/* A stack of the same emoji from different people overlaps slightly rather than repeating flat. */
.message-reactions__stack {
    display: flex;
}

.message-reactions__glyph {
    font-size: 12px;
    line-height: 1;
}

.message-reactions__glyph + .message-reactions__glyph {
    margin-left: -7px;
}

.message-reactions__count {
    font-size: 10px;
    color: var(--cratis-text-color-secondary);
}

/* Positioned by AnchoredOverlay, which portals it to <body> — so this only describes the bubble
   itself, never where it sits. */
.message-reactions__tooltip {
    min-width: 120px;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-reactions__tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-reactions__tooltip-emoji {
    font-size: 13px;
    line-height: 1;
}

.message-reactions__tooltip-name {
    font-size: 11px;
    color: var(--cratis-text-color);
    white-space: nowrap;
}

/* ── ./Chat/Kit/ReactionPicker.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Portaled to <body> by AnchoredOverlay rather than positioned by its parent: the chat panel is a
   scrolling sidebar, and anything positioned inside it is clipped the moment it reaches the edge.
   Every color comes from the --cratis-* token seam, so the picker follows whatever theme the host
   runs. */
.reaction-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.reaction-picker__quick {
    display: flex;
    gap: 2px;
    align-items: center;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 4px;
}

.reaction-picker__options {
    display: contents;
}

.reaction-picker__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.reaction-picker__item:hover,
.reaction-picker__item:focus-visible {
    background: var(--cratis-surface-hover);
}

.reaction-picker__item--selected {
    background: var(--cratis-highlight-bg);
}

/* Deliberately the quiet one on the row: it opens the rest of the emojis rather than being an emoji,
   so it reads as a control and never competes with the six actual choices next to it. */
.reaction-picker__more {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: 2px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.reaction-picker__more:hover,
.reaction-picker__more:focus-visible,
.reaction-picker__more--open {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

/* Who has reacted so far, under the quick row — the same list a badge shows, so opening the picker
   answers "who gave what" without needing a second gesture. */
.reaction-picker__given {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: stretch;
    max-height: 148px;
    overflow-y: auto;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 6px 8px;
}

.reaction-picker__given-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reaction-picker__given-emoji {
    font-size: 13px;
    line-height: 1;
}

.reaction-picker__given-name {
    font-size: 11px;
    color: var(--cratis-text-color);
    white-space: nowrap;
}

/* ── ./Chat/Kit/TypingIndicator.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Every color comes from the --cratis-* token seam, so the indicator follows whatever theme the
   host runs. */
.chat-typing {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 2px 4px;
}

.chat-typing__authors {
    display: flex;
    align-items: center;
}

.chat-typing__authors > * + * {
    margin-left: -6px;
}

.chat-typing__label {
    font-size: 11px;
    color: var(--cratis-text-color-secondary);
}

.chat-typing__dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 10px;
}

.chat-typing__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cratis-text-color-secondary);
    animation: chat-typing-jump 1.2s infinite ease-in-out;
}

.chat-typing__dot:nth-child(2) {
    animation-delay: 0.18s;
}

.chat-typing__dot:nth-child(3) {
    animation-delay: 0.36s;
}

@keyframes chat-typing-jump {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.45;
    }

    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

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

/* ── ./CommandDialog/CommandStepper.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-command-stepper {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
}
.cratis-command-stepper__root,
.cratis-command-stepper__panels,
.cratis-command-stepper__panel {
    width: 100%;
    box-sizing: border-box;
}
.cratis-command-stepper__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cratis-command-stepper__step {
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1;
}
.cratis-command-stepper__header {
    display: inline-flex;
    min-width: 0;
    padding: 0.4rem;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    background: transparent;
    color: var(--cratis-text-color);
    font: inherit;
    cursor: pointer;
}
.cratis-command-stepper__header:disabled {
    cursor: default;
}
.cratis-command-stepper__header:focus-visible {
    outline: none;
    border-radius: var(--cratis-border-radius);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-command-stepper__step:not([data-active]) .cratis-command-stepper__header {
    opacity: 0.55;
}
.cratis-command-stepper__number {
    display: inline-flex;
    width: 1.8rem;
    height: 1.8rem;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--cratis-surface-border);
    border-radius: 50%;
    background: var(--cratis-surface-card);
}
.cratis-command-stepper__step[data-active='true'] .cratis-command-stepper__number {
    border-color: var(--cratis-primary-color);
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
}
.cratis-command-stepper__step[data-visited='true']:not([data-invalid='true'])
    .cratis-command-stepper__number {
    border-color: var(--cratis-green-500);
    color: var(--cratis-green-500);
}
.cratis-command-stepper__step[data-invalid='true'] .cratis-command-stepper__number {
    border-color: var(--cratis-red-500);
    background: var(--cratis-surface-card);
    color: var(--cratis-red-500);
}
.cratis-command-stepper__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cratis-command-stepper__separator {
    height: 2px;
    min-width: 1rem;
    margin-inline: 0.25rem;
    flex: 1;
    background: var(--cratis-surface-border);
}
.cratis-command-stepper__panel {
    padding-block: 0.5rem;
}

.cratis-command-stepper--horizontal .cratis-command-stepper__list {
    flex-direction: row;
    align-items: center;
}
.cratis-command-stepper--vertical .cratis-command-stepper__root {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
}
.cratis-command-stepper--vertical .cratis-command-stepper__list {
    width: max-content;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.cratis-command-stepper--vertical .cratis-command-stepper__step {
    flex-direction: column;
    align-items: flex-start;
}
.cratis-command-stepper--vertical .cratis-command-stepper__separator {
    width: 2px;
    min-width: 2px;
    min-height: 1.25rem;
    margin-inline-start: 1.3rem;
}
.cratis-command-stepper--vertical .cratis-command-stepper__panels {
    min-width: 0;
    flex: 1;
}

@media (forced-colors: active) {
    .cratis-command-stepper__number,
    .cratis-command-stepper__separator {
        border-color: CanvasText;
    }
    .cratis-command-stepper__step[data-active='true'] .cratis-command-stepper__number {
        background: Highlight;
        color: HighlightText;
    }
}

/* ── ./CommandForm/fields/Fields.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-field-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cratis-field-input {
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
    color: var(--cratis-text-color);
    font: inherit;
    box-shadow: var(--cratis-shadow-subtle);
}
.cratis-field-input::placeholder {
    color: var(--cratis-text-color-secondary);
}
.cratis-field-input:focus-visible {
    outline: none;
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-field-input:disabled {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-choice-field:has(.cratis-choice-field__native:disabled) {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-field-input[data-invalid='true'],
.cratis-field-input[aria-invalid='true'] {
    border-color: var(--cratis-red-500);
}
.cratis-field-textarea {
    resize: vertical;
}
.cratis-number-field,
.cratis-password-field {
    position: relative;
    display: flex;
}
.cratis-password-field .cratis-field-input {
    padding-inline-end: 2.75rem;
}
.cratis-password-field__toggle {
    position: absolute;
    inset-inline-end: 0.35rem;
    top: 50%;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    cursor: pointer;
}
.cratis-password-field__toggle:hover {
    background: var(--cratis-surface-hover);
}
.cratis-password-field__toggle:focus-visible,
.cratis-slider-field__input:focus-visible,
.cratis-color-field__input:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}

.cratis-choice-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.cratis-choice-field__native {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
.cratis-checkbox__box {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
}
.cratis-checkbox__indicator {
    opacity: 0;
    color: var(--cratis-primary-color-text);
    font-size: 0.85rem;
}
.cratis-choice-field__native:checked + .cratis-checkbox__box {
    border-color: var(--cratis-primary-color);
    background: var(--cratis-primary-color);
}
.cratis-choice-field__native:checked + .cratis-checkbox__box .cratis-checkbox__indicator {
    opacity: 1;
}
.cratis-choice-field__native:focus-visible
    + :is(.cratis-checkbox__box, .cratis-switch__control) {
    box-shadow: var(--cratis-focus-ring);
}
.cratis-choice-field[data-invalid='true']
    :is(.cratis-checkbox__box, .cratis-switch__control) {
    border-color: var(--cratis-red-500);
}

.cratis-switch__control {
    display: inline-flex;
    width: 2.5rem;
    height: 1.4rem;
    padding: 0.15rem;
    align-items: center;
    border: 1px solid var(--cratis-control-border);
    border-radius: 999px;
    background: var(--cratis-surface-100);
    transition: background-color 140ms ease;
}
.cratis-switch__handle {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--cratis-control-background);
    box-shadow: var(--cratis-shadow-subtle);
    transition: transform 140ms ease;
}
.cratis-choice-field__native:checked + .cratis-switch__control {
    border-color: var(--cratis-primary-color);
    background: var(--cratis-primary-color);
}
.cratis-choice-field__native:checked + .cratis-switch__control .cratis-switch__handle {
    transform: translateX(1.05rem);
}

.cratis-radio__box {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cratis-control-border);
    border-radius: 50%;
    background: var(--cratis-control-background);
}
.cratis-radio__indicator {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--cratis-primary-color);
    opacity: 0;
}
.cratis-choice-field__native:checked + .cratis-radio__box {
    border-color: var(--cratis-primary-color);
}
.cratis-choice-field__native:checked + .cratis-radio__box .cratis-radio__indicator {
    opacity: 1;
}
.cratis-radio-group {
    display: flex;
}
.cratis-radio-group--vertical {
    flex-direction: column;
    gap: 0.5rem;
}
.cratis-radio-group--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.cratis-slider-field {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.75rem;
}
.cratis-slider-field__input {
    width: 100%;
    accent-color: var(--cratis-primary-color);
}
.cratis-slider-field__value {
    min-width: 2.5rem;
    text-align: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cratis-chips-field {
    display: flex;
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
}
.cratis-chips-field:focus-within {
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-chips-field[data-invalid='true'] {
    border-color: var(--cratis-red-500);
}
.cratis-chips-field__item {
    display: inline-flex;
    padding: 0.3rem 0.45rem;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: var(--cratis-surface-100);
}
.cratis-chips-field__remove {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.cratis-chips-field__remove:focus-visible {
    outline: none;
    border-radius: 50%;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-chips-field__input {
    min-width: 7rem;
    padding: 0.3rem;
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--cratis-text-color);
    font: inherit;
}

.cratis-color-field {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.cratis-color-field__input {
    width: 3rem;
    height: var(--cratis-control-height);
    padding: 0.2rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
}
.cratis-color-field__value {
    font-family: ui-monospace, monospace;
}

.cratis-rating-field {
    display: inline-flex;
    align-items: center;
}
.cratis-rating-field__option {
    position: relative;
    cursor: pointer;
}
.cratis-rating-field__star {
    color: var(--cratis-surface-border);
    font-size: 1.4rem;
    line-height: 1;
}
.cratis-rating-field__star[data-selected='true'] {
    color: var(--cratis-orange-500);
}
.cratis-rating-field__option:focus-within .cratis-rating-field__star {
    border-radius: 0.2rem;
    box-shadow: var(--cratis-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .cratis-switch__control,
    .cratis-switch__handle {
        transition: none;
    }
}

@media (forced-colors: active) {
    .cratis-field-input,
    .cratis-checkbox__box,
    .cratis-switch__control {
        border-color: CanvasText;
    }
    .cratis-choice-field__native:checked
        + :is(.cratis-checkbox__box, .cratis-switch__control) {
        background: Highlight;
    }
}

/* ── ./Common/ActionMenubar.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-action-menubar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* ── ./Common/Button.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-button {
    display: inline-flex;
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.75rem 1.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--cratis-action-background);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        opacity 140ms ease;
}
.cratis-button:not([data-tone])[data-variant='solid']:hover:not(:disabled) {
    border-color: var(--cratis-action-background-hover);
    background: var(--cratis-action-background-hover);
}
.cratis-button:not([data-tone])[data-variant='solid']:active:not(:disabled) {
    border-color: var(--cratis-action-background-active);
    background: var(--cratis-action-background-active);
}
.cratis-button:is([data-variant='outline'], [data-variant='ghost']):hover:not(:disabled) {
    background: color-mix(in srgb, currentColor 4%, transparent);
}
.cratis-button:is([data-variant='outline'], [data-variant='ghost']):active:not(
        :disabled
    ) {
    background: color-mix(in srgb, currentColor 16%, transparent);
}
.cratis-button:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-button:disabled {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-button[data-size='small'] {
    min-height: var(--cratis-control-height-small);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}
.cratis-button[data-size='large'] {
    min-height: var(--cratis-control-height-large);
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
}
.cratis-button[data-shape='pill'],
.cratis-button[data-icon-only='true'] {
    border-radius: 999px;
}
.cratis-button[data-icon-only='true'] {
    width: var(--cratis-control-height);
    padding: 0;
}
.cratis-button[data-size='small'][data-icon-only='true'] {
    width: var(--cratis-control-height-small);
}
.cratis-button[data-size='large'][data-icon-only='true'] {
    width: var(--cratis-control-height-large);
}

.cratis-button[data-variant='outline'] {
    border-color: currentColor;
    background: transparent;
    color: var(--cratis-primary-color);
}
.cratis-button[data-variant='ghost'] {
    border-color: transparent;
    background: transparent;
    color: var(--cratis-text-color);
}
.cratis-button[data-variant='link'] {
    min-height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--cratis-primary-color);
    text-decoration: underline;
}

.cratis-button[data-tone='neutral'] {
    --cratis-button-tone: var(--cratis-text-color);
    --cratis-button-fill: var(--cratis-surface-100);
    --cratis-button-fill-text: var(--cratis-text-color);
}
.cratis-button[data-tone='accent'] {
    --cratis-button-tone: var(--cratis-info-background);
    --cratis-button-fill: var(--cratis-info-background);
    --cratis-button-fill-text: var(--cratis-info-text);
}
.cratis-button[data-tone='positive'] {
    --cratis-button-tone: var(--cratis-success-background);
    --cratis-button-fill: var(--cratis-success-background);
    --cratis-button-fill-text: var(--cratis-success-text);
}
.cratis-button[data-tone='caution'] {
    --cratis-button-tone: var(--cratis-warning-background);
    --cratis-button-fill: var(--cratis-warning-background);
    --cratis-button-fill-text: var(--cratis-warning-text);
}
.cratis-button[data-tone='critical'] {
    --cratis-button-tone: var(--cratis-danger-background);
    --cratis-button-fill: var(--cratis-danger-background);
    --cratis-button-fill-text: var(--cratis-danger-text);
}
.cratis-button[data-tone='accent'][data-severity='help'] {
    --cratis-button-tone: var(--cratis-primary-600);
    --cratis-button-fill: var(--cratis-primary-600);
    --cratis-button-fill-text: var(--cratis-primary-600-text);
}
.cratis-button[data-tone='neutral'][data-severity='contrast'] {
    --cratis-button-tone: var(--cratis-text-color);
    --cratis-button-fill: var(--cratis-text-color);
    --cratis-button-fill-text: var(--cratis-surface-0);
}
.cratis-button[data-tone][data-variant='solid'] {
    border-color: var(--cratis-button-fill);
    background: var(--cratis-button-fill);
    color: var(--cratis-button-fill-text);
}
.cratis-button[data-tone][data-variant='solid']:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--cratis-button-fill) 88%, black);
    background: color-mix(in srgb, var(--cratis-button-fill) 88%, black);
}
.cratis-button[data-tone][data-variant='solid']:active:not(:disabled) {
    border-color: color-mix(in srgb, var(--cratis-button-fill) 76%, black);
    background: color-mix(in srgb, var(--cratis-button-fill) 76%, black);
}
.cratis-button[data-tone]:is(
        [data-variant='outline'],
        [data-variant='ghost'],
        [data-variant='link']
    ) {
    color: var(--cratis-button-tone);
}

.cratis-button__icon,
.cratis-button__spinner {
    display: inline-flex;
    flex: 0 0 auto;
}
.cratis-button__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cratis-button-spin 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .cratis-button,
    .cratis-button__spinner {
        transition: none;
        animation: none;
    }
}

@media (forced-colors: active) {
    .cratis-button {
        border-color: ButtonText;
    }
    .cratis-button:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ── ./Common/ComboBox.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-combobox {
    display: inline-flex;
    flex-direction: column;
    min-width: 10rem;
    color: var(--cratis-text-color);
}
.cratis-combobox__control {
    display: flex;
    min-height: var(--cratis-control-height);
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
}
.cratis-combobox__control:focus-within {
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-combobox[data-invalid='true'] .cratis-combobox__control {
    border-color: var(--cratis-red-500);
}
.cratis-combobox[data-disabled='true'] {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-combobox__input,
.cratis-combobox__trigger {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.cratis-combobox__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    outline: 0;
}
.cratis-combobox__trigger {
    padding: 0 0.75rem;
    color: var(--cratis-text-color-secondary);
}
.cratis-combobox__popover {
    width: var(--trigger-width);
    overflow: auto;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-overlay);
    box-shadow: var(--cratis-shadow-overlay);
}
.cratis-combobox__listbox {
    max-height: 18rem;
    padding: 0.25rem;
}
.cratis-combobox__option,
.cratis-combobox__action,
.cratis-combobox__message {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--cratis-border-radius);
}
.cratis-combobox__listbox[data-option-layout='stacked'] .cratis-combobox__option {
    flex-direction: column;
}
.cratis-combobox__option[data-focused],
.cratis-combobox__action[data-focused] {
    background: var(--cratis-surface-hover);
}
.cratis-combobox__option[data-selected='true'] {
    background: var(--cratis-highlight-bg);
    color: var(--cratis-highlight-text-color);
}
.cratis-combobox__option[data-disabled='true'] {
    opacity: var(--cratis-disabled-opacity);
}
.cratis-combobox__option-description,
.cratis-combobox__message,
.cratis-combobox__description {
    color: var(--cratis-text-color-secondary);
}
.cratis-combobox__action {
    border-top: 1px solid var(--cratis-surface-border);
    color: var(--cratis-primary-color);
}
.cratis-combobox__description,
.cratis-combobox__error {
    margin-top: 0.25rem;
    font-size: 0.875em;
}
.cratis-combobox__error {
    color: var(--cratis-red-500);
}

/* ── ./Common/Collections.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Toggle group, tabs, tag group and breadcrumbs share a token vocabulary and a focus treatment, so
   they share one stylesheet rather than repeating it four times in the published aggregate. */

.cratis-toggle-group,
.cratis-tabs__list,
.cratis-tag-group,
.cratis-breadcrumbs {
    display: flex;
    align-items: center;
    color: var(--cratis-text-color);
}
.cratis-toggle-group__option:focus-visible,
.cratis-tabs__tab:focus-visible,
.cratis-tag-group__tag:focus-visible,
.cratis-tag-group__remove:focus-visible,
.cratis-tag-group__input:focus-visible,
.cratis-breadcrumbs__link:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-toggle-group[data-disabled],
.cratis-tabs[data-disabled],
.cratis-toggle-group__option[data-disabled],
.cratis-tabs__tab[data-disabled] {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
/* A disabled tag group keeps its values readable — they are information, not an inactive control,
   and fading them takes their contrast below the threshold. Only the affordances dim. */
.cratis-tag-group[data-disabled] {
    cursor: not-allowed;
    background: var(--cratis-surface-ground);
}
.cratis-tag-group[data-disabled] .cratis-tag-group__tag {
    border-style: dashed;
}

/* Toggle group */
.cratis-toggle-group {
    gap: 0.125rem;
    padding: 0.125rem;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-ground);
}
.cratis-toggle-group__option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border: 0;
    border-radius: calc(var(--cratis-border-radius) - 1px);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.cratis-toggle-group__option[data-selected] {
    background: var(--cratis-surface-card);
    box-shadow: var(--cratis-shadow-card, none);
    font-weight: 600;
}
.cratis-toggle-group__icon {
    display: inline-flex;
}
.cratis-toggle-group[data-invalid] {
    border-color: var(--cratis-red-500);
}

/* Tabs */
.cratis-tabs {
    display: flex;
    flex-direction: column;
}
.cratis-tabs__list {
    gap: 0.25rem;
    border-bottom: 1px solid var(--cratis-surface-border);
}
.cratis-tabs__tab {
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    font: inherit;
    cursor: pointer;
}
.cratis-tabs__tab[data-selected] {
    border-bottom-color: var(--cratis-primary-color);
    color: var(--cratis-text-color);
    font-weight: 600;
}
.cratis-tabs__panel {
    padding: 0.75rem 0;
    outline: none;
}

/* Tag group */
.cratis-tag-group {
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: var(--cratis-control-height);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
}
.cratis-tag-group:focus-within {
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-tag-group[data-invalid] {
    border-color: var(--cratis-red-500);
}
.cratis-tag-group__group,
.cratis-tag-group__list {
    display: contents;
}
.cratis-tag-group__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--cratis-surface-border);
    border-radius: 999px;
    background: var(--cratis-surface-ground);
    font-size: 0.9em;
}
.cratis-tag-group__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    line-height: 1;
    cursor: pointer;
}
.cratis-tag-group__remove:hover {
    color: var(--cratis-text-color);
}
.cratis-tag-group__input {
    flex: 1 1 6rem;
    min-width: 4rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
}

/* Breadcrumbs */
.cratis-breadcrumbs {
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.cratis-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.cratis-breadcrumbs__link {
    border-radius: var(--cratis-border-radius);
    color: var(--cratis-text-color-secondary);
    text-decoration: none;
    cursor: pointer;
}
.cratis-breadcrumbs__link:hover {
    color: var(--cratis-text-color);
    text-decoration: underline;
}
.cratis-breadcrumbs__item[data-selected] {
    color: var(--cratis-text-color);
    font-weight: 600;
}
.cratis-breadcrumbs__separator {
    color: var(--cratis-text-color-secondary);
}

@media (forced-colors: active) {
    .cratis-toggle-group__option[data-selected],
    .cratis-tabs__tab[data-selected] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }
}

/* ── ./Common/DatePickerInput.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-date-picker {
    display: inline-flex;
    width: 100%;
    color: var(--cratis-text-color);
}
.cratis-date-picker__picker {
    width: 100%;
}
.cratis-date-picker__group {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
}
.cratis-date-picker__group[data-focus-within] {
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-date-picker[data-invalid='true'] .cratis-date-picker__group {
    border-color: var(--cratis-red-500);
}
.cratis-date-picker[data-disabled='true'] {
    opacity: var(--cratis-disabled-opacity);
}
.cratis-date-picker__input {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
    padding: 0.625rem 0.75rem;
}
.cratis-date-picker__group[data-empty='true']:not([data-focus-within])
    .cratis-date-picker__input {
    opacity: 0;
}
.cratis-date-picker__placeholder {
    position: absolute;
    inset-inline-start: 0.7rem;
    color: var(--cratis-text-color-secondary);
    pointer-events: none;
}
.cratis-date-picker__group[data-focus-within] .cratis-date-picker__placeholder {
    display: none;
}
.cratis-date-picker__segment {
    padding: 0 0.1rem;
    border-radius: 0.2rem;
    outline: none;
    font-variant-numeric: tabular-nums;
}
.cratis-date-picker__segment:not([data-type='literal']) {
    display: flex;
    min-width: 24px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
}
.cratis-date-picker__segment[data-placeholder] {
    color: var(--cratis-text-color-secondary);
}
.cratis-date-picker__segment[data-focused] {
    background: var(--cratis-highlight-bg);
    color: var(--cratis-highlight-text-color);
}
.cratis-date-picker__trigger {
    align-self: stretch;
    min-width: var(--cratis-control-height);
    border: 0;
    border-inline-start: 1px solid var(--cratis-control-border);
    background: transparent;
    color: var(--cratis-text-color-secondary);
    cursor: pointer;
}
.cratis-date-picker__trigger:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}
.cratis-date-picker__trigger:focus-visible {
    outline: none;
    box-shadow: inset var(--cratis-focus-ring);
}
.cratis-date-picker__popover {
    z-index: var(--cratis-z-index-overlay);
    overflow: auto;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-overlay);
    color: var(--cratis-text-color);
    box-shadow: var(--cratis-shadow-overlay);
}
.cratis-date-picker__dialog {
    padding: 0.75rem;
    outline: none;
}
.cratis-date-picker__calendar {
    width: max-content;
}
.cratis-date-picker__header {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.cratis-date-picker__heading {
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
}
.cratis-date-picker__nav,
.cratis-date-picker__action {
    min-height: 2rem;
    border: 1px solid var(--cratis-surface-border);
    border-radius: calc(var(--cratis-border-radius) * 0.75);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.cratis-date-picker__nav:hover,
.cratis-date-picker__action:hover {
    background: var(--cratis-surface-hover);
}
.cratis-date-picker__nav:focus-visible,
.cratis-date-picker__action:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-date-picker__grid {
    border-collapse: collapse;
}
.cratis-date-picker__grid th {
    width: 2.25rem;
    height: 2rem;
    color: var(--cratis-text-color-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}
.cratis-date-picker__cell {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    outline: none;
    cursor: default;
}
.cratis-date-picker__cell[data-hovered] {
    background: var(--cratis-surface-hover);
}
.cratis-date-picker__cell[data-selected] {
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
}
.cratis-date-picker__cell[data-focused] {
    box-shadow: var(--cratis-focus-ring);
}
.cratis-date-picker__cell[data-disabled],
.cratis-date-picker__cell[data-outside-month] {
    opacity: 0.45;
}
.cratis-date-picker__button-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--cratis-surface-border);
}
.cratis-date-picker__action {
    padding: 0.35rem 0.65rem;
}

@media (forced-colors: active) {
    .cratis-date-picker__group,
    .cratis-date-picker__popover,
    .cratis-date-picker__nav,
    .cratis-date-picker__action {
        border-color: CanvasText;
    }
    .cratis-date-picker__cell[data-selected] {
        background: Highlight;
        color: HighlightText;
    }
}

/* ── ./Common/FormElement.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-form-element {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
}

.cratis-form-element__addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    color: var(--cratis-text-color-secondary);
    background: var(--cratis-surface-100);
    border: 1px solid var(--cratis-control-border);
    border-right: 0;
    border-top-left-radius: var(--cratis-border-radius);
    border-bottom-left-radius: var(--cratis-border-radius);
}

.cratis-form-element > *:not(.cratis-form-element__addon) {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── ./Common/NumberInput.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-number-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    color: var(--cratis-text-color);
}
.cratis-number-input__group {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--cratis-control-height);
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
    box-shadow: var(--cratis-shadow-subtle);
}
.cratis-number-input__control,
.cratis-number-input__steps {
    display: flex;
    min-width: 0;
    align-items: stretch;
}
.cratis-number-input__control {
    flex: 1 1 auto;
}
.cratis-number-input__steps {
    flex: 0 0 auto;
}
.cratis-number-input__group:focus-within {
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-number-input[data-invalid='true'] .cratis-number-input__group {
    border-color: var(--cratis-red-500);
}
.cratis-number-input[data-disabled='true'],
.cratis-number-input__step:disabled {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-number-input:is([data-disabled='true'], [data-readonly='true'])
    .cratis-number-input__group {
    background: var(--cratis-surface-100);
}
.cratis-number-input__input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: var(--cratis-control-height);
    padding: 0.625rem 0.75rem;
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cratis-text-color);
    font: inherit;
    font-variant-numeric: tabular-nums;
}
.cratis-number-input__input::placeholder {
    color: var(--cratis-text-color-secondary);
}
.cratis-number-input__adornment {
    display: inline-flex;
    min-width: 0;
    padding-inline: 0.75rem;
    align-items: center;
    color: var(--cratis-number-input-adornment-color);
    white-space: nowrap;
}
.cratis-number-input__prefix {
    padding-inline-end: 0;
}
.cratis-number-input__suffix {
    padding-inline-start: 0;
}
.cratis-number-input__step {
    display: inline-flex;
    box-sizing: border-box;
    width: var(--cratis-control-height);
    min-width: 2.75rem;
    min-height: var(--cratis-control-height);
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-inline-start: 1px solid var(--cratis-control-border);
    background: var(--cratis-number-input-step-background);
    color: var(--cratis-text-color);
    font: inherit;
    cursor: pointer;
}
.cratis-number-input__step:hover:not(:disabled) {
    background: var(--cratis-number-input-step-background-hover);
}
.cratis-number-input__step:focus-visible {
    outline: 2px solid var(--cratis-primary-color);
    outline-offset: -3px;
}
.cratis-number-input__description,
.cratis-number-input__error {
    display: block;
    margin-block-start: 0.35rem;
    line-height: 1.4;
}
.cratis-number-input__description {
    color: var(--cratis-text-color-secondary);
}
.cratis-number-input__error {
    color: var(--cratis-red-500);
}

@media (max-width: 24rem) {
    .cratis-number-input__group {
        flex-wrap: wrap;
    }
    .cratis-number-input__control,
    .cratis-number-input__steps {
        width: 100%;
        flex-basis: 100%;
        border-block-start: 1px solid var(--cratis-control-border);
    }
    .cratis-number-input__step {
        width: 50%;
        min-width: 0;
        flex: 1 1 50%;
    }
    .cratis-number-input__step:first-child {
        border-inline-start: 0;
    }
}

@media (forced-colors: active) {
    .cratis-number-input__group,
    .cratis-number-input__step {
        border-color: CanvasText;
    }
    .cratis-number-input__group:focus-within,
    .cratis-number-input__step:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ── ./Common/Primitives.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-text-input,
.cratis-text-area {
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
    color: var(--cratis-text-color);
    font: inherit;
    box-shadow: var(--cratis-shadow-subtle);
}
.cratis-text-area {
    resize: vertical;
}
.cratis-text-input::placeholder,
.cratis-text-area::placeholder {
    color: var(--cratis-text-color-secondary);
}
.cratis-text-input:focus-visible,
.cratis-text-area:focus-visible {
    outline: none;
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-text-input:is(:disabled, [data-readonly='true']),
.cratis-text-area:is(:disabled, [data-readonly='true']) {
    background: var(--cratis-surface-100);
}
.cratis-text-input:disabled,
.cratis-text-area:disabled,
.cratis-choice[data-disabled='true'] {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-text-input[data-invalid='true'],
.cratis-text-area[data-invalid='true'] {
    border-color: var(--cratis-red-500);
}

.cratis-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cratis-text-color);
    cursor: pointer;
}
.cratis-choice[data-readonly='true']:not([data-disabled='true']) {
    cursor: default;
}
.cratis-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.cratis-checkbox__box,
.cratis-radio__box,
.cratis-switch__control {
    display: inline-flex;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid var(--cratis-control-border);
    background: var(--cratis-control-background);
}
.cratis-checkbox__box,
.cratis-radio__box {
    width: 1.25rem;
    height: 1.25rem;
    justify-content: center;
}
.cratis-checkbox__box {
    border-radius: var(--cratis-border-radius);
}
.cratis-checkbox__indicator {
    color: var(--cratis-primary-color-text);
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0;
}
.cratis-radio__box {
    border-radius: 50%;
}
.cratis-radio__indicator {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--cratis-primary-color);
    opacity: 0;
}
.cratis-switch__control {
    width: 2.5rem;
    height: 1.4rem;
    padding: 0.15rem;
    border-radius: 999px;
    background: var(--cratis-surface-100);
    transition: background-color 140ms ease;
}
.cratis-switch__handle {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--cratis-control-background);
    box-shadow: var(--cratis-shadow-subtle);
    transition: transform 140ms ease;
}
.cratis-choice__input:focus-visible
    + :is(.cratis-checkbox__box, .cratis-radio__box, .cratis-switch__control) {
    box-shadow: var(--cratis-focus-ring);
}
.cratis-choice__input:checked + .cratis-checkbox__box,
.cratis-choice__input:checked + .cratis-switch__control {
    border-color: var(--cratis-primary-color);
    background: var(--cratis-primary-color);
}
.cratis-choice__input:checked + .cratis-checkbox__box .cratis-checkbox__indicator,
.cratis-choice__input:checked + .cratis-radio__box .cratis-radio__indicator {
    opacity: 1;
}
.cratis-choice__input:checked + .cratis-radio__box {
    border-color: var(--cratis-primary-color);
}
.cratis-choice__input:checked + .cratis-switch__control .cratis-switch__handle {
    transform: translateX(1.05rem);
}
.cratis-choice:dir(rtl)
    .cratis-choice__input:checked
    + .cratis-switch__control
    .cratis-switch__handle {
    transform: translateX(-1.05rem);
}
.cratis-choice[data-invalid='true']
    :is(.cratis-checkbox__box, .cratis-radio__box, .cratis-switch__control) {
    border-color: var(--cratis-red-500);
}

.cratis-surface {
    box-sizing: border-box;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-card);
    color: var(--cratis-text-color);
    box-shadow: var(--cratis-shadow-subtle);
}

@media (prefers-reduced-motion: reduce) {
    .cratis-switch__control,
    .cratis-switch__handle {
        transition: none;
    }
}

@media (forced-colors: active) {
    .cratis-text-input,
    .cratis-text-area,
    .cratis-checkbox__box,
    .cratis-radio__box,
    .cratis-switch__control,
    .cratis-surface {
        border-color: CanvasText;
    }
    .cratis-choice__input:checked
        + :is(.cratis-checkbox__box, .cratis-switch__control) {
        background: Highlight;
    }
    .cratis-choice__input:checked + .cratis-radio__box .cratis-radio__indicator {
        background: Highlight;
    }
    .cratis-choice__input:focus-visible
        + :is(.cratis-checkbox__box, .cratis-radio__box, .cratis-switch__control),
    .cratis-text-input:focus-visible,
    .cratis-text-area:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ── ./Common/Tooltip.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* ── Tooltip bubble ──────────────────────────────────────────────────────── */
.cratis-tooltip-popup {
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color);
    border: 1px solid var(--cratis-surface-border);
    box-shadow: var(--cratis-shadow-overlay);
    border-radius: var(--cratis-border-radius);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: inherit;
    max-width: 24rem;
    z-index: var(--cratis-z-index-tooltip);
}

/* ── ./DataTables/ColumnFilterMenu.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    cursor: pointer;
    border-radius: 0.25rem;
}

/* Sized against the header row rather than the ambient font, so the affordance stays legible and
   clickable whatever type scale the surrounding table is rendered at. */
.cratis-filter-trigger__icon {
    width: 0.875rem;
    height: 0.875rem;
    display: block;
}

.cratis-filter-trigger:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

.cratis-filter-trigger[data-active='true'] {
    color: var(--cratis-primary-color);
}

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

.cratis-filter-popover {
    z-index: var(--cratis-z-index-filter);
}

.cratis-filter-menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 14rem;
    padding: 0.5rem;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    box-shadow: var(--cratis-shadow-overlay);
}

.cratis-filter-menu__input {
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
    color: var(--cratis-text-color);
    font: inherit;
}

.cratis-filter-menu__input:focus-visible {
    outline: none;
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}

.cratis-filter-menu-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

/* ── ./DataTables/DataTableCore.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-datatable__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cratis-datatable {
    width: 100%;
    color: var(--cratis-text-color);
}

/* The bounded scroll container is sized with a percentage `max-height`, which CSS resolves
   to `none` whenever the containing block has no definite height (CSS 2.1 10.7). The root
   is `height: auto` by default, so a scrollable table would grow past its parent and get
   clipped instead of scrolling. Giving the scrollable root a definite height re-establishes
   the chain, and the flex child absorbs the remaining space. */
.cratis-datatable--scrollable {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.cratis-datatable--scrollable .cratis-datatable__container {
    flex: 1 1 auto;
    min-height: 0;
}
.cratis-datatable-header-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}
.cratis-datatable-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--cratis-surface-border);
}
.cratis-datatable-search__input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
    color: var(--cratis-text-color);
    font: inherit;
}
.cratis-datatable-search__input:focus-visible {
    outline: none;
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}
.cratis-datatable__container {
    width: 100%;
    overflow-x: auto;
}
.cratis-datatable__table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.cratis-datatable__header-cell {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--cratis-surface-border);
    background: var(--cratis-surface-section);
    color: var(--cratis-text-color);
    text-align: start;
    font-size: 0.875rem;
    font-weight: 700;
}
.cratis-datatable__sort {
    display: inline-flex;
    padding: 0;
    align-items: center;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
}
.cratis-datatable__sort:focus-visible {
    outline: none;
    border-radius: 0.2rem;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-datatable__cell {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--cratis-surface-border);
    vertical-align: middle;
}
.cratis-datatable__row {
    background: var(--cratis-surface-card);
    transition: background-color 100ms ease;
}
.cratis-datatable__row[data-interactive='true']:hover {
    background: var(--cratis-surface-hover);
}
.cratis-datatable__row:focus-visible {
    outline: none;
    box-shadow: inset var(--cratis-focus-ring);
}
.cratis-datatable__row[data-selected='true'] {
    background: var(--cratis-highlight-bg);
    color: var(--cratis-highlight-text-color);
}
.cratis-datatable__empty-cell,
.cratis-datatable__loading-cell,
.cratis-datatable__failure-cell {
    padding: 2rem 1rem;
    color: var(--cratis-text-color-secondary);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .cratis-datatable__row {
        transition: none;
    }
}
@media (forced-colors: active) {
    .cratis-datatable-search__input,
    .cratis-datatable__header-cell,
    .cratis-datatable__cell {
        border-color: CanvasText;
    }
    .cratis-datatable__row[data-selected='true'] {
        outline: 2px solid Highlight;
    }
}

/* ── ./DataTables/TablePaginator.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-table-paginator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem;
}

.cratis-table-paginator-info {
    font-size: 0.875rem;
    color: var(--cratis-text-color-secondary);
    padding: 0 0.5rem;
}

.cratis-table-paginator-range {
    font-size: 0.8125rem;
    color: var(--cratis-text-color-secondary);
    margin-right: auto;
    padding: 0 0.5rem;
}

/* ── ./Dialogs/Dialog.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-dialog__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--cratis-z-index-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--cratis-maskbg);
}
.cratis-dialog__backdrop[data-entering] {
    animation: cratis-dialog-fade 160ms ease-out;
}
.cratis-dialog__backdrop[data-exiting] {
    animation: cratis-dialog-fade 120ms reverse ease-in;
}
.cratis-dialog__backdrop[data-placement='start'],
.cratis-dialog__backdrop[data-placement='end'] {
    padding: 0;
    align-items: stretch;
}
.cratis-dialog__backdrop[data-placement='start'] {
    justify-content: flex-start;
}
.cratis-dialog__backdrop[data-placement='end'] {
    justify-content: flex-end;
}
.cratis-dialog__positioner {
    display: flex;
    max-width: 100%;
    max-height: 100%;
    align-items: center;
    justify-content: center;
}
.cratis-dialog {
    display: flex;
    max-width: min(100%, calc(100vw - 2rem));
    max-height: min(90vh, calc(100vh - 2rem));
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-overlay);
    color: var(--cratis-text-color);
    box-shadow: var(--cratis-shadow-dialog);
    outline: none;
}
.cratis-dialog[data-placement='start'],
.cratis-dialog[data-placement='end'] {
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border-block-width: 0;
}
.cratis-dialog[data-placement='start'] {
    --cratis-dialog-slide-from: -100%;
    border-inline-start-width: 0;
}
.cratis-dialog[data-placement='end'] {
    --cratis-dialog-slide-from: 100%;
    border-inline-end-width: 0;
}
.cratis-dialog[data-placement='start']:dir(rtl) {
    --cratis-dialog-slide-from: 100%;
}
.cratis-dialog[data-placement='end']:dir(rtl) {
    --cratis-dialog-slide-from: -100%;
}
.cratis-dialog[data-placement='start'][data-entering],
.cratis-dialog[data-placement='end'][data-entering] {
    animation: cratis-dialog-slide 200ms ease-out;
}
.cratis-dialog[data-placement='start'][data-exiting],
.cratis-dialog[data-placement='end'][data-exiting] {
    animation: cratis-dialog-slide 150ms reverse ease-in;
}
.cratis-dialog__document {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    outline: none;
}
.cratis-dialog__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 1rem 1.25rem;
    align-items: center;
    column-gap: 1rem;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--cratis-surface-border);
}
.cratis-dialog__title {
    grid-column: 1;
    justify-self: start;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    outline: none;
}
.cratis-dialog__subtitle {
    grid-column: 1;
    margin: 0.25rem 0 0;
    color: var(--cratis-text-color-secondary);
    font-size: 0.9rem;
}
.cratis-dialog__title:focus-visible {
    border-radius: var(--cratis-border-radius);
}
.cratis-dialog__close {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    width: 2rem;
    height: 2rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    font-size: 1.25rem;
    cursor: pointer;
}
.cratis-dialog__close:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}
.cratis-dialog__content {
    min-height: 0;
    padding: 1.25rem;
    overflow: auto;
    flex: 1 1 auto;
}
.cratis-dialog__busy-scope {
    display: contents;
    min-inline-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
.cratis-dialog__footer {
    display: flex;
    padding: 0.9rem 1.25rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 0 0 auto;
    border-top: 1px solid var(--cratis-surface-border);
}
.cratis-dialog__button {
    display: inline-flex;
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    padding: 0.75rem 1.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 1px solid var(--cratis-action-background);
    border-radius: var(--cratis-border-radius);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.cratis-dialog__button--primary {
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
}
.cratis-dialog__button--secondary {
    background: transparent;
    color: var(--cratis-action-background);
}
.cratis-dialog__button--primary:hover:not(:disabled) {
    border-color: var(--cratis-action-background-hover);
    background: var(--cratis-action-background-hover);
}
.cratis-dialog__button--primary:active:not(:disabled) {
    border-color: var(--cratis-action-background-active);
    background: var(--cratis-action-background-active);
}
.cratis-dialog__button--secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--cratis-action-background) 4%, transparent);
}
.cratis-dialog__button--secondary:active:not(:disabled) {
    background: color-mix(in srgb, var(--cratis-action-background) 16%, transparent);
}
.cratis-dialog__title:focus-visible,
.cratis-dialog__close:focus-visible,
.cratis-dialog__button:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-dialog__button:disabled {
    cursor: not-allowed;
    opacity: var(--cratis-disabled-opacity);
}
.cratis-dialog__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: cratis-dialog-spin 700ms linear infinite;
}

@keyframes cratis-dialog-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes cratis-dialog-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes cratis-dialog-slide {
    from {
        translate: var(--cratis-dialog-slide-from) 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cratis-dialog__backdrop,
    .cratis-dialog[data-placement],
    .cratis-dialog__spinner {
        animation: none;
    }
}

@media (forced-colors: active) {
    .cratis-dialog,
    .cratis-dialog__button {
        border-color: CanvasText;
    }
    .cratis-dialog__close:focus-visible,
    .cratis-dialog__button:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ── ./Display/Display.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-avatar {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color);
}
.cratis-avatar[data-size='large'] {
    width: 3rem;
    height: 3rem;
}
.cratis-avatar[data-size='xlarge'] {
    width: 4rem;
    height: 4rem;
}
.cratis-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cratis-avatar__fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.cratis-badge,
.cratis-tag,
.cratis-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color);
    line-height: 1;
}
.cratis-badge {
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
}
.cratis-badge[data-size='large'] {
    min-width: 1.75rem;
    min-height: 1.75rem;
    font-size: 0.875rem;
}
.cratis-badge[data-size='xlarge'] {
    min-width: 2.25rem;
    min-height: 2.25rem;
    font-size: 1rem;
}
.cratis-badge[data-shape='circle'] {
    padding: 0;
    border-radius: 50%;
}
.cratis-tag {
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.cratis-tag[data-rounded='true'] {
    border-radius: 999px;
}
.cratis-chip {
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
}

.cratis-badge[data-severity='info'],
.cratis-tag[data-severity='info'] {
    background: var(--cratis-info-background);
    color: var(--cratis-info-text);
}
.cratis-badge[data-severity='success'],
.cratis-tag[data-severity='success'] {
    background: var(--cratis-success-background);
    color: var(--cratis-success-text);
}
.cratis-badge[data-severity='warn'],
.cratis-tag[data-severity='warn'] {
    background: var(--cratis-warning-background);
    color: var(--cratis-warning-text);
}
.cratis-badge[data-severity='danger'],
.cratis-tag[data-severity='danger'] {
    background: var(--cratis-danger-background);
    color: var(--cratis-danger-text);
}
.cratis-badge[data-severity='contrast'],
.cratis-tag[data-severity='contrast'] {
    background: var(--cratis-text-color);
    color: var(--cratis-surface-0);
}

.cratis-chip__remove {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.cratis-chip__remove:hover {
    background: var(--cratis-surface-hover);
}
.cratis-chip__remove:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}

.cratis-message {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-section);
    color: var(--cratis-text-color);
}
.cratis-message[data-severity='info'] {
    border-color: var(--cratis-primary-color);
}
.cratis-message[data-severity='success'] {
    border-color: var(--cratis-green-500);
}
.cratis-message[data-severity='warn'] {
    border-color: var(--cratis-orange-500);
}
.cratis-message[data-severity='error'] {
    border-color: var(--cratis-red-500);
}
.cratis-message__icon {
    flex: 0 0 auto;
}
.cratis-message__text {
    min-width: 0;
}

.cratis-progress-bar {
    position: relative;
    height: 1.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cratis-surface-100);
}
.cratis-progress-bar__indicator {
    display: flex;
    height: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
    transition: width 160ms ease;
}
.cratis-progress-bar[data-mode='indeterminate'] .cratis-progress-bar__indicator {
    width: 40%;
    animation: cratis-progress-indeterminate 1.2s ease-in-out infinite;
}
.cratis-progress-bar__label {
    padding-inline: 0.35rem;
    font-size: 0.7rem;
}

.cratis-progress-spinner {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
}
.cratis-progress-spinner__svg {
    width: 100%;
    height: 100%;
    animation: cratis-spinner-rotate 1s linear infinite;
}
.cratis-progress-spinner__track,
.cratis-progress-spinner__range {
    fill: none;
    stroke-width: 4;
}
.cratis-progress-spinner__track {
    stroke: var(--cratis-surface-100);
}
.cratis-progress-spinner__range {
    stroke: var(--cratis-primary-color);
    stroke-linecap: round;
    stroke-dasharray: 90 150;
}

.cratis-skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        var(--cratis-surface-100),
        var(--cratis-surface-hover),
        var(--cratis-surface-100)
    );
    background-size: 200% 100%;
    animation: cratis-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes cratis-progress-indeterminate {
    from {
        transform: translateX(-120%);
    }
    to {
        transform: translateX(350%);
    }
}
@keyframes cratis-spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}
@keyframes cratis-skeleton-pulse {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cratis-progress-bar__indicator,
    .cratis-progress-spinner__svg,
    .cratis-skeleton {
        animation: none;
        transition: none;
    }
}

@media (forced-colors: active) {
    .cratis-message,
    .cratis-chip,
    .cratis-tag,
    .cratis-badge {
        border: 1px solid CanvasText;
    }
    .cratis-progress-bar__indicator,
    .cratis-progress-spinner__range {
        background: Highlight;
        stroke: Highlight;
    }
}

/* ── ./Dropdown/Dropdown.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-dropdown {
    position: relative;
    display: inline-flex;
    min-width: 10rem;
    color: var(--cratis-text-color);
}
.cratis-dropdown__select,
.cratis-dropdown__combobox {
    position: relative;
    display: flex;
    width: 100%;
}
.cratis-dropdown__trigger,
.cratis-dropdown__filter,
.cratis-dropdown__multiple {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--cratis-control-height);
    border: 1px solid var(--cratis-control-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-control-background);
    color: var(--cratis-text-color);
    font: inherit;
}
.cratis-dropdown__trigger {
    display: flex;
    padding: 0.625rem 2.25rem 0.625rem 0.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: start;
    cursor: pointer;
}
.cratis-dropdown__filter {
    padding: 0.625rem 4rem 0.625rem 0.75rem;
}
.cratis-dropdown:not([data-disabled='true'])
    :is(.cratis-dropdown__trigger, .cratis-dropdown__filter):hover {
    border-color: var(--cratis-primary-300);
    background: var(--cratis-surface-hover);
}
.cratis-dropdown__trigger[data-pressed] {
    background: var(--cratis-highlight-bg);
}
.cratis-dropdown__multiple {
    padding: 0.4rem;
}
.cratis-dropdown__trigger:focus-visible,
.cratis-dropdown__filter:focus-visible,
.cratis-dropdown__multiple:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
    border-color: var(--cratis-primary-color);
}
.cratis-dropdown[data-invalid='true']
    :is(.cratis-dropdown__trigger, .cratis-dropdown__filter, .cratis-dropdown__multiple) {
    border-color: var(--cratis-red-500);
}
.cratis-dropdown[data-disabled='true'] {
    opacity: var(--cratis-disabled-opacity);
}
.cratis-dropdown__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cratis-dropdown__indicator {
    position: absolute;
    inset-inline-end: 0.55rem;
    top: 50%;
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--cratis-text-color-secondary);
}
.cratis-dropdown__clear {
    position: absolute;
    inset-inline-end: 2.15rem;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    cursor: pointer;
}
.cratis-dropdown__clear:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}
.cratis-dropdown__clear:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-dropdown__popover {
    z-index: var(--cratis-z-index-overlay);
    min-width: var(--trigger-width);
    max-height: min(20rem, var(--available-height));
    overflow: auto;
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-overlay);
    color: var(--cratis-text-color);
    box-shadow: var(--cratis-shadow-overlay);
}
.cratis-dropdown__listbox {
    padding: 0.3rem;
    outline: none;
}
.cratis-dropdown__option {
    display: flex;
    min-height: var(--cratis-control-height);
    padding: 0.75rem 1.25rem;
    align-items: center;
    border-radius: calc(var(--cratis-border-radius) * 0.75);
    outline: none;
    cursor: default;
}
.cratis-dropdown__option[data-focused] {
    background: var(--cratis-surface-hover);
}
.cratis-dropdown__option[data-selected] {
    background: var(--cratis-highlight-bg);
    color: var(--cratis-highlight-text-color);
}
.cratis-dropdown__option[data-focus-visible] {
    box-shadow: inset var(--cratis-focus-ring);
}
.cratis-dropdown__option[data-disabled] {
    opacity: 0.5;
}

@media (forced-colors: active) {
    .cratis-dropdown__trigger,
    .cratis-dropdown__filter,
    .cratis-dropdown__multiple,
    .cratis-dropdown__popover {
        border-color: CanvasText;
    }
    .cratis-dropdown__option[data-focused],
    .cratis-dropdown__option[data-selected] {
        outline: 2px solid Highlight;
    }
}

/* ── ./Filter/FilterPanel.css ─────────────────────────────────────── */
/* -----------------------------------------------------------------------
 * Standalone FilterPanel styles.
 *
 * These styles are shared by the standalone FilterPanel component and the
 * PivotViewer which embeds it. All class names use the .pv-filter-* prefix
 * so they can coexist with PivotViewer's other .pv-* rules.
 * ----------------------------------------------------------------------- */

.pv-filter-panel {
    position: fixed;
    width: min(280px, calc(100% - 2rem));
    max-height: calc(100vh - 6.5rem);
    background: linear-gradient(
        180deg,
        var(--cratis-surface-card),
        var(--cratis-surface-ground)
    );
    border: 1px solid var(--cratis-surface-border);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
    overflow: hidden;
    z-index: 12;
    display: flex;
    flex-direction: column;
}

.pv-filter-panel.dragging {
    cursor: grabbing;
    user-select: none;
}

.pv-filter-panel.minimized {
    max-height: none;
}

.pv-filter-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: grab;
    background: var(--cratis-surface-section);
    border-bottom: 1px solid var(--cratis-surface-border);
    flex-shrink: 0;
}

.pv-filter-panel.dragging .pv-filter-panel-header {
    cursor: grabbing;
}

.pv-filter-panel-header h2 {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cratis-text-color);
    flex: 1;
    pointer-events: none;
}

.pv-minimize-btn,
.pv-close-btn {
    appearance: none;
    border: none;
    border-radius: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease;
}

.pv-minimize-btn:hover,
.pv-close-btn:hover {
    background: var(--cratis-surface-hover);
}

.pv-close-btn {
    font-size: 1.2rem;
}

.pv-filter-panel-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 1.25rem;
    transition:
        max-height 150ms ease-out,
        opacity 100ms ease-out,
        padding 150ms ease-out;
}

.pv-filter-panel-content.expanded {
    overflow-y: auto;
    flex: 1;
    max-height: 600px;
    opacity: 1;
    padding: 1rem 1.25rem 1.25rem;
}

.pv-search {
    padding-bottom: 1rem;
}

.pv-search input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--cratis-surface-border);
    background: var(--cratis-surface-ground);
    color: inherit;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 var(--cratis-surface-border);
}

.pv-search input:focus,
.pv-filter-group-search input:focus {
    outline: none;
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}

.pv-filter-group-search {
    padding: 0 0 0.5rem 0;
}

.pv-filter-group-search input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--cratis-surface-border);
    background: var(--cratis-surface-ground);
    color: inherit;
    font-size: 0.85rem;
}

/* Reusable checkbox/radio option list (CheckboxListFilter) */
.pv-option-list {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: var(--cratis-filter-option-list-max-height, 14rem);
    overflow-y: auto;
}

/* Off-screen clone of every option, used only to measure whether the real (possibly
   search-filtered) list would overflow the box - see useOptionListOverflow. */
.pv-option-list-mirror {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    visibility: hidden;
    pointer-events: none;
    max-height: none;
    overflow: visible;
}

/* Rendered via `content: attr(...)` rather than a DOM text node - see CheckboxListFilter.tsx -
   so a mirror row's label/count can never be found by a text-content query. */
.pv-option-mirror-label::before {
    content: attr(data-label);
}

.pv-option-list-search {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--cratis-surface-overlay);
}

.pv-option-list-empty {
    margin: 0;
    padding: 0.45rem 0.5rem;
    font-size: 0.85rem;
    color: var(--cratis-text-color-secondary);
}

.pv-filter-groups {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pv-filter {
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 0.85rem;
    padding: 0.75rem 0.85rem;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.pv-filter.expanded {
    border-color: var(--cratis-primary-color);
    box-shadow: 0 15px 38px rgba(0, 0, 0, 0.3);
}

.pv-filter-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
}

.pv-filter-toggle {
    appearance: none;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pv-filter-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pv-filter-trigger-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pv-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 0.7rem;
}

.pv-filter-clear-header {
    appearance: none;
    flex: 0 0 auto;
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background 160ms ease,
        transform 120ms ease;
    padding: 0;
}

.pv-filter-clear-header:hover {
    background: var(--cratis-surface-hover);
    transform: scale(1.1);
}

.pv-filter-clear-header:active {
    transform: scale(0.95);
}

.pv-filter-chevron {
    width: 0.65rem;
    height: 0.65rem;
    border-right: 2px solid var(--cratis-text-color);
    border-bottom: 2px solid var(--cratis-text-color);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.pv-filter.expanded .pv-filter-chevron {
    transform: rotate(225deg);
}

.pv-filter-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    transition:
        max-height 120ms ease-out,
        opacity 80ms ease-out,
        margin-top 120ms ease-out,
        padding-top 120ms ease-out,
        border-color 120ms ease-out;
}

.pv-filter-content.expanded {
    max-height: 350px;
    opacity: 1;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top-color: var(--cratis-surface-border);
    overflow-y: auto;
}

.pv-filter-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.pv-filter-content li label {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background 160ms ease,
        border-color 160ms ease;
}

.pv-filter-content li label:hover {
    background: var(--cratis-surface-hover);
}

.pv-filter-content input[type='checkbox'],
.pv-filter-content input[type='radio'] {
    accent-color: var(--cratis-primary-color);
}

.pv-filter-content li label span {
    font-size: 0.85rem;
}

.pv-filter-clear {
    margin-top: 0.75rem;
    appearance: none;
    border: none;
    border-radius: 0.55rem;
    padding: 0.4rem 0.75rem;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.pv-option-count {
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    color: var(--cratis-text-color-secondary);
    font-size: 0.75rem;
}

/* Filter Dropdown (anchor-positioned panel) */
.pv-filter-dropdown {
    position: fixed;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 2rem));
    max-height: calc(100vh - 8rem);
    background: linear-gradient(
        180deg,
        var(--cratis-surface-card),
        var(--cratis-surface-ground)
    );
    border: 1px solid var(--cratis-surface-border);
    border-radius: 0.85rem;
    box-shadow: var(--cratis-shadow-overlay);
    backdrop-filter: blur(16px);
    overflow: hidden;
    z-index: var(--cratis-z-index-filter);
    display: flex;
    flex-direction: column;
    will-change: opacity, transform;
    contain: layout;
    color: var(--cratis-text-color);
}

.pv-filter-dropdown-content {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

/* Range Histogram Filter */
.pv-range-histogram {
    padding: 0.5rem 0;
}

.pv-histogram-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    padding: 0 2px;
    margin-bottom: 0.5rem;
}

.pv-histogram-bar {
    flex: 1;
    min-width: 8px;
    background: var(--cratis-highlight-bg);
    border: none;
    border-radius: 2px 2px 0 0;
    cursor: pointer;
    transition:
        background 160ms ease,
        transform 120ms ease;
    padding: 0;
}

.pv-histogram-bar:hover {
    background: var(--cratis-surface-hover);
    transform: scaleY(1.02);
}

.pv-histogram-bar.in-range {
    background: var(--cratis-primary-color);
}

.pv-histogram-bar.partial {
    background: var(--cratis-highlight-bg);
}

.pv-range-slider {
    position: relative;
    height: 24px;
    margin: 0.5rem 0;
}

.pv-range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cratis-surface-border);
    border-radius: 2px;
    transform: translateY(-50%);
}

.pv-range-selection {
    position: absolute;
    top: 50%;
    height: 4px;
    background: var(--cratis-primary-color);
    border-radius: 2px;
    transform: translateY(-50%);
    cursor: grab;
}

.pv-range-selection:active {
    cursor: grabbing;
}

.pv-range-handle {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--cratis-primary-color);
    border: 2px solid var(--cratis-text-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: ew-resize;
    transition:
        transform 120ms ease,
        box-shadow 120ms ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pv-range-handle:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 4px 12px var(--cratis-primary-color);
}

.pv-range-handle:focus-visible {
    outline: 2px solid var(--cratis-primary-color);
    outline-offset: 3px;
}

.pv-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--cratis-text-color-secondary);
    font-variant-numeric: tabular-nums;
}

.pv-range-clear {
    margin-top: 0.75rem;
    appearance: none;
    border: none;
    border-radius: 0.55rem;
    padding: 0.4rem 0.75rem;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    width: 100%;
}

.pv-range-clear:hover {
    background: var(--cratis-surface-hover);
}

@media (max-width: 900px) {
    .pv-filter-panel {
        width: calc(100% - 2.5rem);
        left: 1.25rem;
        right: 1.25rem;
        top: 1.25rem;
        max-height: calc(100vh - 2.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(.pv-filter-panel, .pv-filter-dropdown),
    :where(.pv-filter-panel, .pv-filter-dropdown) * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── ./MarkdownEditor/MarkdownEditor.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-markdown-editor {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--cratis-surface-ground);
    border: 1px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius, 6px);
    color: var(--cratis-text-color);
}

.cratis-markdown-editor:focus-within {
    border-color: var(--cratis-primary-color);
}

.cratis-markdown-editor[data-invalid] {
    border-color: var(--cratis-red-500);
}

.cratis-markdown-editor[data-disabled] {
    opacity: var(--cratis-disabled-opacity, 0.6);
}

.cratis-markdown-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: var(--cratis-surface-card);
    border-bottom: 1px solid var(--cratis-surface-border);
}

.cratis-markdown-editor--toggleable .cratis-markdown-editor__toolbar {
    padding-right: 2.75rem;
}

.cratis-markdown-editor__separator {
    width: 1px;
    height: 1rem;
    margin: 0 4px;
    background: var(--cratis-surface-border);
}

.cratis-markdown-editor__format {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--cratis-text-color-secondary);
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-size: 0.8125rem;
}

.cratis-markdown-editor__format:hover:not(:disabled) {
    color: var(--cratis-highlight-text-color);
    background: var(--cratis-highlight-bg);
    cursor: pointer;
}

.cratis-markdown-editor__format:focus-visible,
.cratis-markdown-editor__toggle:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}

.cratis-markdown-editor__toggle {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--cratis-text-color-secondary);
    background: var(--cratis-surface-card);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
}

.cratis-markdown-editor__toggle:hover {
    color: var(--cratis-text-color);
    background: var(--cratis-surface-hover);
}

.cratis-markdown-editor__toggle[data-pressed],
.cratis-markdown-editor__toggle[data-pressed]:hover {
    color: var(--cratis-primary-color-text);
    background: var(--cratis-primary-color);
    border-color: var(--cratis-primary-color);
}

.cratis-markdown-editor__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 4rem;
}

.cratis-markdown-editor__textarea,
.cratis-markdown-editor__preview {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0.75rem;
    overflow: auto;
    color: var(--cratis-text-color);
    background: transparent;
}

.cratis-markdown-editor__textarea,
.cratis-markdown-editor__textarea:hover,
.cratis-markdown-editor__textarea:focus {
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    resize: none;
    font-family: var(--cratis-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.cratis-markdown-editor__textarea::placeholder,
.cratis-markdown-editor__empty {
    color: var(--cratis-text-color-secondary);
}

.cratis-markdown-editor__preview {
    padding-right: 3rem;
}

.cratis-markdown-editor__empty {
    margin: 0;
    font-style: italic;
}

.cratis-markdown-editor__status {
    flex-shrink: 0;
    padding: 4px 8px;
    color: var(--cratis-text-color-secondary);
    background: var(--cratis-surface-card);
    border-top: 1px solid var(--cratis-surface-border);
    font-size: 0.75rem;
}

.cratis-markdown-editor__suggestions {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-sizing: border-box;
    width: min(32rem, calc(100vw - 1rem));
    max-height: 18rem;
    padding: 4px;
    overflow-y: auto;
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 6px;
    box-shadow: var(--cratis-shadow-overlay);
}

.cratis-markdown-editor__suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--cratis-text-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8125rem;
}

.cratis-markdown-editor__suggestion[data-selected] {
    color: var(--cratis-highlight-text-color);
    background: var(--cratis-highlight-bg);
}

.cratis-markdown-editor__suggestion-detail {
    flex-shrink: 0;
    color: var(--cratis-text-color-secondary);
    font-family: var(--cratis-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.cratis-markdown-editor__suggestion-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cratis-markdown-editor__suggestion-annotation {
    flex-shrink: 0;
    color: var(--cratis-text-color-secondary);
    font-size: 0.6875rem;
}

@media (forced-colors: active) {
    .cratis-markdown-editor__suggestion[data-selected],
    .cratis-markdown-editor__toggle[data-pressed] {
        forced-color-adjust: none;
        color: HighlightText;
        background: Highlight;
    }
}

/* ── ./Notifications/Toaster.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-toaster {
    position: fixed;
    z-index: var(--cratis-z-index-toast);
    display: flex;
    width: min(26rem, calc(100vw - 2rem));
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}
.cratis-toaster[data-position^='top'] {
    top: 1rem;
}
.cratis-toaster[data-position^='bottom'] {
    bottom: 1rem;
}
.cratis-toaster[data-position$='left'] {
    left: 1rem;
}
.cratis-toaster[data-position$='right'] {
    right: 1rem;
}
.cratis-toaster[data-position$='center'] {
    left: 50%;
    transform: translateX(-50%);
}

.cratis-toast {
    display: flex;
    min-width: 18rem;
    max-width: 26rem;
    padding: 0.75rem 1rem;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid var(--cratis-surface-border);
    border-inline-start: 4px solid var(--cratis-surface-border);
    border-radius: var(--cratis-border-radius);
    background: var(--cratis-surface-overlay);
    color: var(--cratis-text-color);
    box-shadow: var(--cratis-shadow-toast);
    pointer-events: auto;
}
.cratis-toast__content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
}
.cratis-toast__title {
    font-weight: 600;
}
.cratis-toast__description {
    color: var(--cratis-text-color-secondary);
    font-size: 0.875rem;
    white-space: pre-line;
}
.cratis-toast__icon {
    flex: 0 0 auto;
}
.cratis-toast__close {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cratis-text-color-secondary);
    cursor: pointer;
}
.cratis-toast__close:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}
.cratis-toast__close:focus-visible {
    outline: none;
    box-shadow: var(--cratis-focus-ring);
}
.cratis-toast__action {
    align-self: flex-start;
    margin-top: 0.4rem;
}
.cratis-toast[data-loading='true'] .cratis-toast__icon {
    animation: cratis-toast-spin 800ms linear infinite;
}
.cratis-toast[data-severity='success'] {
    border-inline-start-color: var(--cratis-green-500);
}
.cratis-toast[data-severity='info'] {
    border-inline-start-color: var(--cratis-primary-color);
}
.cratis-toast[data-severity='warn'] {
    border-inline-start-color: var(--cratis-orange-500);
}
.cratis-toast[data-severity='error'] {
    border-inline-start-color: var(--cratis-red-500);
}
.cratis-toast[data-severity='success'] .cratis-toast__icon {
    color: var(--cratis-green-500);
}
.cratis-toast[data-severity='info'] .cratis-toast__icon {
    color: var(--cratis-primary-color);
}
.cratis-toast[data-severity='warn'] .cratis-toast__icon {
    color: var(--cratis-orange-500);
}
.cratis-toast[data-severity='error'] .cratis-toast__icon {
    color: var(--cratis-red-500);
}

@keyframes cratis-toast-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cratis-toast__icon {
        animation: none !important;
    }
}
@media (forced-colors: active) {
    .cratis-toast {
        border-color: CanvasText;
    }
    .cratis-toast__close:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }
}

/* ── ./ObjectNavigationalBar/ObjectNavigationalBar.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.cratis-object-navigational-bar {
    border-bottom: 1px solid var(--cratis-surface-border);
}

/* ── ./PivotViewer/PivotViewer.css ─────────────────────────────────────── */
.pivot-viewer {
    /* The height every toolbar control on the left of the bar shares, so the filter button and
       the item count line up as one group. */
    --pv-toolbar-control-size: 2.25rem;
    position: relative;
    /* CRITICAL: Don't set explicit height - let parent control it via container constraints */
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow children to size without forcing overflow */
    max-height: 100%; /* respect parent height if set */
    width: 100%;
    /* Keep root neutral; move visual background to the viewport so it never exceeds the container */
    background: var(--cratis-surface-ground);
    color: var(--cratis-text-color);
    overflow: hidden;
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        sans-serif;
    /* Ensure we shrink within flex parent */
    flex: 1 1 0%;
}

.pv-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto; /* grow within pivot-viewer */
    height: auto;
    padding-left: 0;
    overflow: hidden;
}

.pv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.75rem;
    border-bottom: 1px solid var(--cratis-surface-border);
    background: var(--cratis-surface-section);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 15;
    flex-shrink: 0;
    min-height: 3.5rem;
    height: 3.5rem;
    overflow: visible;
}

.pv-toolbar-left,
.pv-toolbar-right {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.pv-toolbar-right {
    gap: 1rem;
}

/* A span rather than a heading: the host owns its page's heading levels, and a bare `h1`
   inherited whatever heading size the consuming application had set. */
.pv-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Sized to the filter button beside it, so the two read as one group whether or not a title
   separates them. */
.pv-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: var(--pv-toolbar-control-size);
    padding: 0 0.65rem;
    border-radius: 999px;
    background: var(--cratis-highlight-bg);
    font-size: 0.8rem;
    line-height: 1;
    color: var(--cratis-text-color);
}

.pv-filter-button {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}

.pv-filter-button.active,
.pv-filter-button:hover,
.pv-filter-icon-button.active {
    background: var(--cratis-surface-hover);
    box-shadow: var(--cratis-focus-ring);
}

/* Filter Icon Button */
.pv-filter-icon-button {
    position: relative;
    appearance: none;
    border: none;
    border-radius: 0.5rem;
    width: var(--pv-toolbar-control-size);
    height: var(--pv-toolbar-control-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    cursor: pointer;
    transition:
        background 180ms ease,
        box-shadow 180ms ease;
}

.pv-filter-icon-button:hover {
    background: var(--cratis-surface-hover);
}

.pv-filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0 0.25rem;
}

/* Filter Dropdown */

.pv-view-toggle {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--cratis-surface-section);
    border: 1px solid var(--cratis-surface-border);
    padding: 0.2rem;
    gap: 0.2rem;
}

.pv-view-toggle button {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    color: var(--cratis-text-color-secondary);
    background: transparent;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}

.pv-view-toggle button.active {
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
}

.pv-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--cratis-surface-section);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 0.6rem;
    padding: 0.25rem 0.5rem;
}

.pv-zoom-controls button {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--cratis-text-color);
    font-size: 1.1rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 120ms ease,
        color 120ms ease;
}

.pv-zoom-controls button:hover {
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
}

.pv-zoom-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pv-zoom-slider {
    width: 80px;
    height: 4px;
    appearance: none;
    background: var(--cratis-surface-border);
    border-radius: 2px;
    cursor: pointer;
}

.pv-zoom-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--cratis-primary-color);
    border: 2px solid var(--cratis-text-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 120ms ease;
}

.pv-zoom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.pv-zoom-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--cratis-primary-color);
    border: 2px solid var(--cratis-text-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.pv-zoom-controls span {
    font-size: 0.75rem;
    color: var(--cratis-text-color-secondary);
    min-width: 3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    transition: background 120ms ease;
}

.pv-zoom-controls span:hover {
    background: var(--cratis-surface-hover);
}

.pv-zoom-level-input {
    width: 3rem;
    font-size: 0.75rem;
    text-align: center;
    background: var(--cratis-surface-ground);
    border: 1px solid var(--cratis-primary-color);
    border-radius: 0.4rem;
    color: var(--cratis-text-color);
    padding: 0.25rem 0.5rem;
    font-variant-numeric: tabular-nums;
    outline: none;
}

.pv-zoom-reset {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pv-dimension-select {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--cratis-text-color-secondary);
}

.pv-dimension-select select {
    background: var(--cratis-surface-ground);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 0.6rem;
    color: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
}

.pv-groups {
    position: relative;
    flex: 1;
    padding: 1.5rem 1.5rem 0;
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    overflow: auto;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    touch-action: pan-x pan-y;
    /* Hide scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.pv-groups::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.pv-groups.pv-panning {
    cursor: grabbing;
    scroll-behavior: auto;
}

.pv-groups:active {
    cursor: grabbing;
}

/* Groups wrapper for grouped mode with axis labels */
.pv-groups-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: transparent;
}

/* Visual background belongs to the scrollable viewport area so it respects container bounds */
.pv-viewport {
    background: radial-gradient(
        circle at 25% 20%,
        var(--cratis-primary-500),
        var(--cratis-surface-ground)
    );
    /* Panning stays with the browser, pinching comes to us: without this a touch device
       resolves a two-finger gesture as its own page zoom and never delivers the moves the
       viewer needs to scale the cards. */
    touch-action: pan-x pan-y;
}

.pv-viewport:focus-visible {
    outline: none;
    /* Both strokes stay inside the clipped viewport; the surface stroke separates the ring from the gradient. */
    box-shadow: inset var(--cratis-focus-ring), inset 0 0 0 5px var(--cratis-surface-ground);
}

/* Paint the public focus ring above the Pixi canvas, fixed to the viewport edge. */
.pv-groups-wrapper > div:has(> .pv-viewport:focus-visible)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset var(--cratis-focus-ring), inset 0 0 0 5px var(--cratis-surface-ground);
}

@media (forced-colors: active) {
    .pv-viewport:focus-visible {
        /* Forced colors suppress shadows; keep the replacement outline inside the clipping edge. */
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }
    .pv-viewport:focus-visible ~ canvas {
        /* Shadows are suppressed in forced colors; keep a visible ring over Pixi. */
        outline: 2px solid Highlight;
        outline-offset: -3px;
    }
}

.pv-groups-grouped {
    flex: 1;
    padding-bottom: 0;
}

.pv-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
    box-shadow: none;
    flex: 0 0 auto;
    transition: background 180ms ease;
}

/* Grouped mode groups need to align cards to bottom and extend full height */
.pv-group-grouped {
    justify-content: flex-end;
    position: relative;
    min-height: 100%; /* Ensure full height for hover */
    width: var(--column-width); /* Fixed width even when empty */
}

/* Zebra striping for grouped mode - every other group gets a lighter background */
.pv-group-grouped:nth-child(even)::before {
    background: rgba(255, 255, 255, 0.03);
}

/* Full-height hover highlight that extends to the top */
.pv-group-grouped::before {
    content: '';
    position: absolute;
    inset: 0;
    top: -100vh; /* Extend way above to ensure it reaches the top */
    background: transparent;
    transition: background 180ms ease;
    pointer-events: none;
    z-index: 0;
}

.pv-group-grouped:hover::before,
.pv-group-grouped.highlighted::before {
    background: var(--cratis-surface-hover);
}

/* Zebra striping hover state - combine with stripe background */
.pv-group-grouped:nth-child(even):hover::before,
.pv-group-grouped:nth-child(even).highlighted::before {
    background: var(--cratis-surface-hover);
}

.pv-group:hover {
    background: transparent;
}

.pv-group.highlighted {
    background: transparent;
}

.pv-group header {
    display: none;
}

.pv-group header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.pv-group header span {
    font-size: 0.75rem;
    color: var(--cratis-text-color-secondary);
    background: var(--cratis-highlight-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.pv-cards {
    display: grid;
    gap: calc(4px * var(--zoom-scale, 1));
    width: var(--column-width, auto);
}

.pv-cards-grouped {
    /* Grid fills left-to-right with fixed columns */
    grid-template-columns: repeat(var(--cards-per-row, 5), 1fr);
    grid-auto-flow: row;
    width: var(--column-width);
}

.pv-cards-grouped .pv-card {
    transform: none;
}

/* Empty placeholder cells in grouped grid */
.pv-card-placeholder {
    visibility: hidden;
    width: var(--card-width);
    height: var(--card-height);
}

/* Axis labels at bottom of grouped view */
.pv-axis-labels {
    display: flex;
    align-items: stretch;
    background: var(--cratis-surface-section);
    border-top: 1px solid var(--cratis-surface-border);
    padding: 0.5rem 0; /* padding-left set dynamically from JS; no right padding to prevent skew */
    gap: 0; /* No extra gap to avoid skew */
    overflow-x: hidden; /* Disable independent scroll - synced via JS */
    flex-shrink: 0;
}

.pv-axis-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    text-align: center;
    cursor: pointer;
    /* Note: opacity transition added later in the file for filter effects */
    transition:
        background 180ms ease,
        border-color 180ms ease;
    flex: 0 0 auto;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
}

/* Zebra striping for axis labels - match the grouped columns */
.pv-axis-label:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.pv-axis-label:hover,
.pv-axis-label.highlighted {
    background: var(--cratis-surface-hover);
}

/* Zebra striping hover/highlight for even labels */
.pv-axis-label:nth-child(even):hover,
.pv-axis-label:nth-child(even).highlighted {
    background: var(--cratis-surface-hover);
}

.pv-axis-label.selected {
    border-color: var(--cratis-primary-color);
    background: var(--cratis-highlight-bg);
}

.pv-axis-label:focus-visible,
.pv-card:focus-visible {
    outline: none;
    border-color: var(--cratis-primary-color);
    box-shadow: var(--cratis-focus-ring);
}

.pv-axis-label-text {
    font-size: 0.75rem;
    color: var(--cratis-text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.pv-axis-label-count {
    font-size: 0.65rem;
    color: var(--cratis-text-color-secondary);
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}

/* Fade and collapse axis labels when switching views */
.pivot-viewer .pv-axis-labels {
    transition:
        opacity 600ms ease,
        max-height 600ms ease,
        padding 600ms ease,
        border-color 600ms ease;
    overflow: hidden;
}
.pivot-viewer .pv-axis-labels.hidden {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: transparent;
    pointer-events: none;
}
.pivot-viewer .pv-axis-labels.visible {
    opacity: 1;
    max-height: 80px;
    pointer-events: auto;
}

/* Fade individual axis labels when filtering groups */
.pv-axis-label {
    transition:
        opacity 600ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.pv-axis-label.filtered-out {
    opacity: 0.3;
}

.pv-groups.pv-groups-collection {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 1.5rem;
    gap: calc(8px * var(--zoom-scale, 1));
    overflow: auto;
}

/* Pause flex reflow during zoom animation for smoother effect */
.pv-groups.pv-zooming {
    pointer-events: none;
}

/* CRITICAL: Freeze collection layout during zoom - prevent any reflow */
.pv-groups.pv-groups-collection.pv-zooming {
    /* Lock the gap to prevent layout shifts */
    gap: 8px !important;
}

.pv-groups.pv-groups-collection.pv-zooming .pv-card {
    /* Prevent cards from resizing/reflowing during zoom */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.pv-groups.pv-groups-collection > div,
.pv-groups.pv-groups-collection > section {
    width: auto;
}

.pv-group-collection {
    display: contents;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.pv-group-collection .pv-cards {
    display: contents;
}

.pv-cards-collection {
    display: contents;
}

.pv-cards-collection .pv-card {
    background: linear-gradient(
        180deg,
        var(--cratis-surface-card),
        var(--cratis-surface-ground)
    );
}

.pv-card {
    border: none;
    text-align: left;
    padding: 0;
    background: linear-gradient(
        180deg,
        var(--cratis-surface-card),
        var(--cratis-surface-ground)
    );
    border-radius: 0.85rem;
    cursor: pointer;
    color: inherit;
    border: 1px solid transparent;
    transition: border-color 160ms ease;
}

.pv-card.selected {
    border-color: var(--cratis-primary-color);
    box-shadow:
        var(--cratis-focus-ring),
        0 8px 20px rgba(0, 0, 0, 0.2);
}

.pv-card-body {
    padding: calc(0.85rem * var(--zoom-scale, 1)) calc(0.95rem * var(--zoom-scale, 1));
    font-size: calc(1rem * var(--zoom-scale, 1));
    overflow: hidden;
}

.pv-card-title {
    font-size: calc(0.95rem * var(--zoom-scale, 1));
    font-weight: 600;
    margin-bottom: calc(0.65rem * var(--zoom-scale, 1));
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-card-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
    gap: calc(0.5rem * var(--zoom-scale, 1));
    font-size: calc(0.8rem * var(--zoom-scale, 1));
    color: var(--cratis-text-color);
    margin-bottom: calc(0.35rem * var(--zoom-scale, 1));
    line-height: 1.3;
}

.pv-card-row dt {
    margin: 0;
    color: var(--cratis-text-color-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-card-row dd {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pv-card-more {
    margin-top: calc(0.4rem * var(--zoom-scale, 1));
    color: var(--cratis-text-color-secondary);
    text-align: right;
    font-size: calc(0.9rem * var(--zoom-scale, 1));
}

.pv-empty {
    width: 100%;
    text-align: center;
    padding: 3rem;
    color: var(--cratis-text-color-secondary);
    font-size: 1.05rem;
}

/* Slide-in detail panel from the right */
.pv-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    background: var(--cratis-surface-overlay);
    border-left: 1px solid var(--cratis-surface-border);
    display: flex;
    flex-direction: column;
    z-index: 14;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
}

.pv-detail-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cratis-surface-border);
    flex-shrink: 0;
}

.pv-detail-panel header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--cratis-text-color);
}

.pv-detail-panel header p {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--cratis-text-color-secondary);
}

.pv-detail-panel header button {
    appearance: none;
    border: none;
    background: var(--cratis-surface-hover);
    color: var(--cratis-text-color);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
}

.pv-detail-panel header button:hover {
    background: var(--cratis-highlight-bg);
}

.pv-detail-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}

.pv-detail-panel section h3 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cratis-text-color-secondary);
}

.pv-detail-panel section + section {
    margin-top: 1.25rem;
}

.pv-detail-panel dl {
    display: grid;
    gap: 0.4rem;
}

.pv-detail-panel dl > div {
    background: var(--cratis-surface-section);
    border-radius: 0.6rem;
    padding: 0.5rem 0.7rem;
}

.pv-detail-panel dt {
    margin: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cratis-text-color-secondary);
}

.pv-detail-panel dd {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--cratis-text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.pv-detail-panel .pv-detail-meta dl {
    grid-template-columns: 1fr 1fr;
}

.pv-detail-panel .pv-detail-causation .pv-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Legacy overlay styles - hidden */
.pv-detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--cratis-maskbg);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
    z-index: 20;
}

.pv-detail {
    width: min(720px, 100%);
    background: var(--cratis-surface-overlay);
    border: 1px solid var(--cratis-surface-border);
    border-radius: 1.25rem;
    padding: 1.75rem;
    max-height: min(80vh, 640px);
    overflow-y: auto;
    color: var(--cratis-text-color);
}

.pv-detail header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.pv-detail header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.pv-detail header p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--cratis-text-color-secondary);
}

.pv-detail header button {
    appearance: none;
    border: none;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--cratis-highlight-bg);
    color: inherit;
    cursor: pointer;
}

.pv-detail section h3 {
    margin-top: 0;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.pv-detail section + section {
    margin-top: 1.25rem;
}

.pv-detail dl {
    display: grid;
    gap: 0.5rem;
}

.pv-detail dl > div {
    background: var(--cratis-surface-section);
    border-radius: 0.75rem;
    padding: 0.55rem 0.75rem;
}

.pv-detail dt {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cratis-text-color-secondary);
}

.pv-detail dd {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: var(--cratis-text-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.pv-detail-meta dl {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.pv-detail-causation .pv-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pv-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--cratis-highlight-bg);
    color: var(--cratis-text-color);
    font-size: 0.8rem;
    border: 1px solid var(--cratis-surface-border);
}

/* Range Histogram Filter */

@media (max-width: 900px) {
    .pv-toolbar {
        flex-wrap: wrap;
        gap: 1rem;
        /* The base rule uses a fixed single-row height. Once controls wrap,
           let the toolbar grow so the second row pushes the canvas down. */
        height: auto;
    }

    .pv-toolbar-right {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .pv-view-toggle {
        order: -1;
    }

    .pv-groups {
        padding: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pivot-viewer,
    .pivot-viewer * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ── ./PivotViewer/components/Spinner.css ─────────────────────────────────────── */
/* Loading Spinner */
.pv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 400px;
}

.pv-loading__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pv-spinner {
  width: 80px;
  height: 80px;
  position: relative;
}

.pv-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
}

.pv-spinner-ring:nth-child(1) {
  border-top-color: var(--cratis-primary-300);
  animation: spinner-rotate 1.5s linear infinite;
}

.pv-spinner-ring:nth-child(2) {
  border-right-color: var(--cratis-primary-400);
  animation: spinner-rotate 1.5s linear infinite;
  animation-delay: -0.1875s;
}

.pv-spinner-ring:nth-child(3) {
  border-bottom-color: var(--cratis-primary-500);
  animation: spinner-rotate 1.5s linear infinite;
  animation-delay: -0.375s;
}

.pv-spinner-ring:nth-child(4) {
  border-left-color: var(--cratis-primary-600);
  animation: spinner-rotate 1.5s linear infinite;
  animation-delay: -0.5625s;
}

.pv-spinner-ring:nth-child(5) {
  border-top-color: var(--cratis-primary-400);
  animation: spinner-rotate 1.5s linear infinite reverse;
  animation-delay: -0.75s;
}

.pv-spinner-ring:nth-child(6) {
  border-right-color: var(--cratis-primary-500);
  animation: spinner-rotate 1.5s linear infinite reverse;
  animation-delay: -0.9375s;
}

.pv-spinner-ring:nth-child(7) {
  border-bottom-color: var(--cratis-primary-300);
  animation: spinner-rotate 1.5s linear infinite reverse;
  animation-delay: -1.125s;
}

.pv-spinner-ring:nth-child(8) {
  border-left-color: var(--cratis-primary-600);
  animation: spinner-rotate 1.5s linear infinite reverse;
  animation-delay: -1.3125s;
}

@keyframes spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── ./SchemaEditor/SchemaEditor.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Was a CSS Module (`SchemaEditor.module.css`). A CSS Module is a *value* import in the JavaScript
   graph, so Node could not load the SchemaEditor subpath at all (Cratis/Components#118) and no
   bundler-free consumer could either. Rewritten as plain, explicitly prefixed class names that ship
   through `@cratis/components/styles` like every other component stylesheet. */

.cratis-schema-editor-navigable-row {
    cursor: pointer;
    transition: background-color 0.15s;
}

.cratis-schema-editor-navigable-row:hover {
    background-color: var(--cratis-surface-hover) !important;
}

.cratis-schema-editor-bottom-border {
    border-bottom: 1px solid var(--cratis-surface-border);
}

/* ── ./TimeMachine/EventsView.css ─────────────────────────────────────── */
/* Events View Container */
.events-view-container {
    position: absolute;
    inset: 0;
    padding: 5rem 2rem 2rem;
    overflow-y: auto;
    background: transparent;
    z-index: 1;
}

/* Timeline customization */
.events-view-timeline {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 0 3rem;
    flex-direction: column;
}

.events-view-scroll-button {
    position: relative;
    margin-right: 0.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--tm-border-subtle);
    background: var(--tm-dark-surface);
    color: var(--tm-text);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    z-index: 5;
    pointer-events: auto;
}

.events-view-scroll-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.events-view-scroll-button:active {
    transform: translateY(0);
}

.events-view-scroll-button--top {
    top: auto;
}

.events-view-scroll-button--bottom {
    bottom: auto;
}

.events-view-scroll-button-wrapper {
    position: sticky;
    display: flex;
    justify-content: flex-end;
    padding-right: 0.5rem;
    pointer-events: none;
    z-index: 5;
    height: 0;
    overflow: visible;
}

.events-view-scroll-button-wrapper--top {
    top: 4.5rem;
}

.events-view-scroll-button-wrapper--bottom {
    bottom: 2.5rem;
}

/* Event Card */
.events-view-event-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    max-width: 380px;
}

.events-view-event-card:hover {
    background: var(--tm-surface-hover);
    border-color: var(--tm-accent-border);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Event Header */
.events-view-event-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tm-border);
}

.events-view-event-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tm-text);
    margin: 0 0 0.5rem 0;
    font-family:
        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
        sans-serif;
}

.events-view-event-timestamp {
    font-size: 0.875rem;
    color: var(--tm-text-muted);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
}

.events-view-event-header--right {
    text-align: right;
}

.events-view-event-name--right,
.events-view-event-timestamp--right {
    text-align: right;
}

/* Event Properties */
.events-view-event-properties {
    margin-top: 1rem;
}

/* Custom Marker */
.events-view-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--tm-accent-bg), rgba(100, 150, 255, 0.1));
    border: 2px solid var(--tm-accent-border);
    border-radius: 50%;
    position: relative;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.events-view-marker:hover {
    background: linear-gradient(135deg, var(--tm-accent-bg-hover), var(--tm-accent-bg));
    border-color: var(--tm-accent-border-hover);
    transform: scale(1.1);
}

.events-view-marker-dot {
    width: 0.75rem;
    height: 0.75rem;
    background: var(--tm-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--tm-accent-glow);
}

.events-view-timeline-event {
    display: grid;
    min-height: 5rem;
    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
    align-items: stretch;
}

.events-view-timeline-separator {
    position: relative;
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.events-view-timeline-connector {
    width: 2px;
    min-height: 3rem;
    flex: 1;
    background: linear-gradient(to bottom, var(--tm-accent-border), var(--tm-accent-bg));
}

.events-view-timeline-content {
    display: flex;
    padding: 0 1.5rem 1.5rem;
    align-items: flex-start;
}

.events-view-timeline-event[data-position='right'] .events-view-timeline-content {
    grid-column: 3;
    justify-content: flex-start;
}

.events-view-timeline-event[data-position='left'] .events-view-timeline-content {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-end;
    text-align: right;
}

.events-view-event-card--left,
.events-view-event-card--right {
    max-width: 380px;
}
.events-view-event-card--left table {
    margin-left: auto;
    direction: rtl;
}
.events-view-event-card--left table td {
    direction: ltr;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .events-view-container,
    .events-view-container * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ── ./TimeMachine/Properties.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.tm-properties-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
    font-size: 13px;
}

.tm-properties-row {
    border-bottom: 1px solid var(--tm-border, rgba(255, 255, 255, 0.1));
}

.tm-properties-label {
    padding: 8px 12px;
    color: var(--tm-text-muted, rgba(255, 255, 255, 0.6));
    font-weight: 500;
    width: 40%;
}

.tm-properties-label--right {
    text-align: right;
}

.tm-properties-value {
    padding: 8px 12px;
    color: var(--tm-text, rgba(255, 255, 255, 0.9));
}

.tm-properties-value--right {
    text-align: right;
}

.tm-properties-null {
    color: var(--tm-text-faint, var(--cratis-text-color-secondary));
}

.tm-properties-boolean-true {
    color: #4ade80;
}

.tm-properties-boolean-false {
    color: #f87171;
}

.tm-properties-number {
    color: #fbbf24;
}

.tm-properties-date {
    color: #60a5fa;
}

.tm-properties-complex {
    color: var(--tm-text-dim, rgba(255, 255, 255, 0.7));
}

/* ── ./TimeMachine/TimeMachine.css ─────────────────────────────────────── */
/* Time Machine Container */
.time-machine {
    /* Color tokens — intentional dark space theme. Override to customize. */
    --tm-bg-deep: #0a0a1a;
    --tm-bg-deepest: #000005;
    --tm-text: rgba(255, 255, 255, 0.9);
    --tm-text-muted: rgba(255, 255, 255, 0.6);
    --tm-text-dim: rgba(255, 255, 255, 0.7);
    --tm-text-faint: rgba(255, 255, 255, 0.4);
    --tm-surface: rgba(255, 255, 255, 0.05);
    --tm-surface-hover: rgba(255, 255, 255, 0.08);
    --tm-surface-active: rgba(255, 255, 255, 0.1);
    --tm-border: rgba(255, 255, 255, 0.1);
    --tm-border-subtle: rgba(255, 255, 255, 0.15);
    --tm-accent: rgba(100, 150, 255, 1);
    --tm-accent-bg: rgba(100, 150, 255, 0.2);
    --tm-accent-bg-hover: rgba(100, 150, 255, 0.4);
    --tm-accent-border: rgba(100, 150, 255, 0.3);
    --tm-accent-border-hover: rgba(100, 150, 255, 0.8);
    --tm-accent-glow: rgba(100, 150, 255, 0.3);
    --tm-dark-surface: rgba(15, 23, 42, 0.75);

    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(
        ellipse at center,
        var(--tm-bg-deep) 0%,
        var(--tm-bg-deepest) 100%
    );
    font-family:
        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto,
        sans-serif;
}

/* View Switcher */
.view-switcher {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: var(--tm-surface);
    padding: 6px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--tm-border);
    z-index: 100;
}

.view-button {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tm-text-muted);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-button:hover {
    background: var(--tm-surface-active);
    color: var(--tm-text);
}

.view-button.active {
    background: var(--tm-accent-bg);
    color: var(--tm-accent);
    box-shadow: 0 0 15px var(--tm-accent-glow);
}

.view-button i {
    font-size: 20px;
}

/* Starfield Background */
.time-machine-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    perspective: 500px;
    perspective-origin: 50% 50%;
}

.stars {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: transparent;
    transform-style: preserve-3d;
    animation: starfield 16s linear infinite;
    box-shadow:
    /* Layer 1 - close stars */
        24vw -15vh 0 0px rgba(255, 255, 255, 0.9),
        -32vw 28vh 0 0px rgba(255, 255, 255, 0.8),
        45vw 35vh 0 0px rgba(255, 255, 255, 0.7),
        -18vw -40vh 0 0px rgba(255, 255, 255, 0.9),
        38vw -25vh 0 0px rgba(255, 255, 255, 0.8),
        -42vw 15vh 0 0px rgba(255, 255, 255, 0.7),
        12vw 42vh 0 0px rgba(255, 255, 255, 0.9),
        -28vw -18vh 0 0px rgba(255, 255, 255, 0.8),
        48vw 8vh 0 0px rgba(255, 255, 255, 0.7),
        -15vw 38vh 0 0px rgba(255, 255, 255, 0.9),
        32vw -42vh 0 0px rgba(255, 255, 255, 0.8),
        -45vw -8vh 0 0px rgba(255, 255, 255, 0.7),
        8vw -35vh 0 0px rgba(255, 255, 255, 0.9),
        -38vw 42vh 0 0px rgba(255, 255, 255, 0.8),
        42vw 18vh 0 0px rgba(255, 255, 255, 0.7),
        -8vw -28vh 0 0px rgba(255, 255, 255, 0.9),
        28vw 45vh 0 0px rgba(255, 255, 255, 0.8),
        -48vw 25vh 0 0px rgba(255, 255, 255, 0.7),
        15vw -8vh 0 0px rgba(255, 255, 255, 0.9),
        -22vw 12vh 0 0px rgba(255, 255, 255, 0.8);
}

.stars-2 {
    animation: starfield 16s linear infinite;
    animation-delay: -5.33s;
    box-shadow:
    /* Layer 2 - medium stars */
        -12vw 22vh 0 0px rgba(255, 255, 255, 0.9),
        35vw -32vh 0 0px rgba(255, 255, 255, 0.8),
        -40vw -15vh 0 0px rgba(255, 255, 255, 0.7),
        22vw 40vh 0 0px rgba(255, 255, 255, 0.9),
        -25vw -35vh 0 0px rgba(255, 255, 255, 0.8),
        40vw 12vh 0 0px rgba(255, 255, 255, 0.7),
        -35vw 32vh 0 0px rgba(255, 255, 255, 0.9),
        18vw -22vh 0 0px rgba(255, 255, 255, 0.8),
        -10vw 45vh 0 0px rgba(255, 255, 255, 0.7),
        45vw -10vh 0 0px rgba(255, 255, 255, 0.9),
        -30vw -42vh 0 0px rgba(255, 255, 255, 0.8),
        5vw 30vh 0 0px rgba(255, 255, 255, 0.7),
        -45vw 5vh 0 0px rgba(255, 255, 255, 0.9),
        30vw 22vh 0 0px rgba(255, 255, 255, 0.8),
        -20vw -12vh 0 0px rgba(255, 255, 255, 0.7),
        48vw -38vh 0 0px rgba(255, 255, 255, 0.9),
        -5vw 18vh 0 0px rgba(255, 255, 255, 0.8),
        25vw -45vh 0 0px rgba(255, 255, 255, 0.7),
        -48vw 38vh 0 0px rgba(255, 255, 255, 0.9),
        10vw -5vh 0 0px rgba(255, 255, 255, 0.8);
}

.stars-3 {
    animation: starfield 16s linear infinite;
    animation-delay: -10.66s;
    box-shadow:
    /* Layer 3 - far stars */
        18vw -28vh 0 0px rgba(255, 255, 255, 0.9),
        -28vw 35vh 0 0px rgba(255, 255, 255, 0.8),
        42vw 25vh 0 0px rgba(255, 255, 255, 0.7),
        -15vw -45vh 0 0px rgba(255, 255, 255, 0.9),
        35vw -18vh 0 0px rgba(255, 255, 255, 0.8),
        -42vw 8vh 0 0px rgba(255, 255, 255, 0.7),
        8vw 48vh 0 0px rgba(255, 255, 255, 0.9),
        -35vw -25vh 0 0px rgba(255, 255, 255, 0.8),
        48vw -5vh 0 0px rgba(255, 255, 255, 0.7),
        -8vw 28vh 0 0px rgba(255, 255, 255, 0.9),
        25vw -48vh 0 0px rgba(255, 255, 255, 0.8),
        -48vw -18vh 0 0px rgba(255, 255, 255, 0.7),
        5vw -38vh 0 0px rgba(255, 255, 255, 0.9),
        -25vw 48vh 0 0px rgba(255, 255, 255, 0.8),
        38vw 5vh 0 0px rgba(255, 255, 255, 0.7),
        -18vw -32vh 0 0px rgba(255, 255, 255, 0.9),
        32vw 38vh 0 0px rgba(255, 255, 255, 0.8),
        -38vw 18vh 0 0px rgba(255, 255, 255, 0.7),
        12vw -15vh 0 0px rgba(255, 255, 255, 0.9),
        -32vw 5vh 0 0px rgba(255, 255, 255, 0.8);
}

@keyframes starfield {
    0% {
        transform: translateZ(-600px);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateZ(500px);
        opacity: 0;
    }
}

/* Viewport for 3D Windows */
.time-machine-viewport {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: center 25%;
    z-index: 1;
    box-sizing: border-box;
}

.windows-container {
    position: relative;
    width: 60%;
    max-width: 700px;
    height: 55%;
    max-height: 500px;
    transform-style: preserve-3d;
}

/* Individual Version Window */
.version-window {
    position: absolute;
    inset: 0;
    background: transparent;
    overflow: visible;
    cursor: pointer;
    transform: translateZ(calc(var(--z-offset) * 1px))
        translateY(calc(var(--depth) * -35px)) scale(var(--scale));
    opacity: var(--opacity);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    perspective: 1500px;
}

.version-window-inner {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(100, 100, 255, 0.1);
}

.version-window.flipped .version-window-inner {
    transform: rotateY(180deg);
}

.version-window-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: inherit;
    background: linear-gradient(180deg, #3a3a4a 0%, #2a2a3a 2%, #1e1e28 100%);
    backface-visibility: hidden;
    overflow: hidden;
    pointer-events: auto;
}

.version-window-face--back {
    transform: rotateY(180deg);
    background: linear-gradient(180deg, #262638 0%, #1b1b27 100%);
}

.version-window.flipped .version-window-face--front {
    pointer-events: none;
}

.version-window:not(.flipped) .version-window-face--back {
    pointer-events: none;
}

.version-window.active .version-window-inner {
    box-shadow:
        0 0 0 2px rgba(100, 150, 255, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(100, 150, 255, 0.2);
}

.version-window:hover:not(.active) .version-window-inner {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 25px 70px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(100, 100, 255, 0.15);
}

/* Window Chrome (Title Bar) */
.window-chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    background: linear-gradient(180deg, #4a4a5a 0%, #3a3a4a 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    gap: 12px;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #666;
}

.control.close {
    background: #ff5f57;
}

.control.minimize {
    background: #ffbd2e;
}

.control.maximize {
    background: #28ca41;
}

.window-title {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.window-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.window-flip-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--tm-border-subtle);
    background: linear-gradient(
        180deg,
        rgba(120, 130, 220, 0.25) 0%,
        rgba(60, 70, 140, 0.25) 100%
    );
    color: var(--tm-text);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.window-flip-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    border-color: rgba(120, 160, 255, 0.4);
}

.window-flip-button:active {
    transform: translateY(0);
}

.window-flip-button:focus-visible {
    outline: 2px solid rgba(120, 160, 255, 0.85);
    outline-offset: 2px;
}

.window-flip-button i {
    font-size: 14px;
}

.window-chrome--back {
    background: linear-gradient(180deg, #35354a 0%, #2b2b3c 100%);
}

/* Window Content */
.window-content {
    height: calc(100% - 36px);
    padding: 20px;
    overflow: auto;
    background: linear-gradient(180deg, #1e1e28 0%, #16161e 100%);
    color: #e0e0e0;
}

.window-content--events {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.snapshot-event-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.snapshot-event {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.snapshot-event-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.snapshot-event-name {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}

.snapshot-event-timestamp {
    font-size: 0.75rem;
    color: var(--tm-text-muted);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
}

/* Timeline */
.timeline {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.timeline-track {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 0;
}

.timeline-track::-webkit-scrollbar {
    display: none;
}

/* Timeline Entry */
.timeline-entry {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transform-origin: right center;
    transform: scale(var(--magnification, 1));
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.timeline-tick {
    width: calc(20px * var(--magnification, 1));
    height: calc(2px * var(--magnification, 1));
    background: var(--tm-text-faint);
    border-radius: 1px;
    transition:
        width 0.15s ease,
        height 0.15s ease,
        background 0.15s ease;
}

.timeline-entry:focus-visible {
    outline: none;
    border-radius: var(--cratis-border-radius);
    box-shadow: var(--cratis-focus-ring);
}

.timeline-entry.selected .timeline-tick {
    background: #6a9fff;
    box-shadow: 0 0 8px rgba(106, 159, 255, 0.6);
}

.timeline-entry.hovered .timeline-tick {
    background: var(--tm-text);
    box-shadow: 0 0 6px var(--tm-surface-active);
}

.timeline-label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    opacity: 0;
    transform: translateX(10px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.timeline-entry.hovered .timeline-label,
.timeline-entry.selected .timeline-label {
    opacity: 1;
    transform: translateX(0);
}

.timeline-date {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.timeline-time {
    font-size: 10px;
    color: var(--tm-text-dim);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .timeline-entry,
    .timeline-tick,
    .timeline-label,
    .time-machine * {
        transition: none !important;
        animation: none !important;
    }
}

/* Navigation Controls */
.navigation-controls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 10;
}

.nav-button {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(
        180deg,
        rgba(100, 100, 130, 0.8) 0%,
        rgba(60, 60, 90, 0.8) 100%
    );
    color: white;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
    backdrop-filter: blur(10px);
}

.nav-button:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow:
        0 6px 25px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 20px rgba(100, 150, 255, 0.3);
}

.nav-button:active:not(:disabled) {
    transform: scale(0.95);
}

.nav-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .time-machine-viewport {
        width: calc(100% - 120px);
    }

    .timeline {
        width: 100px;
    }

    .windows-container {
        width: 85%;
        height: 60%;
    }

    .nav-button {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* ── ./Toolbar/Toolbar.css ─────────────────────────────────────── */
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* ── Toolbar container ───────────────────────────────────────────────────── */
.toolbar,
.toolbar-group {
    background: var(--cratis-surface-card);
    border: 1px solid var(--cratis-surface-border);
    box-shadow: var(--cratis-shadow-overlay);
}

/* ── Toolbar button ──────────────────────────────────────────────────────── */
.toolbar-button {
    color: var(--cratis-text-color-secondary);
    background: transparent;
    border: none;
    transition:
        background 0.15s,
        color 0.15s;
}

.toolbar-button:hover {
    background: var(--cratis-surface-100);
    color: var(--cratis-text-color);
}

.toolbar-button--active {
    background: var(--cratis-action-background);
    color: var(--cratis-action-text);
}

.toolbar-button--active:hover {
    background: var(--cratis-action-background-hover);
    color: var(--cratis-action-text);
}

.toolbar-button :where([data-cratis-part='icon']:not([hidden])) {
    display: flex;
    align-items: center;
    line-height: 1;
}

.toolbar-button--draggable {
    cursor: grab;
}

.toolbar-button--draggable:active {
    cursor: grabbing;
}

.toolbar-button__text {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* ── Toolbar project name label ──────────────────────────────────────────── */
.toolbar-project-name {
    padding: 0 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cratis-text-color);
    white-space: nowrap;
}

/* Context sections and group slots resize alike. Only transitioning modifiers clip contents;
   settled panels can extend beyond the section bounds. */
.toolbar-section,
.toolbar-slot-section {
    position: relative;
    transition:
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-section--transitioning,
.toolbar-slot-section--transitioning {
    overflow: hidden;
}

/*
 * Every context is absolutely stacked at the top-left of the section.
 * Only the active one is visible; the others fade out and lose pointer events.
 */
.toolbar-context {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.2s ease;
}

.toolbar-context--active {
    opacity: 1;
    pointer-events: auto;
}

.toolbar-context--inactive {
    opacity: 0;
    pointer-events: none;
}

/* ── Toolbar separator ───────────────────────────────────────────────────── */

.toolbar-separator {
    background: var(--cratis-surface-border);
    flex-shrink: 0;
    align-self: stretch;
}

/* Separator inside a vertical toolbar — renders as a horizontal rule */
.toolbar-separator--in-vertical {
    height: 1px;
    margin: 0.125rem 0.25rem;
}

/* Separator inside a horizontal toolbar — renders as a vertical rule */
.toolbar-separator--in-horizontal {
    width: 1px;
    margin: 0.25rem 0.125rem;
}

/* ── Toolbar fan-out item ────────────────────────────────────────────────── */

/*
 * The wrapper provides the positioning context for the absolutely-placed panel.
 */
.toolbar-fanout-item {
    position: relative;
}

/*
 * The fan-out panel is a floating pill that mirrors the Toolbar container style.
 * When collapsed, it's hidden. When expanded, it appears elevated at the same
 * position as the trigger button, with the trigger button as the first item.
 * Vertically centered with where the collapsed button would be.
 */
.toolbar-fanout-panel {
    position: absolute;
    top: 50%;
    left: calc(-0.5rem - 1px);
    transform: translateY(-50%);
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--cratis-surface-card);
    border: 1px solid var(--cratis-surface-border);
    box-shadow: var(--cratis-shadow-overlay);
    border-radius: 1rem;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 1rem);
    transition:
        clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}

/* Panel fans out to the left — reveal animates right → left */
.toolbar-fanout-panel--left {
    left: auto;
    right: calc(-0.5rem - 1px);
    clip-path: inset(0 0 0 100% round 1rem);
}

.toolbar-fanout-panel--up {
    top: auto;
    right: auto;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    clip-path: inset(100% 0 0 0 round 1rem);
}

.toolbar-fanout-panel--down {
    top: calc(100% + 0.5rem);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    clip-path: inset(0 0 100% 0 round 1rem);
}

/* Expanded state — fully visible, pointer events restored */
.toolbar-fanout-panel--visible {
    clip-path: inset(0 0 0 0 round 1rem);
    opacity: 1;
    pointer-events: auto;
}

/* A settled panel must stop clipping tooltips; restore the inset before the close wipe. */
.toolbar-fanout-panel--settled {
    clip-path: none;
}

/* ── Toolbar folder ──────────────────────────────────────────────────────── */

.toolbar-folder-item {
    position: relative;
}

/*
 * Folder panel is a floating grid that grows naturally with item count.
 * The trigger stays in place while the panel animates in/out.
 */
.toolbar-folder-panel {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.75rem);
    transform: translateY(-50%) scale(0.92);
    transform-origin: left center;
    display: grid;
    grid-auto-rows: minmax(2.5rem, auto);
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--cratis-surface-card);
    border: 1px solid var(--cratis-surface-border);
    box-shadow: var(--cratis-shadow-overlay);
    border-radius: 1rem;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 100% 0 0 round 1rem);
    transition:
        clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}

.toolbar-folder-panel--left {
    left: auto;
    right: calc(100% + 0.75rem);
    transform-origin: right center;
    clip-path: inset(0 0 0 100% round 1rem);
}

.toolbar-folder-panel--visible {
    clip-path: none;
    transform: translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* List-mode folder panel — vertical stack instead of a grid */
.toolbar-folder-panel--list {
    display: flex;
    flex-direction: column;
    min-width: 10rem;
}

/* ── Toolbar button — list mode ──────────────────────────────────────────── */

/*
 * Inside a list-mode folder the button fills the available width and renders
 * its icon and title label side by side, left-aligned.
 */
.toolbar-button--list {
    width: 100%;
    justify-content: flex-start;
}

.toolbar-button__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: inherit;
    white-space: nowrap;
}

/* ── Toolbar group ───────────────────────────────────────────────────────── */

/*
 * When a Toolbar contains ToolbarGroup children it becomes a transparent
 * layout wrapper — each group renders as its own pill.
 */
.toolbar:has(> .toolbar-group) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 0.5rem;
}

/* ToolbarGroup slots use the section transition above. */

@keyframes toolbar-slot-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes toolbar-slot-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*
 * Incoming slot content — fades in on mount.
 * Duration matches the toolbar-context opacity transition (0.2s ease).
 */
.toolbar-slot-incoming {
    position: absolute;
    top: 0;
    left: 0;
    animation: toolbar-slot-fade-in 0.2s ease forwards;
}

/*
 * Outgoing slot content — fades out, then React unmounts it after
 * the animation completes.
 */
.toolbar-slot-outgoing {
    position: absolute;
    top: 0;
    left: 0;
    animation: toolbar-slot-fade-out 0.2s ease forwards;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .toolbar,
    .toolbar-button,
    .toolbar-section,
    .toolbar-context,
    .toolbar-fanout-panel,
    .toolbar-folder-panel,
    .toolbar-slot-section,
    .toolbar-slot-incoming,
    .toolbar-slot-outgoing {
        transition: none !important;
        animation: none !important;
    }

    .toolbar-fanout-panel--visible {
        clip-path: none !important;
    }
}


}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/*
 * Optional baseline scheme behavior. Light root defaults live in tokens.css so a custom product can
 * import tokens + structure and override the seam directly. This file adds document/subtree color,
 * scoped light defaults, automatic/explicit dark values, and forced-colors values.
 */
:root,
.cratis-theme {
    color: var(--cratis-text-color);
    background-color: var(--cratis-surface-ground);
}

/* A themed subtree needs its own light defaults because tokens.css is rooted at :root.
   Explicit light wins over ambient/root dark; an explicitly dark subtree still wins. */
.cratis-theme,
:root.cratis-light,
:root.cratis-dark.cratis-light,
:root.cratis-light .cratis-theme:not(.cratis-dark),
.cratis-theme.cratis-light,
.cratis-dark .cratis-theme.cratis-light {
    color-scheme: light;
    --cratis-primary-color: #2563eb;
    --cratis-primary-color-text: #ffffff;
    --cratis-primary-300: #93c5fd;
    --cratis-primary-400: #60a5fa;
    --cratis-primary-500: #3b82f6;
    --cratis-primary-600: #2563eb;
    --cratis-primary-600-text: #ffffff;
    --cratis-action-background: #2563eb;
    --cratis-action-background-hover: #1d4ed8;
    --cratis-action-background-active: #1e40af;
    --cratis-action-text: #ffffff;
    --cratis-green-500: #16a34a;
    --cratis-orange-500: #d97706;
    --cratis-red-500: #dc2626;
    --color-error: #c00;
    --color-error-bg: #fee;
    --cratis-info-background: #0369a1;
    --cratis-info-text: #ffffff;
    --cratis-success-background: #15803d;
    --cratis-success-text: #ffffff;
    --cratis-warning-background: #c2410c;
    --cratis-warning-text: #ffffff;
    --cratis-danger-background: #b91c1c;
    --cratis-danger-text: #ffffff;
    --cratis-surface-0: #ffffff;
    --cratis-surface-100: #f3f4f6;
    --cratis-surface-ground: #f9fafb;
    --cratis-surface-section: #ffffff;
    --cratis-surface-card: #ffffff;
    --cratis-surface-overlay: #ffffff;
    --cratis-surface-hover: #f6f9fc;
    --cratis-surface-border: #dfe7ef;
    --cratis-control-background: #ffffff;
    --cratis-control-border: #8492a6;
    --cratis-text-color: #4b5563;
    --cratis-text-color-secondary: #6b7280;
    --cratis-highlight-bg: #eff6ff;
    --cratis-highlight-text-color: #1d4ed8;
    --cratis-maskbg: rgb(0 0 0 / 40%);
    --cratis-border-radius: 6px;
    --cratis-control-height: 2.75rem;
    --cratis-control-height-small: 2.25rem;
    --cratis-control-height-large: 3.25rem;
    --cratis-disabled-opacity: 0.55;
    --cratis-focus-ring: 0 0 0 3px #2563eb;
    --cratis-shadow-subtle: 0 1px 2px rgb(0 0 0 / 5%);
    --cratis-shadow-overlay: 0 2px 12px rgb(0 0 0 / 10%);
    --cratis-shadow-dialog: 0 1rem 3rem rgb(0 0 0 / 22%);
    --cratis-shadow-toast: 0 2px 12px rgb(0 0 0 / 10%);
}

/* Arc draws an error in var(--color-error, #c00) on var(--color-error-bg, #fee): a field's validation
   message and the command exception panel. Those fallbacks are 2.5:1 / 2.47:1 on the dark surfaces, so
   the dark schemes below map the pair to a lighter red on a deep red. Every explicit-light selector in
   the shared light block above restores the Arc fallbacks, including a light subtree under a root that
   is dark only because of the system setting. */
:root.cratis-dark,
.cratis-dark .cratis-theme,
.cratis-theme.cratis-dark {
    color-scheme: dark;
    --cratis-primary-color: #60a5fa;
    --cratis-primary-color-text: #030712;
    --cratis-primary-600-text: #ffffff;
    --cratis-action-background: #60a5fa;
    --cratis-action-background-hover: #93c5fd;
    --cratis-action-background-active: #bfdbfe;
    --cratis-action-text: #030712;
    --cratis-red-500: #f87171;
    --color-error: var(--cratis-red-500);
    --color-error-bg: #450a0a;
    --cratis-info-background: #38bdf8;
    --cratis-info-text: #082f49;
    --cratis-success-background: #4ade80;
    --cratis-success-text: #052e16;
    --cratis-warning-background: #fb923c;
    --cratis-warning-text: #431407;
    --cratis-danger-background: #f87171;
    --cratis-danger-text: #450a0a;
    --cratis-surface-0: #111827;
    --cratis-surface-100: #374151;
    --cratis-surface-ground: #111827;
    --cratis-surface-section: #1f2937;
    --cratis-surface-card: #1f2937;
    --cratis-surface-overlay: #1f2937;
    --cratis-surface-hover: rgb(255 255 255 / 3%);
    --cratis-surface-border: rgb(255 255 255 / 10%);
    --cratis-control-background: #111827;
    --cratis-control-border: #64748b;
    --cratis-text-color: rgb(255 255 255 / 87%);
    --cratis-text-color-secondary: rgb(255 255 255 / 60%);
    --cratis-highlight-bg: rgb(96 165 250 / 16%);
    --cratis-highlight-text-color: rgb(255 255 255 / 87%);
    --cratis-maskbg: rgb(0 0 0 / 40%);
    --cratis-focus-ring: 0 0 0 3px #93c5fd;
    --cratis-shadow-subtle: none;
    --cratis-shadow-overlay:
        0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%),
        0 1px 10px rgb(0 0 0 / 12%);
    --cratis-shadow-dialog:
        0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%),
        0 9px 46px 8px rgb(0 0 0 / 12%);
    --cratis-shadow-toast: none;
}

@media (prefers-color-scheme: dark) {
    :root:not(.cratis-light),
    .cratis-theme:not(.cratis-light) {
        color-scheme: dark;
        --cratis-primary-color: #60a5fa;
        --cratis-primary-color-text: #030712;
        --cratis-action-background: #60a5fa;
        --cratis-action-background-hover: #93c5fd;
        --cratis-action-background-active: #bfdbfe;
        --cratis-action-text: #030712;
        --cratis-red-500: #f87171;
        --color-error: var(--cratis-red-500);
        --color-error-bg: #450a0a;
        --cratis-info-background: #38bdf8;
        --cratis-info-text: #082f49;
        --cratis-success-background: #4ade80;
        --cratis-success-text: #052e16;
        --cratis-warning-background: #fb923c;
        --cratis-warning-text: #431407;
        --cratis-danger-background: #f87171;
        --cratis-danger-text: #450a0a;
        --cratis-surface-0: #111827;
        --cratis-surface-100: #374151;
        --cratis-surface-ground: #111827;
        --cratis-surface-section: #1f2937;
        --cratis-surface-card: #1f2937;
        --cratis-surface-overlay: #1f2937;
        --cratis-surface-hover: rgb(255 255 255 / 3%);
        --cratis-surface-border: rgb(255 255 255 / 10%);
        --cratis-control-background: #111827;
        --cratis-control-border: #64748b;
        --cratis-text-color: rgb(255 255 255 / 87%);
        --cratis-text-color-secondary: rgb(255 255 255 / 60%);
        --cratis-highlight-bg: rgb(96 165 250 / 16%);
        --cratis-highlight-text-color: rgb(255 255 255 / 87%);
        --cratis-maskbg: rgb(0 0 0 / 40%);
        --cratis-focus-ring: 0 0 0 3px #93c5fd;
        --cratis-shadow-subtle: none;
        --cratis-shadow-overlay:
            0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px rgb(0 0 0 / 14%),
            0 1px 10px rgb(0 0 0 / 12%);
        --cratis-shadow-dialog:
            0 11px 15px -7px rgb(0 0 0 / 20%), 0 24px 38px 3px rgb(0 0 0 / 14%),
            0 9px 46px 8px rgb(0 0 0 / 12%);
        --cratis-shadow-toast: none;
    }
}

@media (forced-colors: active) {
    :root,
    .cratis-theme,
    :root.cratis-light,
    :root.cratis-dark.cratis-light,
    :root.cratis-light .cratis-theme:not(.cratis-dark),
    .cratis-theme.cratis-light,
    .cratis-dark .cratis-theme.cratis-light,
    :root.cratis-dark,
    .cratis-dark .cratis-theme,
    .cratis-theme.cratis-dark,
    :root:not(.cratis-light),
    .cratis-theme:not(.cratis-light) {
        --cratis-primary-color: Highlight;
        --cratis-primary-color-text: HighlightText;
        --cratis-primary-600-text: HighlightText;
        --cratis-action-background: Highlight;
        --cratis-action-text: HighlightText;
        --cratis-surface-card: Canvas;
        --cratis-surface-overlay: Canvas;
        --cratis-surface-border: CanvasText;
        --cratis-control-background: Canvas;
        --cratis-control-border: CanvasText;
        --cratis-text-color: CanvasText;
        --cratis-text-color-secondary: CanvasText;
        --cratis-focus-ring: 0 0 0 2px Highlight;
    }
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/*
 * The PrimeReact 10 theme palette, carried forward as Ante's own.
 *
 * PrimeReact 10's stylesheet themes published a set of custom properties on `:root`
 * (`--surface-ground`, `--surface-card`, `--surface-border`, `--text-color`, `--primary-color`,
 * the `--surface-0...900` and `--gray/--blue/--red-...` scales), and this application's CSS is
 * written against them, per the project's component styling convention. `@cratis/components`
 * shipped this file as `@cratis/components/primereact-v10-palette` through version 3; Components 4
 * removed PrimeReact theming entirely, so the palette moves here rather than disappearing.
 *
 * It is vendored verbatim from `@cratis/components@3.5.0`. The semantic names still resolve from
 * the active preset's `--p-*` tokens with a Lara value behind them, and those tokens are still
 * emitted since this application hands `PrimeReactProvider` the Lara preset in
 * `.frontend/primeReactTheme.ts`.
 */

.cratis-dark {
    color-scheme: dark;
}

:root {
    /* Semantic surfaces and text — follow the preset, fall back to Lara */
    --surface-ground: light-dark(#f9fafb, #111827);
    --surface-section: light-dark(#ffffff, #111827);
    --surface-card: var(--p-content-background, light-dark(#ffffff, #1f2937));
    --surface-overlay: var(--p-overlay-modal-background, light-dark(#ffffff, #1f2937));
    --surface-border: var(--p-content-border-color, light-dark(#dfe7ef, rgba(255, 255, 255, 0.1)));
    --surface-hover: var(--p-content-hover-background, light-dark(#f6f9fc, rgba(255, 255, 255, 0.03)));
    --text-color: var(--p-text-color, light-dark(#4b5563, rgba(255, 255, 255, 0.87)));
    --text-color-secondary: var(--p-text-muted-color, light-dark(#6b7280, rgba(255, 255, 255, 0.6)));
    --primary-color: var(--p-primary-color, light-dark(#3b82f6, #60a5fa));
    --primary-color-text: var(--p-primary-contrast-color, light-dark(#ffffff, #030712));
    --highlight-bg: var(--p-highlight-background, light-dark(#eff6ff, rgba(96, 165, 250, 0.16)));
    --highlight-text-color: var(--p-highlight-color, light-dark(#1d4ed8, rgba(255, 255, 255, 0.87)));
    --focus-ring: var(--p-focus-ring-shadow, 0 0 0 0.2rem light-dark(#bfdbfe, rgba(96, 165, 250, 0.2)));
    --maskbg: var(--p-mask-background, rgba(0, 0, 0, 0.4));
    --border-radius: var(--p-content-border-radius, 6px);

    /* Spacing the v10 themes published alongside the palette */
    --content-padding: 1.25rem;
    --inline-spacing: 0.5rem;

    /* The v9 aliases the v10 themes still carried */
    --surface-a: var(--surface-card);
    --surface-b: var(--surface-ground);
    --surface-c: var(--surface-hover);
    --surface-d: var(--surface-border);
    --surface-e: var(--surface-overlay);
    --surface-f: var(--surface-card);

    /* Surface scale — inverted in the dark scheme, as the v10 dark themes had it */
    --surface-0: light-dark(#ffffff, #111827);
    --surface-50: light-dark(#f9fafb, #1f2937);
    --surface-100: light-dark(#f3f4f6, #374151);
    --surface-200: light-dark(#e5e7eb, #4b5563);
    --surface-300: light-dark(#d1d5db, #6b7280);
    --surface-400: #9ca3af;
    --surface-500: light-dark(#6b7280, #d1d5db);
    --surface-600: light-dark(#4b5563, #e5e7eb);
    --surface-700: light-dark(#374151, #f3f4f6);
    --surface-800: light-dark(#1f2937, #f9fafb);
    --surface-900: light-dark(#111827, #ffffff);

    /* Primary scale */
    --primary-50: light-dark(#f5f9ff, #f7fbff);
    --primary-100: light-dark(#d0e1fd, #d9e9fe);
    --primary-200: light-dark(#abc9fb, #bbd8fd);
    --primary-300: light-dark(#85b2f9, #9cc7fc);
    --primary-400: light-dark(#609af8, #7eb6fb);
    --primary-500: light-dark(#3b82f6, #60a5fa);
    --primary-600: light-dark(#326fd1, #528cd5);
    --primary-700: light-dark(#295bac, #4374af);
    --primary-800: light-dark(#204887, #355b8a);
    --primary-900: light-dark(#183462, #264264);

    /* Gray scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Blue scale */
    --blue-50: #f5f9ff;
    --blue-100: #d0e1fd;
    --blue-200: #abc9fb;
    --blue-300: #85b2f9;
    --blue-400: #609af8;
    --blue-500: #3b82f6;
    --blue-600: #326fd1;
    --blue-700: #295bac;
    --blue-800: #204887;
    --blue-900: #183462;

    /* Green scale */
    --green-50: #f4fcf7;
    --green-100: #caf1d8;
    --green-200: #a0e6ba;
    --green-300: #76db9b;
    --green-400: #4cd07d;
    --green-500: #22c55e;
    --green-600: #1da750;
    --green-700: #188a42;
    --green-800: #136c34;
    --green-900: #0e4f26;

    /* Yellow scale */
    --yellow-50: #fefbf3;
    --yellow-100: #faedc4;
    --yellow-200: #f6de95;
    --yellow-300: #f2d066;
    --yellow-400: #eec137;
    --yellow-500: #eab308;
    --yellow-600: #c79807;
    --yellow-700: #a47d06;
    --yellow-800: #816204;
    --yellow-900: #5e4803;

    /* Cyan scale */
    --cyan-50: #f3fbfd;
    --cyan-100: #c3edf5;
    --cyan-200: #94e0ed;
    --cyan-300: #65d2e4;
    --cyan-400: #35c4dc;
    --cyan-500: #06b6d4;
    --cyan-600: #059bb4;
    --cyan-700: #047f94;
    --cyan-800: #036475;
    --cyan-900: #024955;

    /* Pink scale */
    --pink-50: #fef6fa;
    --pink-100: #fad3e7;
    --pink-200: #f7b0d3;
    --pink-300: #f38ec0;
    --pink-400: #f06bac;
    --pink-500: #ec4899;
    --pink-600: #c93d82;
    --pink-700: #a5326b;
    --pink-800: #822854;
    --pink-900: #5e1d3d;

    /* Indigo scale */
    --indigo-50: #f7f7fe;
    --indigo-100: #dadafc;
    --indigo-200: #bcbdf9;
    --indigo-300: #9ea0f6;
    --indigo-400: #8183f4;
    --indigo-500: #6366f1;
    --indigo-600: #5457cd;
    --indigo-700: #4547a9;
    --indigo-800: #363885;
    --indigo-900: #282960;

    /* Teal scale */
    --teal-50: #f3fbfb;
    --teal-100: #c7eeea;
    --teal-200: #9ae0d9;
    --teal-300: #6dd3c8;
    --teal-400: #41c5b7;
    --teal-500: #14b8a6;
    --teal-600: #119c8d;
    --teal-700: #0e8174;
    --teal-800: #0b655b;
    --teal-900: #084a42;

    /* Orange scale */
    --orange-50: #fff8f3;
    --orange-100: #feddc7;
    --orange-200: #fcc39b;
    --orange-300: #fba86f;
    --orange-400: #fa8e42;
    --orange-500: #f97316;
    --orange-600: #d46213;
    --orange-700: #ae510f;
    --orange-800: #893f0c;
    --orange-900: #642e09;

    /* Blue-gray scale */
    --bluegray-50: #f7f8f9;
    --bluegray-100: #dadee3;
    --bluegray-200: #bcc3cd;
    --bluegray-300: #9fa9b7;
    --bluegray-400: #818ea1;
    --bluegray-500: #64748b;
    --bluegray-600: #556376;
    --bluegray-700: #465161;
    --bluegray-800: #37404c;
    --bluegray-900: #282e38;

    /* Purple scale */
    --purple-50: #fbf7ff;
    --purple-100: #ead6fd;
    --purple-200: #dab6fc;
    --purple-300: #c996fa;
    --purple-400: #b975f9;
    --purple-500: #a855f7;
    --purple-600: #8f48d2;
    --purple-700: #763cad;
    --purple-800: #5c2f88;
    --purple-900: #432263;

    /* Red scale */
    --red-50: #fff5f5;
    --red-100: #ffd0ce;
    --red-200: #ffaca7;
    --red-300: #ff8780;
    --red-400: #ff6259;
    --red-500: #ff3d32;
    --red-600: #d9342b;
    --red-700: #b32b23;
    --red-800: #8c221c;
    --red-900: #661814;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/*
 * Effects for the `data-display-*` attributes written by applyInitialDisplayPreferences.ts /
 * useDisplayPreferences.ts (Cratis/Ante#20). Every rule here targets a real, load-bearing property -
 * either the app's own root font size (which every rem-based measurement in this app, and in
 * @cratis/components, scales from) or a `--cratis-*` custom property `tokens.css` documents as a
 * "stable semantic seam" products are meant to override - never a bespoke, unconsumed declaration.
 */

/* Text size - scales the document root font size, and with it every rem-based control, spacing and
   font-size throughout onboarding and @cratis/components. */
:root[data-display-text-size='large'] {
    font-size: 14px;
}

:root[data-display-text-size='largest'] {
    font-size: 16px;
}

/* Control size - raises the minimum height Cratis Components' own fields/buttons/stepper controls
   render at, by repointing the same token they already read from. */
:root[data-display-control-size='large'] {
    --cratis-control-height: var(--cratis-control-height-large);
}

/* Spacing - a multiplier this app's own onboarding CSS applies to its gaps/padding (see
   OrganizationSetupPage.css / UserSetupPage.css). Kept as its own axis, independent of text size,
   so either can be adjusted without the other. */
:root {
    --ante-display-spacing-scale: 1;
}

:root[data-display-spacing='relaxed'] {
    --ante-display-spacing-scale: 1.5;
}

/* Contrast - strengthens control borders and the focus ring so selection and focus state read
   clearly against the surface, without replacing the app's color identity. */
:root[data-display-contrast='high'] {
    --cratis-control-border: var(--cratis-text-color);
    --cratis-surface-border: var(--cratis-text-color);
    --cratis-focus-ring: 0 0 0 3px var(--cratis-primary-color);
}

:root[data-display-contrast='high'] .organization-setup-card,
:root[data-display-contrast='high'] .user-setup-card {
    border-width: 2px;
}

/* Motion - reduced either because the operating system asked for it, or because the person turned
   it on explicitly through the in-app preference; both collapse to the same attribute (see
   effectiveDisplayPreferences.ts), and this rule is the one place that honors it for this app's own
   CSS. @cratis/components honors `prefers-reduced-motion` for its own animations independently. */
:root[data-display-motion='reduced'] *,
:root[data-display-motion='reduced'] *::before,
:root[data-display-motion='reduced'] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* Defense in depth: honor the OS setting directly for this app's own CSS even before/without any
   in-app preference being read (e.g. the brief window before applyInitialDisplayPreferences.ts's
   attribute lands, or in a context where JavaScript preference application did not run). */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 24px;
    font-weight: 400;

    /* Ante's surfaces are dark-themed by default, but native form controls (checkboxes, scrollbars)
       should still be able to render light where the operating system prefers it - "dark" first
       keeps the branded default, "light" keeps that an available fallback rather than an override
       the app fights (Cratis/Ante#20: "effective neutral display preferences"). */
    color-scheme: dark light;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Arc's command form paints a field's validation message with `var(--color-error, #c00)`, and
   #c00 is 3.0:1 on the dark card. Pointing it at the Components red keeps the message on the
   theme: 6.4:1 on the dark card, 4.8:1 on a light one (Cratis/Ante#150). */
:root {
    --color-error: var(--cratis-red-500);
}

/* Forced colors replaces every color the page sets, but a checker still reads the authored one - the
   dark palette's #a1a1aa secondary text measured 2.56:1 against the Canvas white it was painted on. Ante
   states the system colors itself, as @cratis/components/theme does for its own tokens, so what is
   authored is what is shown (Cratis/Ante#150). */
@media (forced-colors: active) {
    :root {
        --color-error: CanvasText;
        --surface-ground: Canvas;
        --surface-card: Canvas;
        --surface-overlay: Canvas;
        --surface-border: CanvasText;
        --text-color: CanvasText;
        --text-color-secondary: CanvasText;
        --primary-color: LinkText;
        --gray-800: Canvas;
        --gray-900: Canvas;

        /* The PrimeReact buttons Components renders read their label color from these; Lara's is the
           primary #34d399, which measured 1.92:1 against Canvas on the wizard's Previous button. */
        --p-button-outlined-primary-color: ButtonText;
        --p-button-outlined-primary-border-color: ButtonText;
        --p-button-outlined-primary-hover-background: transparent;
        --p-button-outlined-primary-active-background: transparent;
        --p-button-text-primary-color: ButtonText;
        --p-button-text-primary-hover-background: transparent;
        --p-button-text-primary-active-background: transparent;
    }
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    background-color: var(--surface-ground);
    color: var(--text-color);
}

/* Reinforces keyboard focus visibility on this app's own interactive elements (@cratis/components
   already does this for its own controls - see its styles.css :focus-visible rules). Only applies
   when the browser itself would show a focus indicator (:focus-visible), never on a mouse click. */
:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    :focus-visible {
        outline: 2px solid Highlight;
    }
}

/* Visually hides text while keeping it in the accessibility tree - for content meant for screen
   readers only (e.g. a heading accompanying a self-explanatory logo image). */
.ante-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.display-preferences-menu__trigger {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.display-preferences-menu__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.display-preferences-menu__description {
    margin: 0;
    /* The dialog is a Cratis Components surface, so its text comes from the same token family. */
    color: var(--cratis-text-color-secondary);
    font-size: 0.875rem;
}

.display-preferences-menu__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    border: 0;
}

.display-preferences-menu__group legend {
    padding: 0;
    margin-bottom: 0.25rem;
    font-weight: 500;
    color: var(--cratis-text-color);
}

.display-preferences-menu__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.organization-setup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
}

.organization-setup-card {
    position: relative;
    /* Centers vertically while the card fits, and lets the container scroll - rather than clip the top - when it does not. */
    margin: auto;
    background: var(--surface-card);
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--surface-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.organization-setup-header {
    text-align: center;
    padding: 2rem 2.5rem 1.5rem;
    border-bottom: 1px solid var(--surface-border);
}

/* Resets the default <h1> box model when it wraps the logo image rather than the text wordmark -
   .ante-logo__text (below, shared with UserSetupPage.css) already sets an explicit margin for the
   text case. */
.ante-logo__heading {
    margin: 0;
}

.organization-setup-card__content {
    padding: 2rem 2.5rem;
}

.organization-setup-card__content--stepper {
    padding: 0;
}

.organization-setup-logo {
    height: 5.5rem;
    max-width: 22rem;
    width: auto;
    margin: 0 auto 0.5rem auto;
    display: block;
}

.organization-setup-subtitle {
    font-size: 1rem;
    color: var(--text-color-secondary);
    margin: 0;
}

.organization-setup-card__content--stepper .cratis-command-stepper {
    gap: 0;
}

.organization-setup-card__content--stepper .cratis-command-stepper__root {
    padding: 2rem 2.5rem 0;
}

.organization-setup-card__content--stepper .cratis-command-stepper__list {
    margin-bottom: 1.5rem;
}

.organization-setup-card__content--stepper .cratis-command-stepper__panels {
    padding-bottom: 0;
}

.organization-setup-card__content--stepper .cratis-command-stepper > div:last-child {
    border-top: 1px solid var(--surface-border);
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
}

/* Waiting state */
.organization-setup-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.organization-setup-waiting__spinner {
    width: 3rem;
    height: 3rem;
}

.organization-setup-waiting__message {
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Optional host-outcome completion screen */
.organization-setup-host-outcome__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Host-authored registration introduction */
.registration-intro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.registration-intro__text,
.registration-intro__links {
    margin: 0;
}

.registration-intro__highlights {
    margin: 0;
    padding-left: 1.25rem;
}

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

/* Error state */
.organization-setup-errors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.organization-setup-errors__item {
    width: 100%;
}

@media (max-width: 768px) {
    .organization-setup-card {
        max-width: calc(100vw - 2rem);
    }

    .organization-setup-header,
    .organization-setup-card__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .organization-setup-card__content--stepper .cratis-command-stepper__root {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .organization-setup-card__content--stepper .cratis-command-stepper > div:last-child {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .organization-setup-logo {
        height: 4rem;
        max-width: 14rem;
    }
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.legal-acceptance {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.legal-acceptance__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legal-acceptance__label {
    color: var(--text-color);
}

.legal-acceptance__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.legal-acceptance__link:hover {
    text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: dark;
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #ffa657;
    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #b62324;
    --color-prettylights-syntax-string-regexp: #7ee787;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --color-prettylights-syntax-markup-deleted-bg: #67060c;
    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --color-prettylights-syntax-markup-inserted-bg: #033a16;
    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #484f58;
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-neutral-muted: rgba(110, 118, 129, 0.4);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-attention-subtle: rgba(187, 128, 9, 0.15);
    --color-danger-fg: #f85149;
    --color-danger-emphasis: #da3633;
    --color-attention-fg: #d29922;
    --color-attention-emphasis: #9e6a03;
    --color-done-fg: #a371f7;
    --color-done-emphasis: #8957e5;
    --color-success-fg: #3fb950;
    --color-success-emphasis: #238636;
    --color-copied-active-bg: #2e9b33;
  }
}
@media (prefers-color-scheme: light) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: light;
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: hsl(210, 18%, 87%);
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #d1242f;
    --color-danger-emphasis: #cf222e;
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #9a6700;
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-copied-active-bg: #2e9b33;
  }
}
[data-color-mode*='dark'] .wmde-markdown,
[data-color-mode*='dark'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='dark'],
.wmde-markdown[data-color-mode*='dark'],
body[data-color-mode*='dark'] {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}
[data-color-mode*='light'] .wmde-markdown,
[data-color-mode*='light'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='light'],
.wmde-markdown[data-color-mode*='light'],
body[data-color-mode*='light'] {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6e7781;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
  --color-prettylights-syntax-storage-modifier-import: #24292f;
  --color-prettylights-syntax-entity-tag: #116329;
  --color-prettylights-syntax-keyword: #cf222e;
  --color-prettylights-syntax-string: #0a3069;
  --color-prettylights-syntax-variable: #953800;
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
  --color-prettylights-syntax-carriage-return-bg: #cf222e;
  --color-prettylights-syntax-string-regexp: #116329;
  --color-prettylights-syntax-markup-list: #3b2300;
  --color-prettylights-syntax-markup-heading: #0550ae;
  --color-prettylights-syntax-markup-italic: #24292f;
  --color-prettylights-syntax-markup-bold: #24292f;
  --color-prettylights-syntax-markup-deleted-text: #82071e;
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --color-prettylights-syntax-markup-inserted-text: #116329;
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --color-prettylights-syntax-markup-changed-text: #953800;
  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
  --color-prettylights-syntax-meta-diff-range: #8250df;
  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: hsl(210, 18%, 87%);
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
}
.wmde-markdown {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
}
.wmde-markdown details,
.wmde-markdown figcaption,
.wmde-markdown figure {
  display: block;
}
.wmde-markdown summary {
  display: list-item;
}
.wmde-markdown [hidden] {
  display: none !important;
}
.wmde-markdown a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
}
.wmde-markdown a:active,
.wmde-markdown a:hover {
  outline-width: 0;
}
.wmde-markdown abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.wmde-markdown b,
.wmde-markdown strong {
  font-weight: 600;
}
.wmde-markdown dfn {
  font-style: italic;
}
.wmde-markdown h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-text-primary);
}
.wmde-markdown small {
  font-size: 90%;
}
.wmde-markdown sub,
.wmde-markdown sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.wmde-markdown sub {
  bottom: -0.25em;
}
.wmde-markdown sup {
  top: -0.5em;
}
.wmde-markdown img {
  display: inline-block;
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: var(--color-canvas-default);
}
.wmde-markdown code,
.wmde-markdown kbd,
.wmde-markdown pre,
.wmde-markdown samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
.wmde-markdown figure {
  margin: 1em 40px;
}
.wmde-markdown hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--color-border-default);
}
.wmde-markdown input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.wmde-markdown [type='button'],
.wmde-markdown [type='reset'],
.wmde-markdown [type='submit'] {
  -webkit-appearance: button;
}
.wmde-markdown [type='button']::-moz-focus-inner,
.wmde-markdown [type='reset']::-moz-focus-inner,
.wmde-markdown [type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
.wmde-markdown [type='button']:-moz-focusring,
.wmde-markdown [type='reset']:-moz-focusring,
.wmde-markdown [type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
.wmde-markdown [type='checkbox'],
.wmde-markdown [type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
.wmde-markdown [type='number']::-webkit-inner-spin-button,
.wmde-markdown [type='number']::-webkit-outer-spin-button {
  height: auto;
}
.wmde-markdown [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
.wmde-markdown [type='search']::-webkit-search-cancel-button,
.wmde-markdown [type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
.wmde-markdown ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
.wmde-markdown ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
.wmde-markdown a:hover {
  text-decoration: underline;
}
.wmde-markdown hr::before {
  display: table;
  content: '';
}
.wmde-markdown hr::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown h3 {
  font-weight: 600;
  font-size: 1.25em;
}
.wmde-markdown h4 {
  font-weight: 600;
  font-size: 1em;
}
.wmde-markdown h5 {
  font-weight: 600;
  font-size: 0.875em;
}
.wmde-markdown h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--color-fg-muted);
}
.wmde-markdown p {
  margin-top: 0;
  margin-bottom: 10px;
}
.wmde-markdown blockquote {
  margin: 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}
.wmde-markdown ul,
.wmde-markdown ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}
.wmde-markdown ol ol,
.wmde-markdown ul ol {
  list-style-type: lower-roman;
}
.wmde-markdown ul ul ol,
.wmde-markdown ul ol ol,
.wmde-markdown ol ul ol,
.wmde-markdown ol ol ol {
  list-style-type: lower-alpha;
}
.wmde-markdown dd {
  margin-left: 0;
}
.wmde-markdown tt,
.wmde-markdown code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
}
.wmde-markdown pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}
.wmde-markdown .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}
.wmde-markdown ::placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}
.wmde-markdown input::-webkit-outer-spin-button,
.wmde-markdown input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.wmde-markdown [data-catalyst] {
  display: block;
}
.wmde-markdown::before {
  display: table;
  content: '';
}
.wmde-markdown::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown > *:first-child {
  margin-top: 0 !important;
}
.wmde-markdown > *:last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.wmde-markdown .absent {
  color: var(--color-danger-fg);
}
.wmde-markdown a.anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}
.wmde-markdown .anchor:focus {
  outline: none;
}
.wmde-markdown p,
.wmde-markdown blockquote,
.wmde-markdown ul,
.wmde-markdown ol,
.wmde-markdown dl,
.wmde-markdown table,
.wmde-markdown pre,
.wmde-markdown details {
  margin-top: 0;
  margin-bottom: 16px;
}
.wmde-markdown blockquote > :first-child {
  margin-top: 0;
}
.wmde-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.wmde-markdown sup > a::before {
  content: '[';
}
.wmde-markdown sup > a::after {
  content: ']';
}
.wmde-markdown h1 .octicon-link,
.wmde-markdown h2 .octicon-link,
.wmde-markdown h3 .octicon-link,
.wmde-markdown h4 .octicon-link,
.wmde-markdown h5 .octicon-link,
.wmde-markdown h6 .octicon-link {
  color: var(--color-fg-default);
  vertical-align: middle;
  visibility: hidden;
}
.wmde-markdown h1:hover .anchor,
.wmde-markdown h2:hover .anchor,
.wmde-markdown h3:hover .anchor,
.wmde-markdown h4:hover .anchor,
.wmde-markdown h5:hover .anchor,
.wmde-markdown h6:hover .anchor {
  text-decoration: none;
}
.wmde-markdown h1:hover .anchor .octicon-link,
.wmde-markdown h2:hover .anchor .octicon-link,
.wmde-markdown h3:hover .anchor .octicon-link,
.wmde-markdown h4:hover .anchor .octicon-link,
.wmde-markdown h5:hover .anchor .octicon-link,
.wmde-markdown h6:hover .anchor .octicon-link {
  visibility: visible;
}
.wmde-markdown h1 tt,
.wmde-markdown h1 code,
.wmde-markdown h2 tt,
.wmde-markdown h2 code,
.wmde-markdown h3 tt,
.wmde-markdown h3 code,
.wmde-markdown h4 tt,
.wmde-markdown h4 code,
.wmde-markdown h5 tt,
.wmde-markdown h5 code,
.wmde-markdown h6 tt,
.wmde-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.wmde-markdown ul.no-list,
.wmde-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.wmde-markdown ol[type='1'] {
  list-style-type: decimal;
}
.wmde-markdown ol[type='a'] {
  list-style-type: lower-alpha;
}
.wmde-markdown ol[type='i'] {
  list-style-type: lower-roman;
}
.wmde-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.wmde-markdown ul ul,
.wmde-markdown ul ol,
.wmde-markdown ol ol,
.wmde-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.wmde-markdown li > p {
  margin-top: 16px;
}
.wmde-markdown li + li {
  margin-top: 0.25em;
}
.wmde-markdown dl {
  padding: 0;
}
.wmde-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.wmde-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.wmde-markdown table th {
  font-weight: 600;
}
.wmde-markdown table th,
.wmde-markdown table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}
.wmde-markdown table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}
.wmde-markdown table img {
  background-color: transparent;
}
.wmde-markdown img[align='right'] {
  padding-left: 20px;
}
.wmde-markdown img[align='left'] {
  padding-right: 20px;
}
.wmde-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.wmde-markdown span.frame {
  display: block;
  overflow: hidden;
}
.wmde-markdown span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown span.frame span img {
  display: block;
  float: left;
}
.wmde-markdown span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-fg-default);
}
.wmde-markdown span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}
.wmde-markdown span.align-center span img {
  margin: 0 auto;
  text-align: center;
}
.wmde-markdown span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown span.align-right span img {
  margin: 0;
  text-align: right;
}
.wmde-markdown span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-left span {
  margin: 13px 0 0;
}
.wmde-markdown span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown code,
.wmde-markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
}
.wmde-markdown code br,
.wmde-markdown tt br {
  display: none;
}
.wmde-markdown del code {
  text-decoration: inherit;
}
.wmde-markdown pre code {
  font-size: 100%;
}
.wmde-markdown pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
.wmde-markdown pre {
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
}
.wmde-markdown pre code,
.wmde-markdown pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}
.wmde-markdown pre > code {
  padding: 16px;
  overflow: auto;
  display: block;
}
.wmde-markdown pre > code::-webkit-scrollbar {
  background: transparent;
  width: 8px;
  height: 8px;
}
.wmde-markdown pre > code::-webkit-scrollbar-thumb {
  background: var(--color-fg-muted);
  border-radius: 10px;
}
.wmde-markdown .csv-data td,
.wmde-markdown .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.wmde-markdown .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  background: var(--color-canvas-default);
  border: 0;
}
.wmde-markdown .csv-data tr {
  border-top: 0;
}
.wmde-markdown .csv-data th {
  font-weight: 600;
  background: var(--color-canvas-subtle);
  border-top: 0;
}
.wmde-markdown .footnotes {
  font-size: 12px;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border-default);
}
.wmde-markdown .footnotes ol {
  padding-left: 16px;
}
.wmde-markdown .footnotes li {
  position: relative;
}
.wmde-markdown .footnotes li:target::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -24px;
  pointer-events: none;
  content: '';
  border: 2px solid var(--color-accent-emphasis);
  border-radius: 6px;
}
.wmde-markdown .footnotes li:target {
  color: var(--color-fg-default);
}
.wmde-markdown .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}
.wmde-markdown .task-list-item {
  list-style-type: none;
}
.wmde-markdown .task-list-item label {
  font-weight: 400;
}
.wmde-markdown .task-list-item.enabled label {
  cursor: pointer;
}
.wmde-markdown .task-list-item + .wmde-markdown .task-list-item {
  margin-top: 3px;
}
.wmde-markdown .task-list-item .handle {
  display: none;
}
.wmde-markdown .task-list-item-checkbox,
.wmde-markdown .contains-task-list input[type='checkbox'] {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}
.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox,
.wmde-markdown .contains-task-list:dir(rtl) input[type='checkbox'] {
  margin: 0 -1.6em 0.25em 0.2em;
}
.wmde-markdown ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}
.wmde-markdown pre {
  position: relative;
}
.wmde-markdown pre .copied {
  visibility: hidden;
  display: flex;
  position: absolute;
  cursor: pointer;
  color: var(--color-fg-default);
  top: 6px;
  right: 6px;
  border-radius: 5px;
  background: var(--color-border-default);
  padding: 6px;
  font-size: 12px;
  transition: all 0.3s;
}
.wmde-markdown pre .copied .octicon-copy {
  display: block;
}
.wmde-markdown pre .copied .octicon-check {
  display: none;
}
.wmde-markdown pre:hover .copied {
  visibility: visible;
}
.wmde-markdown pre:hover .copied:hover {
  background: var(--color-prettylights-syntax-entity-tag);
  color: var(--color-canvas-default);
}
.wmde-markdown pre:hover .copied:active,
.wmde-markdown pre .copied.active {
  background: var(--color-copied-active-bg);
  color: var(--color-canvas-default);
}
.wmde-markdown pre .active .octicon-copy {
  display: none;
}
.wmde-markdown pre .active .octicon-check {
  display: block;
}
.wmde-markdown .markdown-alert {
  padding: 0.5rem 1em;
  color: inherit;
  margin-bottom: 16px;
  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
}
.wmde-markdown .markdown-alert > :last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown .markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: 500;
  font-size: 14px;
}
.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {
  margin-right: var(--base-size-8, 8px) !important;
}
.wmde-markdown .markdown-alert.markdown-alert-note {
  border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--fgColor-accent, var(--color-accent-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-tip {
  border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--fgColor-success, var(--color-success-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-important {
  border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--fgColor-done, var(--color-done-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-warning {
  border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--fgColor-attention, var(--color-attention-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-caution {
  border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--fgColor-danger, var(--color-danger-fg));
}
.wmde-markdown .highlight-line {
  background-color: var(--color-neutral-muted);
}
.wmde-markdown .code-line.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  color: var(--color-fg-subtle);
  content: attr(line);
  white-space: nowrap;
}
.wmde-markdown .token.comment,
.wmde-markdown .token.prolog,
.wmde-markdown .token.doctype,
.wmde-markdown .token.cdata {
  color: var(--color-prettylights-syntax-comment);
}
.wmde-markdown .token.namespace {
  opacity: 0.7;
}
.wmde-markdown .token.property,
.wmde-markdown .token.tag,
.wmde-markdown .token.selector,
.wmde-markdown .token.constant,
.wmde-markdown .token.symbol,
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-entity-tag);
}
.wmde-markdown .token.maybe-class-name {
  color: var(--color-prettylights-syntax-variable);
}
.wmde-markdown .token.property-access,
.wmde-markdown .token.operator,
.wmde-markdown .token.boolean,
.wmde-markdown .token.number,
.wmde-markdown .token.selector .token.class,
.wmde-markdown .token.attr-name,
.wmde-markdown .token.string,
.wmde-markdown .token.char,
.wmde-markdown .token.builtin {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-markup-deleted-text);
}
.wmde-markdown .code-line .token.deleted {
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}
.wmde-markdown .token.inserted {
  color: var(--color-prettylights-syntax-markup-inserted-text);
}
.wmde-markdown .code-line .token.inserted {
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}
.wmde-markdown .token.variable {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.entity,
.wmde-markdown .token.url,
.wmde-markdown .language-css .token.string,
.wmde-markdown .style .token.string {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.color,
.wmde-markdown .token.atrule,
.wmde-markdown .token.attr-value,
.wmde-markdown .token.function,
.wmde-markdown .token.class-name {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.rule,
.wmde-markdown .token.regex,
.wmde-markdown .token.important,
.wmde-markdown .token.keyword {
  color: var(--color-prettylights-syntax-keyword);
}
.wmde-markdown .token.coord {
  color: var(--color-prettylights-syntax-meta-diff-range);
}
.wmde-markdown .token.important,
.wmde-markdown .token.bold {
  font-weight: bold;
}
.wmde-markdown .token.italic {
  font-style: italic;
}
.wmde-markdown .token.entity {
  cursor: help;
}
@media (prefers-color-scheme: dark) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: dark;
    --color-prettylights-syntax-comment: #8b949e;
    --color-prettylights-syntax-constant: #79c0ff;
    --color-prettylights-syntax-entity: #d2a8ff;
    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
    --color-prettylights-syntax-entity-tag: #7ee787;
    --color-prettylights-syntax-keyword: #ff7b72;
    --color-prettylights-syntax-string: #a5d6ff;
    --color-prettylights-syntax-variable: #ffa657;
    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
    --color-prettylights-syntax-carriage-return-bg: #b62324;
    --color-prettylights-syntax-string-regexp: #7ee787;
    --color-prettylights-syntax-markup-list: #f2cc60;
    --color-prettylights-syntax-markup-heading: #1f6feb;
    --color-prettylights-syntax-markup-italic: #c9d1d9;
    --color-prettylights-syntax-markup-bold: #c9d1d9;
    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
    --color-prettylights-syntax-markup-deleted-bg: #67060c;
    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
    --color-prettylights-syntax-markup-inserted-bg: #033a16;
    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
    --color-fg-default: #c9d1d9;
    --color-fg-muted: #8b949e;
    --color-fg-subtle: #484f58;
    --color-canvas-default: #0d1117;
    --color-canvas-subtle: #161b22;
    --color-border-default: #30363d;
    --color-border-muted: #21262d;
    --color-neutral-muted: rgba(110, 118, 129, 0.4);
    --color-accent-fg: #58a6ff;
    --color-accent-emphasis: #1f6feb;
    --color-attention-subtle: rgba(187, 128, 9, 0.15);
    --color-danger-fg: #f85149;
    --color-danger-emphasis: #da3633;
    --color-attention-fg: #d29922;
    --color-attention-emphasis: #9e6a03;
    --color-done-fg: #a371f7;
    --color-done-emphasis: #8957e5;
    --color-success-fg: #3fb950;
    --color-success-emphasis: #238636;
    --color-copied-active-bg: #2e9b33;
  }
}
@media (prefers-color-scheme: light) {
  .wmde-markdown,
  .wmde-markdown-var {
    color-scheme: light;
    --color-prettylights-syntax-comment: #6e7781;
    --color-prettylights-syntax-constant: #0550ae;
    --color-prettylights-syntax-entity: #8250df;
    --color-prettylights-syntax-storage-modifier-import: #24292f;
    --color-prettylights-syntax-entity-tag: #116329;
    --color-prettylights-syntax-keyword: #cf222e;
    --color-prettylights-syntax-string: #0a3069;
    --color-prettylights-syntax-variable: #953800;
    --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
    --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
    --color-prettylights-syntax-invalid-illegal-bg: #82071e;
    --color-prettylights-syntax-carriage-return-text: #f6f8fa;
    --color-prettylights-syntax-carriage-return-bg: #cf222e;
    --color-prettylights-syntax-string-regexp: #116329;
    --color-prettylights-syntax-markup-list: #3b2300;
    --color-prettylights-syntax-markup-heading: #0550ae;
    --color-prettylights-syntax-markup-italic: #24292f;
    --color-prettylights-syntax-markup-bold: #24292f;
    --color-prettylights-syntax-markup-deleted-text: #82071e;
    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
    --color-prettylights-syntax-markup-inserted-text: #116329;
    --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
    --color-prettylights-syntax-markup-changed-text: #953800;
    --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
    --color-prettylights-syntax-markup-ignored-text: #eaeef2;
    --color-prettylights-syntax-markup-ignored-bg: #0550ae;
    --color-prettylights-syntax-meta-diff-range: #8250df;
    --color-prettylights-syntax-brackethighlighter-angle: #57606a;
    --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
    --color-prettylights-syntax-constant-other-reference-link: #0a3069;
    --color-fg-default: #24292f;
    --color-fg-muted: #57606a;
    --color-fg-subtle: #6e7781;
    --color-canvas-default: #ffffff;
    --color-canvas-subtle: #f6f8fa;
    --color-border-default: #d0d7de;
    --color-border-muted: hsl(210, 18%, 87%);
    --color-neutral-muted: rgba(175, 184, 193, 0.2);
    --color-accent-fg: #0969da;
    --color-accent-emphasis: #0969da;
    --color-attention-subtle: #fff8c5;
    --color-danger-fg: #d1242f;
    --color-danger-emphasis: #cf222e;
    --color-attention-fg: #9a6700;
    --color-attention-emphasis: #9a6700;
    --color-done-fg: #8250df;
    --color-done-emphasis: #8250df;
    --color-success-fg: #1a7f37;
    --color-success-emphasis: #1f883d;
    --color-copied-active-bg: #2e9b33;
  }
}
[data-color-mode*='dark'] .wmde-markdown,
[data-color-mode*='dark'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='dark'],
.wmde-markdown[data-color-mode*='dark'],
body[data-color-mode*='dark'] {
  color-scheme: dark;
  --color-prettylights-syntax-comment: #8b949e;
  --color-prettylights-syntax-constant: #79c0ff;
  --color-prettylights-syntax-entity: #d2a8ff;
  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
  --color-prettylights-syntax-entity-tag: #7ee787;
  --color-prettylights-syntax-keyword: #ff7b72;
  --color-prettylights-syntax-string: #a5d6ff;
  --color-prettylights-syntax-variable: #ffa657;
  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
  --color-prettylights-syntax-carriage-return-bg: #b62324;
  --color-prettylights-syntax-string-regexp: #7ee787;
  --color-prettylights-syntax-markup-list: #f2cc60;
  --color-prettylights-syntax-markup-heading: #1f6feb;
  --color-prettylights-syntax-markup-italic: #c9d1d9;
  --color-prettylights-syntax-markup-bold: #c9d1d9;
  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
  --color-prettylights-syntax-markup-deleted-bg: #67060c;
  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
  --color-prettylights-syntax-markup-inserted-bg: #033a16;
  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-fg-subtle: #484f58;
  --color-canvas-default: #0d1117;
  --color-canvas-subtle: #161b22;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-neutral-muted: rgba(110, 118, 129, 0.4);
  --color-accent-fg: #58a6ff;
  --color-accent-emphasis: #1f6feb;
  --color-attention-subtle: rgba(187, 128, 9, 0.15);
  --color-danger-fg: #f85149;
}
[data-color-mode*='light'] .wmde-markdown,
[data-color-mode*='light'] .wmde-markdown-var,
.wmde-markdown-var[data-color-mode*='light'],
.wmde-markdown[data-color-mode*='light'],
body[data-color-mode*='light'] {
  color-scheme: light;
  --color-prettylights-syntax-comment: #6e7781;
  --color-prettylights-syntax-constant: #0550ae;
  --color-prettylights-syntax-entity: #8250df;
  --color-prettylights-syntax-storage-modifier-import: #24292f;
  --color-prettylights-syntax-entity-tag: #116329;
  --color-prettylights-syntax-keyword: #cf222e;
  --color-prettylights-syntax-string: #0a3069;
  --color-prettylights-syntax-variable: #953800;
  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
  --color-prettylights-syntax-carriage-return-bg: #cf222e;
  --color-prettylights-syntax-string-regexp: #116329;
  --color-prettylights-syntax-markup-list: #3b2300;
  --color-prettylights-syntax-markup-heading: #0550ae;
  --color-prettylights-syntax-markup-italic: #24292f;
  --color-prettylights-syntax-markup-bold: #24292f;
  --color-prettylights-syntax-markup-deleted-text: #82071e;
  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
  --color-prettylights-syntax-markup-inserted-text: #116329;
  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
  --color-prettylights-syntax-markup-changed-text: #953800;
  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
  --color-prettylights-syntax-meta-diff-range: #8250df;
  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
  --color-fg-default: #24292f;
  --color-fg-muted: #57606a;
  --color-fg-subtle: #6e7781;
  --color-canvas-default: #ffffff;
  --color-canvas-subtle: #f6f8fa;
  --color-border-default: #d0d7de;
  --color-border-muted: hsl(210, 18%, 87%);
  --color-neutral-muted: rgba(175, 184, 193, 0.2);
  --color-accent-fg: #0969da;
  --color-accent-emphasis: #0969da;
  --color-attention-subtle: #fff8c5;
  --color-danger-fg: #cf222e;
}
.wmde-markdown {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
  color: var(--color-fg-default);
  background-color: var(--color-canvas-default);
}
.wmde-markdown details,
.wmde-markdown figcaption,
.wmde-markdown figure {
  display: block;
}
.wmde-markdown summary {
  display: list-item;
}
.wmde-markdown [hidden] {
  display: none !important;
}
.wmde-markdown a {
  background-color: transparent;
  color: var(--color-accent-fg);
  text-decoration: none;
}
.wmde-markdown a:active,
.wmde-markdown a:hover {
  outline-width: 0;
}
.wmde-markdown abbr[title] {
  border-bottom: none;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
.wmde-markdown b,
.wmde-markdown strong {
  font-weight: 600;
}
.wmde-markdown dfn {
  font-style: italic;
}
.wmde-markdown h1 {
  margin: 0.67em 0;
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown mark {
  background-color: var(--color-attention-subtle);
  color: var(--color-text-primary);
}
.wmde-markdown small {
  font-size: 90%;
}
.wmde-markdown sub,
.wmde-markdown sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
.wmde-markdown sub {
  bottom: -0.25em;
}
.wmde-markdown sup {
  top: -0.5em;
}
.wmde-markdown img {
  display: inline-block;
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
  background-color: var(--color-canvas-default);
}
.wmde-markdown code,
.wmde-markdown kbd,
.wmde-markdown pre,
.wmde-markdown samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
.wmde-markdown figure {
  margin: 1em 40px;
}
.wmde-markdown hr {
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border-muted);
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: var(--color-border-default);
}
.wmde-markdown input {
  font: inherit;
  margin: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.wmde-markdown [type='button'],
.wmde-markdown [type='reset'],
.wmde-markdown [type='submit'] {
  -webkit-appearance: button;
}
.wmde-markdown [type='button']::-moz-focus-inner,
.wmde-markdown [type='reset']::-moz-focus-inner,
.wmde-markdown [type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
.wmde-markdown [type='button']:-moz-focusring,
.wmde-markdown [type='reset']:-moz-focusring,
.wmde-markdown [type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
.wmde-markdown [type='checkbox'],
.wmde-markdown [type='radio'] {
  box-sizing: border-box;
  padding: 0;
}
.wmde-markdown [type='number']::-webkit-inner-spin-button,
.wmde-markdown [type='number']::-webkit-outer-spin-button {
  height: auto;
}
.wmde-markdown [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
.wmde-markdown [type='search']::-webkit-search-cancel-button,
.wmde-markdown [type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
.wmde-markdown ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
.wmde-markdown ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
.wmde-markdown a:hover {
  text-decoration: underline;
}
.wmde-markdown hr::before {
  display: table;
  content: '';
}
.wmde-markdown hr::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown table {
  border-spacing: 0;
  border-collapse: collapse;
  display: block;
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown td,
.wmde-markdown th {
  padding: 0;
}
.wmde-markdown details summary {
  cursor: pointer;
}
.wmde-markdown details:not([open]) > *:not(summary) {
  display: none !important;
}
.wmde-markdown kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  line-height: 10px;
  color: var(--color-fg-default);
  vertical-align: middle;
  background-color: var(--color-canvas-subtle);
  border: solid 1px var(--color-neutral-muted);
  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
}
.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.wmde-markdown h2 {
  font-weight: 600;
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid var(--color-border-muted);
}
.wmde-markdown h3 {
  font-weight: 600;
  font-size: 1.25em;
}
.wmde-markdown h4 {
  font-weight: 600;
  font-size: 1em;
}
.wmde-markdown h5 {
  font-weight: 600;
  font-size: 0.875em;
}
.wmde-markdown h6 {
  font-weight: 600;
  font-size: 0.85em;
  color: var(--color-fg-muted);
}
.wmde-markdown p {
  margin-top: 0;
  margin-bottom: 10px;
}
.wmde-markdown blockquote {
  margin: 0;
  padding: 0 1em;
  color: var(--color-fg-muted);
  border-left: 0.25em solid var(--color-border-default);
}
.wmde-markdown ul,
.wmde-markdown ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 2em;
}
.wmde-markdown ol ol,
.wmde-markdown ul ol {
  list-style-type: lower-roman;
}
.wmde-markdown ul ul ol,
.wmde-markdown ul ol ol,
.wmde-markdown ol ul ol,
.wmde-markdown ol ol ol {
  list-style-type: lower-alpha;
}
.wmde-markdown dd {
  margin-left: 0;
}
.wmde-markdown tt,
.wmde-markdown code {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
}
.wmde-markdown pre {
  margin-top: 0;
  margin-bottom: 0;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: 12px;
  word-wrap: normal;
}
.wmde-markdown .octicon {
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}
.wmde-markdown ::placeholder {
  color: var(--color-fg-subtle);
  opacity: 1;
}
.wmde-markdown input::-webkit-outer-spin-button,
.wmde-markdown input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.wmde-markdown [data-catalyst] {
  display: block;
}
.wmde-markdown::before {
  display: table;
  content: '';
}
.wmde-markdown::after {
  display: table;
  clear: both;
  content: '';
}
.wmde-markdown > *:first-child {
  margin-top: 0 !important;
}
.wmde-markdown > *:last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.wmde-markdown .absent {
  color: var(--color-danger-fg);
}
.wmde-markdown a.anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}
.wmde-markdown .anchor:focus {
  outline: none;
}
.wmde-markdown p,
.wmde-markdown blockquote,
.wmde-markdown ul,
.wmde-markdown ol,
.wmde-markdown dl,
.wmde-markdown table,
.wmde-markdown pre,
.wmde-markdown details {
  margin-top: 0;
  margin-bottom: 16px;
}
.wmde-markdown blockquote > :first-child {
  margin-top: 0;
}
.wmde-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.wmde-markdown sup > a::before {
  content: '[';
}
.wmde-markdown sup > a::after {
  content: ']';
}
.wmde-markdown h1 .octicon-link,
.wmde-markdown h2 .octicon-link,
.wmde-markdown h3 .octicon-link,
.wmde-markdown h4 .octicon-link,
.wmde-markdown h5 .octicon-link,
.wmde-markdown h6 .octicon-link {
  color: var(--color-fg-default);
  vertical-align: middle;
  visibility: hidden;
}
.wmde-markdown h1:hover .anchor,
.wmde-markdown h2:hover .anchor,
.wmde-markdown h3:hover .anchor,
.wmde-markdown h4:hover .anchor,
.wmde-markdown h5:hover .anchor,
.wmde-markdown h6:hover .anchor {
  text-decoration: none;
}
.wmde-markdown h1:hover .anchor .octicon-link,
.wmde-markdown h2:hover .anchor .octicon-link,
.wmde-markdown h3:hover .anchor .octicon-link,
.wmde-markdown h4:hover .anchor .octicon-link,
.wmde-markdown h5:hover .anchor .octicon-link,
.wmde-markdown h6:hover .anchor .octicon-link {
  visibility: visible;
}
.wmde-markdown h1 tt,
.wmde-markdown h1 code,
.wmde-markdown h2 tt,
.wmde-markdown h2 code,
.wmde-markdown h3 tt,
.wmde-markdown h3 code,
.wmde-markdown h4 tt,
.wmde-markdown h4 code,
.wmde-markdown h5 tt,
.wmde-markdown h5 code,
.wmde-markdown h6 tt,
.wmde-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.wmde-markdown ul.no-list,
.wmde-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.wmde-markdown ol[type='1'] {
  list-style-type: decimal;
}
.wmde-markdown ol[type='a'] {
  list-style-type: lower-alpha;
}
.wmde-markdown ol[type='i'] {
  list-style-type: lower-roman;
}
.wmde-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.wmde-markdown ul ul,
.wmde-markdown ul ol,
.wmde-markdown ol ol,
.wmde-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.wmde-markdown li > p {
  margin-top: 16px;
}
.wmde-markdown li + li {
  margin-top: 0.25em;
}
.wmde-markdown dl {
  padding: 0;
}
.wmde-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.wmde-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.wmde-markdown table th {
  font-weight: 600;
}
.wmde-markdown table th,
.wmde-markdown table td {
  padding: 6px 13px;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown table tr {
  background-color: var(--color-canvas-default);
  border-top: 1px solid var(--color-border-muted);
}
.wmde-markdown table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}
.wmde-markdown table img {
  background-color: transparent;
}
.wmde-markdown img[align='right'] {
  padding-left: 20px;
}
.wmde-markdown img[align='left'] {
  padding-right: 20px;
}
.wmde-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.wmde-markdown span.frame {
  display: block;
  overflow: hidden;
}
.wmde-markdown span.frame > span {
  display: block;
  float: left;
  width: auto;
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}
.wmde-markdown span.frame span img {
  display: block;
  float: left;
}
.wmde-markdown span.frame span span {
  display: block;
  padding: 5px 0 0;
  clear: both;
  color: var(--color-fg-default);
}
.wmde-markdown span.align-center {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-center > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: center;
}
.wmde-markdown span.align-center span img {
  margin: 0 auto;
  text-align: center;
}
.wmde-markdown span.align-right {
  display: block;
  overflow: hidden;
  clear: both;
}
.wmde-markdown span.align-right > span {
  display: block;
  margin: 13px 0 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown span.align-right span img {
  margin: 0;
  text-align: right;
}
.wmde-markdown span.float-left {
  display: block;
  float: left;
  margin-right: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-left span {
  margin: 13px 0 0;
}
.wmde-markdown span.float-right {
  display: block;
  float: right;
  margin-left: 13px;
  overflow: hidden;
}
.wmde-markdown span.float-right > span {
  display: block;
  margin: 13px auto 0;
  overflow: hidden;
  text-align: right;
}
.wmde-markdown code,
.wmde-markdown tt {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: var(--color-neutral-muted);
  border-radius: 6px;
}
.wmde-markdown code br,
.wmde-markdown tt br {
  display: none;
}
.wmde-markdown del code {
  text-decoration: inherit;
}
.wmde-markdown pre code {
  font-size: 100%;
}
.wmde-markdown pre > code {
  padding: 0;
  margin: 0;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
.wmde-markdown pre {
  font-size: 85%;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
}
.wmde-markdown pre code,
.wmde-markdown pre tt {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}
.wmde-markdown pre > code {
  padding: 16px;
  overflow: auto;
  display: block;
}
.wmde-markdown pre > code::-webkit-scrollbar {
  background: transparent;
  width: 8px;
  height: 8px;
}
.wmde-markdown pre > code::-webkit-scrollbar-thumb {
  background: var(--color-fg-muted);
  border-radius: 10px;
}
.wmde-markdown .csv-data td,
.wmde-markdown .csv-data th {
  padding: 5px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
}
.wmde-markdown .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
  background: var(--color-canvas-default);
  border: 0;
}
.wmde-markdown .csv-data tr {
  border-top: 0;
}
.wmde-markdown .csv-data th {
  font-weight: 600;
  background: var(--color-canvas-subtle);
  border-top: 0;
}
.wmde-markdown .footnotes {
  font-size: 12px;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border-default);
}
.wmde-markdown .footnotes ol {
  padding-left: 16px;
}
.wmde-markdown .footnotes li {
  position: relative;
}
.wmde-markdown .footnotes li:target::before {
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -24px;
  pointer-events: none;
  content: '';
  border: 2px solid var(--color-accent-emphasis);
  border-radius: 6px;
}
.wmde-markdown .footnotes li:target {
  color: var(--color-fg-default);
}
.wmde-markdown .footnotes .data-footnote-backref g-emoji {
  font-family: monospace;
}
.wmde-markdown .task-list-item {
  list-style-type: none;
}
.wmde-markdown .task-list-item label {
  font-weight: 400;
}
.wmde-markdown .task-list-item.enabled label {
  cursor: pointer;
}
.wmde-markdown .task-list-item + .wmde-markdown .task-list-item {
  margin-top: 3px;
}
.wmde-markdown .task-list-item .handle {
  display: none;
}
.wmde-markdown .task-list-item-checkbox,
.wmde-markdown .contains-task-list input[type='checkbox'] {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}
.wmde-markdown .contains-task-list:dir(rtl) .task-list-item-checkbox,
.wmde-markdown .contains-task-list:dir(rtl) input[type='checkbox'] {
  margin: 0 -1.6em 0.25em 0.2em;
}
.wmde-markdown ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
}
.wmde-markdown pre {
  position: relative;
}
.wmde-markdown pre .copied {
  visibility: hidden;
  display: flex;
  position: absolute;
  cursor: pointer;
  color: var(--color-fg-default);
  top: 6px;
  right: 6px;
  border-radius: 5px;
  background: var(--color-border-default);
  padding: 6px;
  font-size: 12px;
  transition: all 0.3s;
}
.wmde-markdown pre .copied .octicon-copy {
  display: block;
}
.wmde-markdown pre .copied .octicon-check {
  display: none;
}
.wmde-markdown pre:hover .copied {
  visibility: visible;
}
.wmde-markdown pre:hover .copied:hover {
  background: var(--color-prettylights-syntax-entity-tag);
  color: var(--color-canvas-default);
}
.wmde-markdown pre:hover .copied:active,
.wmde-markdown pre .copied.active {
  background: var(--color-copied-active-bg);
  color: var(--color-canvas-default);
}
.wmde-markdown pre .active .octicon-copy {
  display: none;
}
.wmde-markdown pre .active .octicon-check {
  display: block;
}
.wmde-markdown .markdown-alert {
  padding: 0.5rem 1em;
  color: inherit;
  margin-bottom: 16px;
  border-left: 0.25em solid var(--borderColor-default, var(--color-border-default));
}
.wmde-markdown .markdown-alert > :last-child {
  margin-bottom: 0 !important;
}
.wmde-markdown .markdown-alert .markdown-alert-title {
  display: flex;
  align-items: center;
  line-height: 1;
  font-weight: 500;
  font-size: 14px;
}
.wmde-markdown .markdown-alert .markdown-alert-title svg.octicon {
  margin-right: var(--base-size-8, 8px) !important;
}
.wmde-markdown .markdown-alert.markdown-alert-note {
  border-left-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--fgColor-accent, var(--color-accent-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-tip {
  border-left-color: var(--borderColor-success-emphasis, var(--color-success-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--fgColor-success, var(--color-success-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-important {
  border-left-color: var(--borderColor-done-emphasis, var(--color-done-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--fgColor-done, var(--color-done-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-warning {
  border-left-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--fgColor-attention, var(--color-attention-fg));
}
.wmde-markdown .markdown-alert.markdown-alert-caution {
  border-left-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
}
.wmde-markdown .markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--fgColor-danger, var(--color-danger-fg));
}
.wmde-markdown .highlight-line {
  background-color: var(--color-neutral-muted);
}
.wmde-markdown .code-line.line-number::before {
  display: inline-block;
  width: 1rem;
  text-align: right;
  margin-right: 16px;
  color: var(--color-fg-subtle);
  content: attr(line);
  white-space: nowrap;
}
.wmde-markdown .token.comment,
.wmde-markdown .token.prolog,
.wmde-markdown .token.doctype,
.wmde-markdown .token.cdata {
  color: var(--color-prettylights-syntax-comment);
}
.wmde-markdown .token.namespace {
  opacity: 0.7;
}
.wmde-markdown .token.property,
.wmde-markdown .token.tag,
.wmde-markdown .token.selector,
.wmde-markdown .token.constant,
.wmde-markdown .token.symbol,
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-entity-tag);
}
.wmde-markdown .token.maybe-class-name {
  color: var(--color-prettylights-syntax-variable);
}
.wmde-markdown .token.property-access,
.wmde-markdown .token.operator,
.wmde-markdown .token.boolean,
.wmde-markdown .token.number,
.wmde-markdown .token.selector .token.class,
.wmde-markdown .token.attr-name,
.wmde-markdown .token.string,
.wmde-markdown .token.char,
.wmde-markdown .token.builtin {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.deleted {
  color: var(--color-prettylights-syntax-markup-deleted-text);
}
.wmde-markdown .code-line .token.deleted {
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}
.wmde-markdown .token.inserted {
  color: var(--color-prettylights-syntax-markup-inserted-text);
}
.wmde-markdown .code-line .token.inserted {
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}
.wmde-markdown .token.variable {
  color: var(--color-prettylights-syntax-constant);
}
.wmde-markdown .token.entity,
.wmde-markdown .token.url,
.wmde-markdown .language-css .token.string,
.wmde-markdown .style .token.string {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.color,
.wmde-markdown .token.atrule,
.wmde-markdown .token.attr-value,
.wmde-markdown .token.function,
.wmde-markdown .token.class-name {
  color: var(--color-prettylights-syntax-string);
}
.wmde-markdown .token.rule,
.wmde-markdown .token.regex,
.wmde-markdown .token.important,
.wmde-markdown .token.keyword {
  color: var(--color-prettylights-syntax-keyword);
}
.wmde-markdown .token.coord {
  color: var(--color-prettylights-syntax-meta-diff-range);
}
.wmde-markdown .token.important,
.wmde-markdown .token.bold {
  font-weight: bold;
}
.wmde-markdown .token.italic {
  font-style: italic;
}
.wmde-markdown .token.entity {
  cursor: help;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.legal-document {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 0.5rem;
    background: transparent;
}

.legal-document .wmde-markdown {
    background: transparent;
    color: var(--cratis-text-color);
    font-size: 0.95rem;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Matches the message a command form draws by default: a block under the field, in the error color
   (--color-error, set in index.css). */
.ante-field-error {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-error);
    font-size: 0.875rem;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.ante-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

.user-setup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
}

.user-setup-card {
    position: relative;
    /* Centers vertically while the card fits, and lets the container scroll - rather than clip the top - when it does not. */
    margin: auto;
    background: var(--surface-card);
    border-radius: 12px;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--surface-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.user-setup-header {
    text-align: center;
    padding: 2rem 2.5rem 1.5rem;
    border-bottom: 1px solid var(--surface-border);
}

/* Resets the default <h1> box model when it wraps the logo image rather than the text wordmark -
   .ante-logo__text (below) already sets an explicit margin for the text case. */
.ante-logo__heading {
    margin: 0;
}

.user-setup-card__content {
    padding: 2rem 2.5rem;
}

.user-setup-card__content--stepper {
    padding: 0;
}

.user-setup-logo {
    height: 5.5rem;
    max-width: 22rem;
    width: auto;
    margin: 0 auto 0.5rem auto;
    display: block;
}

.ante-logo__text {
    display: block;
    margin: 0 auto 0.5rem auto;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-color);
}

.user-setup-subtitle {
    font-size: 1rem;
    color: var(--text-color-secondary);
    margin: 0;
}

.user-setup-card__content--stepper .cratis-command-stepper {
    gap: 0;
}

.user-setup-card__content--stepper .cratis-command-stepper__root {
    padding: 2rem 2.5rem 0;
}

.user-setup-card__content--stepper .cratis-command-stepper__list {
    margin-bottom: 1.5rem;
}

.user-setup-card__content--stepper .cratis-command-stepper__panels {
    padding-bottom: 0;
}

.user-setup-card__content--stepper .cratis-command-stepper > div:last-child {
    border-top: 1px solid var(--surface-border);
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
}

/* Waiting state */
.user-setup-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.user-setup-waiting__spinner {
    width: 3rem;
    height: 3rem;
}

.user-setup-waiting__message {
    color: var(--text-color-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Optional host-outcome completion screen */
.user-setup-host-outcome__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Error state */
.user-setup-errors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-setup-errors__item {
    width: 100%;
}

.user-setup-card__content--stepper > .user-setup-errors {
    margin: 1.5rem 2.5rem 0;
}

@media (max-width: 768px) {
    .user-setup-card {
        max-width: calc(100vw - 2rem);
    }

    .user-setup-header,
    .user-setup-card__content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .user-setup-card__content--stepper .cratis-command-stepper__root {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .user-setup-card__content--stepper .cratis-command-stepper > div:last-child {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .user-setup-card__content--stepper > .user-setup-errors {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .user-setup-logo {
        height: 4rem;
        max-width: 14rem;
    }
}
/* Copyright (c) Cratis. All rights reserved. */
/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */

/* Deliberately self-contained: this is the fallback for when providers (PrimeReact, Cratis Components)
   or their own styling failed to initialize, so it never assumes a Cratis design token resolved -
   every color falls back to a hard-coded, neutral value matching the lobby's own dark-first default
   (index.css) rather than depending on one. */
.render-recovery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text-color, #e6e6e6);
    background: var(--surface-ground, #111318);
}

.render-recovery__title {
    font-size: 1.5rem;
    margin: 0;
}

.render-recovery__message {
    max-width: 32rem;
    margin: 0;
}

/* The button carries its own pair instead of the theme's primary color: the fallback must be readable
   whichever theme failed, and Lara's dark primary (#34d399) under white text is only 1.9:1. White on
   #2563eb is 5.2:1 and on the hover #1d4ed8 6.7:1 (Cratis/Ante#150). */
.render-recovery__action {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
}

.render-recovery__action:hover {
    border-color: #1d4ed8;
    background: #1d4ed8;
}

.render-recovery__action:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .render-recovery__action {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    .render-recovery__action:hover {
        border-color: Highlight;
    }

    .render-recovery__action:focus-visible {
        outline-color: Highlight;
    }
}
/*$vite$:1*/