/* Shared X-style navigation: full sidebar, icon rail, then a mobile drawer. */
:root { --sidebar-width: 248px; --nav-h: 0px; }
body { padding-left: var(--sidebar-width); }
nav.site-nav { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); height: 100dvh; padding: 20px 12px 12px; border: 0; border-right: 1px solid var(--surface-muted); z-index: 100; }
nav.site-nav > .container { display: flex; flex-direction: column; align-items: stretch; gap: 18px; height: 100%; padding: 0; }
nav.site-nav .logo { padding: 0 8px; min-height: 42px; }
nav.site-nav .logo-text { font-size: 18px; }
.nav-brand-row { display: flex; align-items: center; gap: 6px; min-height: 42px; }
nav.site-nav .nav-brand-row .logo { min-width: 0; flex: 1; padding: 0 4px; gap: 8px; }
nav.site-nav .nav-brand-row .logo img { display: block; width: 36px; height: 36px; flex-shrink: 0; object-fit: contain; border-radius: 0; }
nav.site-nav .nav-brand-row .logo-text { font-size: 16px; }
.sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 36px; padding: 6px; border: 0; border-radius: 9px; color: var(--text-secondary); background: transparent; cursor: pointer; }
.sidebar-toggle:hover { background: var(--surface-muted); color: var(--text); }
.sidebar-toggle svg { width: 20px; height: 20px; }
.language-globe { display: none; }
.lang-toggle.is-open .language-globe { transform: none; }
nav.site-nav .nav-menu { position: static; display: flex; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; padding: 2px; background: transparent; border: 0; box-shadow: none; }
nav.site-nav .nav-menu a, nav.site-nav .nav-menu a.active { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-height: 44px; height: auto; padding: 10px 13px; border-radius: 999px; text-decoration: none; color: var(--text); flex-shrink: 0; }
nav.site-nav .nav-menu a:hover { background: var(--surface-muted); }
nav.site-nav .nav-menu a.active { background: var(--surface-soft); font-weight: 900; }
nav.site-nav .nav-menu .nav-label { display: inline; font-size: 15px; line-height: 1.3; white-space: normal; }
nav.site-nav .nav-icon { width: 23px; height: 23px; flex-shrink: 0; }
nav.site-nav .nav-menu a::after, nav.site-nav .nav-menu a::before { display: none; }
nav.site-nav .nav-right { margin: 0; padding: 12px 8px 0; border-top: 1px solid var(--surface-muted); justify-content: flex-start; gap: 14px; }
nav.site-nav .nav-toggle { display: none; }
nav.site-nav .theme-toggle, nav.site-nav .lang-toggle { min-width: 44px; min-height: 44px; }
nav.site-nav .theme-menu, nav.site-nav .lang-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; max-height: min(70dvh, 480px); overflow-y: auto; }
nav.site-nav :is(a, button):focus-visible, .nav-scrim:focus-visible, .skip-content:focus-visible { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.nav-scrim { display: none; }
.skip-content { position: fixed; left: calc(var(--sidebar-width) + 12px); top: -100px; z-index: 200; padding: 10px 18px; border-radius: 12px; background: var(--surface); color: var(--text); }
.skip-content:focus { top: 10px; }
@media (min-width: 601px) {
 html[data-sidebar="collapsed"] { --sidebar-width: 80px; }
 html[data-sidebar="collapsed"] nav.site-nav { padding: 16px 10px 10px; }
 html[data-sidebar="collapsed"] .nav-brand-row { flex-direction: column; gap: 4px; }
 html[data-sidebar="collapsed"] nav.site-nav .logo { padding: 0; justify-content: center; flex: none; }
 html[data-sidebar="collapsed"] nav.site-nav .logo img { display: block; }
 html[data-sidebar="collapsed"] nav.site-nav .logo-text,
 html[data-sidebar="collapsed"] nav.site-nav .nav-menu .nav-label,
 html[data-sidebar="collapsed"] .language-current,
 html[data-sidebar="collapsed"] .lang-toggle > svg:not(.language-globe) { display: none; }
 html[data-sidebar="collapsed"] .lang-toggle { width: 44px; padding: 0; justify-content: center; }
 html[data-sidebar="collapsed"] .lang-toggle .language-globe { display: block; width: 20px; height: 20px; }
 html[data-sidebar="collapsed"] nav.site-nav .nav-menu a { justify-content: center; padding: 11px; }
 html[data-sidebar="collapsed"] nav.site-nav .nav-right { flex-direction: column; gap: 4px; padding: 8px 0 0; }
}
@media (max-width: 600px) {
 :root { --sidebar-width: 0px; --nav-h: 64px; }
 body { padding-left: 0; padding-top: var(--nav-h); }
 nav.site-nav { inset: 0 0 auto; width: 100%; height: var(--nav-h); padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--surface-muted); }
 nav.site-nav > .container { flex-direction: row; align-items: center; gap: 6px; }
 nav.site-nav .logo { padding: 0; min-width: 0; flex: 1; }
 nav.site-nav .logo img { display: block; }
 nav.site-nav .logo-text { display: block; font-size: 18px; }
 .nav-brand-row { flex: 1; min-width: 0; }
 nav.site-nav .nav-brand-row .logo-text { font-size: 18px; }
 .sidebar-toggle { display: none; }
 nav.site-nav .nav-right { flex-direction: row; gap: 2px; border: 0; padding: 0; }
 nav.site-nav .nav-toggle { display: flex; min-width: 44px; min-height: 44px; }
 nav.site-nav .nav-menu { display: none; position: fixed; inset: 64px auto 0 0; width: min(300px, 86vw); padding: 16px 12px max(20px, env(safe-area-inset-bottom)); background: var(--surface); border-right: 1px solid var(--surface-muted); z-index: 102; }
 nav.site-nav .nav-menu.is-open { display: flex; }
 nav.site-nav .theme-menu, nav.site-nav .lang-menu { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; }
 body.nav-drawer-open { overflow: hidden; }
 body.nav-drawer-open .nav-scrim { display: block; position: fixed; inset: 64px 0 0; border: 0; background: rgb(0 0 0 / 38%); z-index: 99; cursor: pointer; }
 .skip-content { left: 12px; }
}

