@layer components {

    /* offline-status — twin pieces driven by the offline_status_controller:
       a tiny "Offline" badge that only appears when the heartbeat probe
       fails, and a discrete top-of-page progress bar that fills as the
       service worker preloads the offline manifest. */

    .offline-status {
        --offline-bar-height: 3px;
        --offline-bar-color: var(--color-considering);

        contain: layout;
        position: sticky;
        inset-block-start: 0;
        z-index: 5;
        pointer-events: none;
    }

    .offline-status__badge {
        background-color: var(--color-status-major-bg);
        border: 1px solid color-mix(in oklch, var(--color-status-major) 30%, transparent);
        border-radius: 999px;
        color: var(--color-status-major-ink);
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        font-family: var(--font-data);
        font-size: var(--text-xx-small);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding-block: 0.15em;
        padding-inline: 0.6em 0.75em;
        pointer-events: auto;

        position: absolute;
        inset-block-end: 0;
        inset-inline-end: var(--main-padding);
        transform: translateY(50%);
        z-index: 6;

        @starting-style {
            opacity: 0;
            transform: translateY(calc(50% - 0.5em));
        }

        opacity: 1;
        transition: opacity 200ms ease, transform 200ms ease;
    }

    .offline-status__badge[hidden] {
        display: none;
    }

    .offline-status__badge::before {
        background-color: var(--color-status-major);
        block-size: 0.5em;
        border-radius: 50%;
        content: "";
        display: block;
        flex-shrink: 0;
        inline-size: 0.5em;
        animation: offline-pulse 1.6s ease-in-out infinite;
    }

    @keyframes offline-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.35; }
    }

    .cache-progress {
        block-size: var(--offline-bar-height);
        inline-size: 100%;
        background-color: color-mix(in oklch, var(--color-considering) 12%, transparent);
        overflow: hidden;
        opacity: 1;
        transition: opacity 600ms ease 800ms;
    }

    .cache-progress[hidden] {
        display: none;
    }

    .cache-progress.is-complete {
        opacity: 0;
    }

    .cache-progress__bar {
        background-color: var(--offline-bar-color);
        block-size: 100%;
        inline-size: 0%;
        transition: inline-size 400ms ease;
    }

    .cache-progress.is-complete .cache-progress__bar {
        background-color: var(--color-status-good);
    }

    /* Badge is in <header>; wrapper only needs height when the progress bar is visible. */
    .offline-status:has(.cache-progress[hidden]) {
        block-size: 0;
    }
}