@layer reset {
    * {
        box-sizing: border-box;
    }

    html,
    body {
        min-height: 100%;
        margin: 0;
        background: var(--bg);
    }

    button,
    input,
    textarea,
    select {
        font: inherit;
    }

    a {
        color: inherit;
    }

    button {
        cursor: pointer;
    }

    button:disabled {
        cursor: not-allowed;
        opacity: 0.56;
    }
}

@layer base {
    /* Scrollbars follow the theme instead of the OS. Both properties inherit, so declaring them on
       the root covers every scroll container in the app. */
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }

    /* WebKit and Blink ignore the standard properties above when these pseudo-elements are present,
       and they do not inherit, so the full set is declared globally. Styling them does opt out of
       macOS overlay scrollbars — the bar becomes permanently visible, which in a three-pane layout
       reads as a feature: you can see at a glance which pane has more content. */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    /* The transparent border plus padding-box clip insets the thumb, so it reads as a slim pill
       floating in the gutter rather than a bar filling it. */
    ::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: var(--radius-pill);
        background: var(--scrollbar-thumb);
        background-clip: padding-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover);
        background-clip: padding-box;
    }

    /* One visible focus ring for the whole app. :where() keeps the selector easy to override
       deliberately without letting ordinary control styles suppress keyboard focus by accident. */
    :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
        outline: var(--focus-ring-width) solid var(--focus-ring);
        outline-offset: var(--focus-ring-offset);
        border-radius: var(--radius-lg);
    }

    :focus:not(:focus-visible) {
        outline: none;
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        .cursor {
            animation: none;
            opacity: 1;
        }
    }
}

@layer utilities {
    .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;
    }
}