nav.site-nav .nav-format-links { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px 25px; padding-left: 9px; border-left: 2px solid var(--surface-muted); flex-shrink: 0; }
nav.site-nav .nav-format-links .nav-label { font-size: 14px; }
@media (min-width: 601px) { html[data-sidebar="collapsed"] nav.site-nav .nav-format-links { margin: 0 0 6px; padding: 0; border: 0; } }

/* Format-page breadcrumbs follow the form's content edge rather than the viewport. */
.page-breadcrumb { max-width: 980px; margin: 0 auto; padding: 24px 20px 0; }
.breadcrumb-trail { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.breadcrumb-trail a, .breadcrumb-trail a:visited { color: var(--text-secondary); text-decoration: none; }
.breadcrumb-trail a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb-trail [aria-current="page"] { color: var(--text); font-weight: 700; }
.crumb-separator { color: var(--text-dim); user-select: none; }
.page-breadcrumb + .quick-section { padding-top: 24px; }

/* Keep the system/monitor icon upright; only the panel and a changed mode fade in. */
.theme-toggle.is-open { background: var(--surface-muted); }
.theme-toggle.is-open svg { transform: none; }
.theme-menu.is-open { animation: nav-panel-in 150ms ease-out; }
.theme-icon-enter { animation: theme-icon-in 160ms ease-out; }
@keyframes nav-panel-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes theme-icon-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .theme-menu.is-open, .theme-icon-enter, .lang-menu.is-open { animation: none !important; } }

