/* Shared top navigation — keep height consistent across all pages */
:root {
    --nav-control-h: 44px;
    --nav-height: calc(var(--nav-control-h) + 20px);
}

.topnav {
    position: fixed;
    inset: 0 0 auto 0;
    min-height: calc(var(--nav-height) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    background: var(--overlay-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
}

.topnav-inner {
    max-width: var(--container-max);
    min-height: var(--nav-height);
    margin: 0 auto;
    padding: 10px var(--container-pad);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.brand-sep { color: var(--text-dim); margin: 0 4px; }
.brand-sub { color: var(--gold); font-weight: 600; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.78rem;
    white-space: nowrap;
}

.nav-links a:hover { color: var(--gold); }

.nav-links a.active {
    color: var(--gold);
    border-color: rgba(201, 168, 76, 0.45);
    background: var(--gold-dim);
}

.topnav-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.topnav-chip {
    box-sizing: border-box;
    min-height: var(--nav-control-h);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    white-space: nowrap;
}

.topnav-chip span.label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    line-height: 1.2;
}

.topnav-chip span.val {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--gold);
    font-weight: 600;
    line-height: 1.2;
}

.num-toggle {
    display: inline-flex;
    align-items: stretch;
    height: var(--nav-control-h);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card);
    flex-shrink: 0;
}

.num-toggle button {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0 10px;
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}

.num-toggle button + button { border-left: 1px solid var(--border); }

.num-toggle button.active {
    color: var(--gold);
    background: var(--gold-dim);
}

.theme-toggle {
    width: var(--nav-control-h);
    height: var(--nav-control-h);
    border: none;
    border-radius: 10px;
    background: var(--theme-btn-bg);
    color: var(--theme-btn-fg);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle:hover { color: var(--gold); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: block; }

@media (max-width: 1100px) {
    .topnav-inner { gap: 12px 16px; }
    .topnav-meta { margin-left: 0; width: 100%; }
}

@media (max-width: 1024px) {
    .topnav { position: sticky; top: 0; }
    body { padding-top: var(--safe-top); }
}

@media (max-width: 640px) {
    .brand { width: 100%; }
    .nav-links { width: 100%; }
    .nav-links a {
        flex: 1;
        justify-content: center;
        text-align: center;
        font-size: 0.72rem;
        padding: 6px 8px;
    }
    .topnav-chip { padding: 5px 8px; }
}