/* ============================================================
   BITBI — Utility Classes
   @layer utilities — skip-link, sr-only
   ============================================================ */

@layer utilities {
    .sr-only {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .skip-link {
        position: absolute;
        inset-block-start: -100%;
        inset-inline-start: var(--space-4);
        z-index: 10000;
        padding: var(--space-3) var(--space-5);
        background: var(--color-cyan);
        color: var(--color-midnight);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        font-weight: 700;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        transition: inset-block-start 0.2s var(--ease-smooth);

        &:focus {
            inset-block-start: 0;
        }
    }

    /* Layout utilities used in JS-generated content and templates */
    .rounded-2xl { border-radius: var(--radius-xl); }
    .rounded-xl { border-radius: var(--radius-lg); }
    .overflow-hidden { overflow: hidden; }
    .relative { position: relative; }
    .pointer-events-none { pointer-events: none; }
}