/* Base styles that complement the Tailwind utility classes. */

:root {
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: rgb(99 102 241 / 0.22);
}

/* Slim scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

/* Lucide renders <svg> next to the placeholder <i>; never leave a gap. */
svg.lucide {
    stroke-width: 2;
    flex-shrink: 0;
}

/* Toasts */
.toast {
    transition: opacity 180ms ease, transform 180ms ease;
}

.toast-enter {
    opacity: 0;
    transform: translateY(10px);
}

/* Kill the flash of an unstyled status swap */
.htmx-swapping {
    opacity: 0.4;
    transition: opacity 120ms ease;
}

/* Inputs keep a consistent focus ring across browsers */
input,
select,
textarea {
    appearance: none;
}

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

@media print {
    aside,
    header,
    #toast-stack,
    #modal-root {
        display: none !important;
    }
}