.app-typography-hierarchy {
    --rosettax-surface-background: var(--bs-body-bg, #fff);
    --rosettax-control-background: color-mix(in srgb, var(--bs-body-color, #212529) 6%, var(--bs-body-bg, #fff));
    --rosettax-text-color: var(--bs-body-color, #212529);
    --rosettax-border-color: color-mix(in srgb, var(--bs-body-color, #212529) 22%, var(--bs-body-bg, #fff));
}

.rosettax-navigation {
    width: 352px;
    min-width: 352px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

.rosettax-navigation-toggle {
    display: none;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 600;
    background: var(--rosettax-control-background);
    border-bottom: 1px solid var(--rosettax-border-color);
}

.rosettax-navigation-toggle:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -3px;
}

.rosettax-reference-table .dash-cell,
.rosettax-reference-table .dash-header {
    vertical-align: middle !important;
}

.rosettax-table-validation {
    color: var(--bs-danger);
    margin-top: 8px;
    font-size: 0.88rem;
}

.rosettax-table-validation:empty {
    display: none;
}

@media (max-width: 991px) {
    .rosettax-application-shell {
        flex-direction: column;
        align-items: stretch !important;
    }

    .rosettax-navigation {
        width: 100%;
        min-width: 0;
        position: static;
        --rosettax-sidebar-height: min(70dvh, 640px);
    }

    .rosettax-navigation-toggle {
        display: list-item;
        list-style-position: inside;
    }

    #page-content {
        width: 100%;
        padding: 12px;
    }
}