/* ===================================================================================================
   PreemptiveScheduler base layer (feature K) — reset + element defaults, token-driven. Since the
   phase-5 cutover removed Bootstrap, these defaults apply unopposed. Everything lives in @layer ps-base
   (the lowest author layer), so the unlayered control/button skins (controls.css) and any component
   styles override these element defaults by virtue of being unlayered, while scoped component CSS and
   utilities stack cleanly on top.
   =================================================================================================== */

@layer ps-base, ps-utilities;

@layer ps-base {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
        font-family: var(--ps-font-sans);
        font-size: var(--ps-text-md);
        line-height: var(--ps-line-body);
        color: var(--ps-color-text);
        background-color: var(--ps-color-surface);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl,
    dd,
    figure,
    blockquote,
    pre,
    fieldset {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: var(--ps-line-heading);
        font-weight: var(--ps-weight-semibold);
    }

    h1 { font-size: var(--ps-text-2xl); }
    h2 { font-size: var(--ps-text-xl); }
    h3 { font-size: var(--ps-text-lg); }
    h4, h5, h6 { font-size: var(--ps-text-md); }

    a {
        color: var(--ps-color-accent);
        text-decoration: underline;
    }

    a:hover {
        color: var(--ps-color-accent-emphasis);
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--ps-font-mono);
    }

    code {
        font-size: 0.875em;
    }

    table {
        border-collapse: collapse;
        caption-side: bottom;
    }

    label {
        display: inline-block;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    textarea {
        resize: vertical;
    }

    img,
    svg {
        vertical-align: middle;
    }

    hr {
        margin-block: var(--ps-space-4);
        border: 0;
        border-block-start: 1px solid var(--ps-color-border);
    }

    :focus-visible {
        outline: 2px solid var(--ps-color-focus);
        outline-offset: 2px;
    }

    /* Accessible-hiding recipe: present to assistive tech, removed from the visual layout AND the scroll height.
       Every declaration is !important and the legacy `clip` rect rides alongside `clip-path` ON PURPOSE:
         - This rule lives in @layer ps-base (the lowest author layer), so without !important an unlayered rule
           (e.g. a component's scoped CSS, which Blazor emits unlayered) or any more-specific selector would win
           and drag the element back into layout. !important inside a layer beats every non-important author rule
           regardless of layer order — the robust way to guarantee the hide.
         - `clip: rect(1px,1px,1px,1px)` is what actually clips a `display: table` element. `overflow: hidden`
           has no clipping effect on a table wrapper box, so a tall <table class="visually-hidden"> (e.g. a
           chart's per-bucket screen-reader data table with hundreds of rows) would otherwise extend the page
           scroll height to thousands of px even while position:absolute removes it from flow. The legacy `clip`
           clips an absolutely-positioned box of ANY display type, bounding the page to its visible content. */
    .visually-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(1px, 1px, 1px, 1px) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}