@media (max-width: 760px) {
    :root:has(.app-primary-nav) {
        --header-height: 64px;
        scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
    body:has(.app-primary-nav) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    .site-header:has(.app-primary-nav) .site-header__inner { grid-template-rows: 64px; }
    .site-header .app-primary-nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 45;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none;
        grid-row: auto;
        grid-column: auto;
        gap: 4px;
        width: 100%;
        height: calc(72px + env(safe-area-inset-bottom));
        margin: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid color-mix(in srgb, var(--green) 75%, var(--ink));
        background: var(--green);
        box-shadow: 0 -4px 20px color-mix(in srgb,var(--shadow-color) 22%,transparent);
    }
    .site-header .app-primary-nav > a,
    .site-header .app-primary-nav > .app-menu > summary {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        min-height: 60px;
        padding: 5px 2px;
        border-radius: 12px;
        color: var(--green-ink);
        font-size: var(--text-small);
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -.02em;
    }
    .site-header .app-primary-nav .nav-glyph > i { font-size: 23px; }
    .site-header .app-primary-nav .nav-glyph:has([data-inbox-badge]:not([hidden])) { display: inline-grid; }
    .site-header .app-primary-nav [data-inbox-badge] { position: absolute; top: -8px; left: calc(100% - 4px); right: auto; margin: 0; box-shadow: 0 0 0 2px var(--green); }
    .site-header .app-primary-nav > a.active [data-inbox-badge] { box-shadow: 0 0 0 2px var(--surface); }
    .site-header .app-primary-nav > a:hover { background: color-mix(in srgb, var(--surface-white) 12%, var(--green)); color: var(--green-ink); }
    .site-header .app-primary-nav > a.active { background: var(--surface); color: var(--green); font-weight: 700; }
    .site-header .app-primary-nav > .app-menu.active > summary,
    .site-header .app-primary-nav > .app-menu[open] > summary { background: var(--surface); color: var(--green); font-weight: 700; }
    .site-header .app-primary-nav > a:focus-visible { outline: 2px solid var(--surface-white); outline-offset: -3px; }
    .site-header .app-primary-nav > a.active:focus-visible { outline-color: var(--green); }
    .site-header .app-primary-nav > .app-menu > summary:focus-visible { outline: 2px solid var(--surface-white); outline-offset: -3px; }
    .site-header .app-primary-nav > .app-menu:is(.active, [open]) > summary:focus-visible { outline-color: var(--green); }
    .site-header .app-primary-nav > a.active > span::after { display: none; }
    body:has(.app-primary-nav) .reading-notice { bottom: calc(88px + env(safe-area-inset-bottom)); }
    :root:has(body.document-editor-page) { scroll-padding-bottom: env(safe-area-inset-bottom); }
    body.document-editor-page { padding-bottom: env(safe-area-inset-bottom); }
    .document-editor-page .site-header .app-primary-nav { display: none; }
}
@media (max-width: 370px) {
    .site-header .brand, .has-social-rails .site-header .brand { font-size: var(--text-card); }
}