/* Collapsed rail keeps wheel, touch and keyboard scrolling without a visual gutter. */
.nav-settings-toggle, .nav-settings-heading { display: none; }
.nav-settings-panel { display: contents; }
.sidebar-tooltip { position: fixed; z-index: 220; max-width: min(260px, calc(100vw - 100px)); padding: 9px 13px; border: 1px solid var(--surface-muted); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: 0 4px 16px rgb(0 0 0 / 9%); font-size: 13px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.sidebar-tooltip[hidden] { display: none; }
@media (min-width: 601px) {
 html[data-sidebar="collapsed"] nav.site-nav .nav-menu { scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; overscroll-behavior: contain; }
 html[data-sidebar="collapsed"] nav.site-nav .nav-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }
 html[data-sidebar="collapsed"] nav.site-nav .nav-right { position: relative; flex: 0 0 auto; }
}
 html[data-settings="compact"] .nav-settings-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-soft); color: var(--text); cursor: pointer; }
 .nav-settings-toggle svg { width: 21px; height: 21px; }
 .nav-settings-toggle:hover, .nav-settings-toggle[aria-expanded="true"] { background: var(--surface-muted); }
 .nav-settings-toggle:active { transform: scale(.97); }
 html[data-settings="compact"] .nav-settings-panel { display: none; position: fixed; inset: auto auto 14px calc(var(--sidebar-width) + 10px); width: min(260px, calc(100vw - var(--sidebar-width) - 24px)); padding: 8px; border: 1px solid var(--surface-muted); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 8px 28px rgb(0 0 0 / 10%); }
 html[data-settings="compact"] .nav-settings-panel.is-open { display: flex; flex-direction: column; gap: 3px; }
 html[data-settings="compact"] .nav-settings-heading { display: block; padding: 7px 10px 9px; color: var(--text-secondary); font-size: 12px; font-weight: 700; }
 html[data-settings="compact"] nav.site-nav .nav-settings-panel :is(.theme-toggle,.lang-toggle) { width: 100%; height: auto; min-height: 44px; padding: 10px; justify-content: flex-start; gap: 12px; border-radius: 10px; background: transparent; text-align: start; }
 html[data-settings="compact"] nav.site-nav .nav-settings-panel :is(.theme-toggle,.lang-toggle):hover { background: var(--surface-soft); }
 html[data-settings="compact"] .nav-settings-panel :is(.theme-toggle,.lang-toggle)::after { content: attr(data-settings-label); flex: 1; font-family: var(--font-rounded); font-size: 14px; font-weight: 700; line-height: 1.4; white-space: normal; }
 html[data-settings="compact"] nav.site-nav .nav-settings-panel .theme-menu { left: 0; right: auto; bottom: calc(100% + 8px); border-width: 1px; }
 html[dir="rtl"][data-settings="compact"] .nav-settings-panel { left: auto; right: calc(var(--sidebar-width) + 10px); }
 html[dir="rtl"][data-settings="compact"] nav.site-nav .nav-settings-panel .theme-menu { left: auto; right: 0; }

@media (max-width: 600px) {
 html[data-settings="compact"] .nav-settings-panel,
 html[dir="rtl"][data-settings="compact"] .nav-settings-panel { inset: 76px 12px auto auto; width: min(280px, calc(100vw - 24px)); max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
 html[dir="rtl"][data-settings="compact"] .nav-settings-panel { inset: 76px auto auto 12px; }
 html[data-settings="compact"] .nav-settings-panel .language-current,
 html[data-settings="compact"] .nav-settings-panel .lang-toggle > svg:not(.language-globe) { display: none; }
 html[data-settings="compact"] .nav-settings-panel .language-globe { display: block; width: 20px; height: 20px; flex-shrink: 0; }
 html[data-settings="compact"] nav.site-nav .nav-settings-panel .theme-menu,
 html[dir="rtl"][data-settings="compact"] nav.site-nav .nav-settings-panel .theme-menu { position: static; margin: 3px 0 6px; box-shadow: none; }
 html[data-settings="compact"] .nav-settings-panel .theme-toggle svg { flex-shrink: 0; }
 nav.site-nav .nav-brand-row .logo-text { font-size: clamp(13px, 4vw, 18px); }
 main :is(h2, h3) { overflow-wrap: anywhere; }
}

/* Rail motion uses an independent surface so icons and text never stretch. */
.sidebar-motion-surface { position: fixed; top: 0; bottom: 0; z-index: 99; pointer-events: none; border-inline-end: 1px solid var(--surface-muted); }
.sidebar-motion-label { position: fixed; z-index: 101; pointer-events: none; overflow: hidden; }
@media (min-width: 601px) {
 html.sidebar-in-motion { overflow-x: clip; }
 html.sidebar-in-motion nav.site-nav { background: transparent !important; border-color: transparent; }
 nav.site-nav .nav-menu a { transition: background-color 120ms ease, color 120ms ease; }
}

/* Keep first-visit consent readable without taking over a small viewport. */
@media (max-width: 600px) {
 html .cookie-banner { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); border-top-width: 1px; background: var(--surface); box-shadow: 0 -4px 16px rgb(0 0 0 / 10%); }
 html .cookie-banner .container { padding: 0; gap: 8px; }
 html .cookie-banner p { min-width: 0; flex: 1 1 100%; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
 html .cookie-banner .cookie-btns { width: 100%; gap: 8px; }
 html .cookie-banner button { flex: 1; min-height: 44px; padding: 8px 12px; font-size: 13px; line-height: 1.3; }
 html .cookie-banner .cookie-accept { color: #17320d; background: var(--primary); box-shadow: 0 2px 0 var(--primary-border); }
 html .cookie-banner .cookie-reject { color: var(--text); background: var(--surface-muted); box-shadow: 0 2px 0 var(--text-dim); }
 html .cookie-banner a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
}