/* Local colour tokens for the shared studio navigation. */
:root {
    --studio-header-height: 72px;
    --studio-nav-accent: #ffc38b;
    --studio-toggle-border: rgba(255, 195, 139, .34);
    --studio-toggle-ink: #fff8f3;
    --studio-toggle-background: rgba(255, 138, 61, .1);
    --studio-toggle-active-background: rgba(255, 138, 61, .2);
    --studio-toggle-shadow: inset 0 1px rgba(255, 255, 255, .09);
    --studio-nav-background: #15100f;
    --studio-nav-line: rgba(255, 195, 139, .18);
    --studio-nav-ink: #fff8f3;
    --studio-nav-muted: rgba(255, 244, 237, .68);
    --studio-nav-cta-ink: #26120b;
}

@media (max-width: 900px) {
    #main-header {
        display: block !important;
        height: 72px;
        min-height: 72px;
        padding: 0 !important;
    }
    #main-nav {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        height: 72px;
        min-height: 72px;
        margin: 0;
        padding-inline: 16px;
        gap: 8px;
    }
    #main-nav .nav-links { display: none !important; }
    #main-nav .nav-logo {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    #main-nav .nav-logo-mark { width: 30px; min-width: 30px; height: 30px; }
    #main-nav .nav-logo-copy { overflow: hidden; text-overflow: ellipsis; }
    #main-nav .studio-local-nav-toggle {
        display: grid;
        order: 2;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
    }
    #main-nav .help-apps { margin-left: auto; order: 3; }
    #main-nav .help-apps-toggle { width: 44px; height: 44px; }
}

@media (max-width: 420px) {
    #main-nav .studio-local-nav-toggle,
    #main-nav .help-apps,
    #main-nav .help-apps-toggle { flex-basis: 44px; width: 44px; min-width: 44px; height: 44px; }
    #main-nav .help-apps { margin-left: 0; }
}

@media (max-width: 300px) {
    #main-nav { padding-inline: 12px; gap: 6px; }
    #main-nav .nav-logo-mark { width: 28px; min-width: 28px; height: 28px; }
    #main-nav .nav-logo-domain,
    #main-nav .nav-logo-copy .logo-dot { display: none; }
    #main-nav .studio-local-nav-toggle,
    #main-nav .help-apps,
    #main-nav .help-apps-toggle { flex-basis: 40px; width: 40px; min-width: 40px; height: 40px; }
}

@media (max-width: 235px) {
    #main-nav .nav-logo-copy { display: none; }
}