/* Top-bar destinations use the same centered, scrollable popup as Admin tools. */
[data-site-navigation-open] { font: inherit; font-weight: 800; cursor: pointer; }
.site-nav-modal-item > button.nav-link { border: 0; background: transparent; color: var(--ink); }
html.site-navigation-modal-open, html.site-navigation-modal-open body { overflow: hidden !important; }

dialog.site-navigation-modal {
    position: fixed;
    box-sizing: border-box;
    width: min(860px, calc(100vw - 32px));
    max-width: 860px;
    max-height: calc(100vh - 32px);
    max-height: min(88dvh, calc(100dvh - 32px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--theme-line, var(--line, #b7c6d3));
    border-radius: 20px;
    background: var(--theme-reading-surface, var(--panel-strong, #fff));
    color: var(--ink, #192c40);
    box-shadow: var(--shadow, 0 24px 80px #08122166);
    font-family: var(--font-ui, var(--font, system-ui, sans-serif));
}
dialog.site-navigation-modal[open] { display: flex; flex-direction: column; }
dialog.site-navigation-modal:not([open]), .site-navigation-modal [hidden] { display: none !important; }
dialog.site-navigation-modal::backdrop { background: #07111dbf; }
dialog.site-navigation-modal.is-dialog-fallback { inset: 0; z-index: 2147483000; box-shadow: 0 0 0 100vmax #07111dbf; }
.site-navigation-modal *, .site-navigation-modal *::before, .site-navigation-modal *::after { box-sizing: border-box; }
.site-navigation-modal-header {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between;
    gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--theme-line, var(--line, #b7c6d3));
}
.site-navigation-modal-header h2 { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); color: inherit; }
.site-navigation-heading-icon { flex: 0 0 auto; font-size: 1.5em; line-height: 1; }
.site-navigation-modal-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px; }
.site-navigation-close {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
    min-height: 44px; padding: 9px 14px; border: 1px solid var(--theme-line, var(--line, #b7c6d3));
    border-radius: 10px; background: var(--theme-control-readable, var(--panel-strong));
    color: var(--ink); font: inherit; font-weight: 700; line-height: 1.3; cursor: pointer;
}
.site-navigation-close > span { font-size: 1.5rem; line-height: 1; }
.site-navigation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.site-navigation-modal .site-navigation-card {
    display: grid; align-content: start; justify-items: start; gap: 9px;
    min-width: 0; width: 100%; min-height: 190px; margin: 0; padding: 18px;
    border: 1px solid var(--theme-line, var(--line, #b7c6d3)); border-radius: 14px;
    background: var(--theme-reading-surface, var(--panel-strong)); color: var(--ink);
    box-shadow: none; font: inherit; line-height: 1.45; text-align: start;
    text-decoration: none; overflow-wrap: anywhere; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.site-navigation-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-bottom: 3px;
    border: 1px solid var(--theme-line, var(--line, #b7c6d3)); border-radius: 13px;
    background: var(--theme-reading-surface, var(--panel-strong));
    background: color-mix(in srgb, var(--theme-readable-link, var(--ink)) 9%, var(--theme-reading-surface, var(--panel-strong)));
    color: var(--theme-readable-link, var(--ink)); font-size: 1.65rem; line-height: 1;
}
.site-navigation-modal .site-navigation-card-title {
    min-width: 0; margin: 0; color: var(--theme-readable-link, var(--ink));
    font-size: 1.3rem; font-weight: 800; line-height: 1.25;
}
.site-navigation-modal .site-navigation-card-description {
    min-width: 0; margin: 0; color: var(--muted, var(--ink));
    font-size: .94rem; font-weight: 400; line-height: 1.5;
}
.site-navigation-modal :is(.site-navigation-card, .site-navigation-close, .site-navigation-profile-link):hover {
    border-color: var(--theme-readable-link, var(--ink));
    box-shadow: inset 0 0 0 1px var(--theme-readable-link, var(--ink));
    background: var(--theme-control-hover-readable, var(--panel-strong)); color: var(--ink); transform: none;
}
/* Keep colorful headings on their contrast-checked surface in every state. */
.site-navigation-modal .site-navigation-card:hover { background: var(--theme-reading-surface, var(--panel-strong)); }
.site-navigation-modal .site-navigation-card.is-active {
    border-color: var(--theme-readable-link, var(--ink));
    box-shadow: inset 0 0 0 1px var(--theme-readable-link, var(--ink));
}
.site-navigation-modal :is(button, input, select, a):focus-visible { outline: 3px solid var(--theme-readable-link, var(--ink)); outline-offset: 3px; }
.site-navigation-logout { display: flex; margin: 0; padding: 0; min-width: 0; }
.site-navigation-profile-top {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
    gap: 12px; margin-bottom: 20px; padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-line, var(--line, #b7c6d3));
}
.site-navigation-theme-control { min-width: 0; }
.site-navigation-theme-status {
    margin: -6px 0 16px; padding: 10px 12px; border: 1px solid var(--theme-line, var(--line, #b7c6d3));
    border-radius: 10px; color: var(--ink); background: var(--theme-control-readable, var(--panel-strong));
    font-size: .9rem; line-height: 1.5;
}
.site-navigation-theme-status a { color: var(--theme-readable-link, var(--ink)); text-decoration: underline; }
.site-navigation-theme-control .compact-theme-picker {
    display: block; width: 100%; min-width: 0; max-width: none; height: auto;
    margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0;
}
html body .site-navigation-theme-control [data-theme-picker].is-theme-gallery-ready .theme-gallery-trigger {
    min-height: 60px; padding: 10px 14px; text-align: start;
    background: var(--theme-control-readable, var(--panel-strong)); color: var(--ink);
}
html body .site-navigation-theme-control [data-theme-picker] .theme-gallery-trigger-copy strong { font-size: 1rem; }
.site-navigation-theme-control .theme-picker-native label { margin: 0; color: var(--muted); }
.site-navigation-profile-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 60px; padding: 10px 20px; border: 1px solid var(--theme-readable-link, var(--ink));
    border-radius: 12px; color: var(--ink); background: var(--theme-control-readable, var(--panel-strong));
    font-weight: 800; text-decoration: none; white-space: nowrap;
}
@media (max-width: 760px) {
    .site-navigation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .site-navigation-modal .site-navigation-card { min-height: 180px; padding: 16px; }
    .site-navigation-modal .site-navigation-card-title { font-size: 1.2rem; }
    .site-navigation-modal-header { padding: 12px 14px; }
    .site-navigation-modal-body { padding: 14px; }
    .site-navigation-profile-top { gap: 8px; margin-bottom: 14px; padding-bottom: 14px; }
    .site-navigation-profile-link { gap: 6px; padding: 10px 12px; font-size: .88rem; }
    html body .site-navigation-theme-control [data-theme-picker].is-theme-gallery-ready .theme-gallery-trigger { padding: 8px 10px; gap: 8px; }
}
@media (max-width: 420px) {
    dialog.site-navigation-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
    .site-navigation-grid { grid-template-columns: minmax(0, 1fr); }
    .site-navigation-modal .site-navigation-card { grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; row-gap: 5px; min-height: 112px; padding: 14px; }
    .site-navigation-card-icon { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
    .site-navigation-modal :is(.site-navigation-card-title, .site-navigation-card-description) { grid-column: 2; }
    .site-navigation-modal .site-navigation-card-title { font-size: 1.1rem; }
    .site-navigation-profile-link { padding: 8px; }
    .site-navigation-profile-link > span { display: none; }
    html body .site-navigation-theme-control [data-theme-picker] .theme-gallery-trigger-icon { display: none; }
    html body .site-navigation-theme-control [data-theme-picker].is-theme-gallery-ready .theme-gallery-trigger { grid-template-columns: minmax(0, 1fr) auto; }
    html body .site-navigation-theme-control [data-theme-picker] .theme-gallery-trigger-copy strong { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .site-navigation-modal .site-navigation-card { transition: none; } }