/* Shared site navigation (nav.js). Colours follow the page's theme variables
   when it loads themes.css, with dark fallbacks for pages that do not. */

.nn-icon { display: block; flex-shrink: 0; }

/* The menus inherit the page font, with a fallback for pages that set none
   (Glance), which otherwise drew the tab bar in Times. */
.nn-site-nav,
.nn-tabbar,
.nn-sheet,
.nn-menu {
    font-family: var(--font-body, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ── Header links (tablet and desktop) ─────────────────────────────────── */
.nn-site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.nn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 2px;
    background: transparent;
    color: var(--theme-text-secondary, #9aa0ab);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nn-link:hover,
.nn-link:focus-visible,
.nn-more-btn[aria-expanded="true"] {
    color: var(--theme-text, #e1e4ea);
    background: var(--theme-hover, rgba(255, 255, 255, 0.06));
    border-color: var(--theme-border, rgba(255, 255, 255, 0.18));
    outline: none;
}

.nn-link.is-current { color: var(--theme-text, #e1e4ea); }

.nn-more { position: relative; }

.nn-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10040;
    width: 260px;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--theme-border, #3a3f4b);
    border-radius: 4px;
    background: var(--theme-surface, #161b24);
    box-shadow: 0 16px 40px var(--theme-shadow, rgba(0, 0, 0, 0.45));
}

.nn-menu[hidden] { display: none; }

.nn-menu-section + .nn-menu-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.08));
}

.nn-menu-heading {
    padding: 6px 8px 4px;
    color: var(--theme-text-muted, #7b8190);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nn-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 8px;
    border-radius: 3px;
    color: var(--theme-text, #e1e4ea);
    font-size: 13px;
    text-decoration: none;
}

.nn-menu-item .nn-icon { color: var(--theme-text-secondary, #9aa0ab); }

.nn-menu-item:hover,
.nn-menu-item:focus-visible {
    background: var(--theme-hover, rgba(255, 255, 255, 0.06));
    outline: none;
}

.nn-menu-item.is-current { background: var(--theme-raised, rgba(255, 255, 255, 0.05)); }

/* Narrow windows: keep the icons, drop the words, so the header never overflows. */
@media (max-width: 1180px) {
    .nn-site-nav .nn-link:not(.nn-more-btn) span { display: none; }
    .nn-site-nav .nn-link:not(.nn-more-btn) { padding: 6px 8px; }
}

/* ── Phone tab bar ─────────────────────────────────────────────────────── */
.nn-tabbar { display: none; }

@media (max-width: 768px) {
    .nn-site-nav { display: none !important; }

    .nn-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9000;
        display: flex;
        align-items: stretch;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: var(--theme-tabbar, rgba(19, 23, 34, 0.94));
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid var(--theme-border-subtle, rgba(54, 58, 69, 0.6));
    }

    body.nn-has-tabbar { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    .nn-tab {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px 5px;
        border: 0;
        background: none;
        color: var(--theme-text-muted, #7b8190);
        font: inherit;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .nn-tab .nn-icon {
        width: 34px;
        height: 24px;
        padding: 2px 7px;
        border-radius: 12px;
        box-sizing: border-box;
        transition: background-color 0.15s ease;
    }

    .nn-tab.is-current { color: var(--theme-text, #e1e4ea); }
    .nn-tab.is-current .nn-icon { background: var(--theme-raised, rgba(255, 255, 255, 0.10)); }
    .nn-tab:active .nn-icon { background: var(--theme-hover, rgba(255, 255, 255, 0.14)); }
    .nn-tab:focus-visible { outline: 2px solid var(--theme-accent-light, #7ab8cc); outline-offset: -4px; }

    .nn-tab span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── More sheet ────────────────────────────────────────────────────────── */
.nn-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: var(--theme-backdrop, rgba(0, 0, 0, 0.55));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.nn-sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.nn-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10060;
    max-height: 82vh;
    max-height: 82dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--theme-border, #3a3f4b);
    border-radius: 14px 14px 0 0;
    background: var(--theme-surface, #161b24);
    color: var(--theme-text, #e1e4ea);
    box-shadow: 0 -16px 40px var(--theme-shadow, rgba(0, 0, 0, 0.45));
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.28s;
}

.nn-sheet.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}

.nn-sheet:focus { outline: none; }

.nn-sheet-handle {
    width: 36px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 2px;
    background: var(--theme-border, #3a3f4b);
}

.nn-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
}

.nn-sheet-title { font-size: 16px; font-weight: 700; }

.nn-sheet-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.10));
    border-radius: 50%;
    background: transparent;
    color: var(--theme-text-secondary, #9aa0ab);
    cursor: pointer;
}

.nn-sheet .nn-menu-item { min-height: 44px; font-size: 15px; }

.nn-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 0 4px;
}

.nn-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 8px 4px;
    border: 1px solid var(--theme-border-subtle, rgba(255, 255, 255, 0.10));
    border-radius: 8px;
    background: var(--theme-raised, rgba(255, 255, 255, 0.04));
    color: var(--theme-text, #e1e4ea);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nn-action:active { background: var(--theme-hover, rgba(255, 255, 255, 0.10)); }

@media (prefers-reduced-motion: reduce) {
    .nn-sheet,
    .nn-sheet.open,
    .nn-sheet-backdrop { transition: none; }
}