#occupancy {
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    display: grid;
    place-items: center ;
    background: var(--surface-raised);
    color: var(--text-on-field);

    &.is-success { --occupancy-ink: var(--status-success-text) }
    &.is-warning { --occupancy-ink: var(--status-warning-text) }
    &.is-danger { --occupancy-ink: var(--status-danger-text) }
    &.is-info { --occupancy-ink: var(--status-info-text) }

    > .message {
        justify-self: stretch;
        margin-block: 1rem;
    }

    h5 {
        margin-block: 0.5rem;
        font-size: 1.25rem;
        color: var(--text-on-field-subtle);
        text-align: center;
    }

    p {
        margin-block: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: 0.25rem;

        strong {
            font-size: 1.25rem;
            color: var(--occupancy-ink);
        }

        small {
            color: var(--text-on-field-subtle);
            font-size: 0.75rem;
            margin-inline-start: 0.25rem;
        }
    }

    progress {
        inline-size: 100%;
        block-size: 0.5rem;
        border: none;
        border-radius: 0.25rem;
        background: var(--surface-neutral);
        margin: 1rem 0;

        &::-webkit-progress-bar {
            background: var(--surface-neutral);
            border-radius: 0.25rem;
        }
    }
}