/* Keep the top navigation; replace only the original drawer trigger. */
.bar .bar-in > .burger,
#root > .drawer, #root > .scrim { display: none !important; }
#configured-navigation[hidden], #configured-navigation [hidden] { display: none !important; }
.cfg-navigation { --cfg-width: 180px; }
.cfg-overlay { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; border: 0; background: #0005; }
.cfg-panel { position: fixed; top: 0; bottom: 0; z-index: 80; width: var(--cfg-width); max-width: calc(100vw - 24px); overflow-y: auto; background: var(--deep); color: var(--ink); border-inline: 1px solid var(--line-2); padding: max(64px, env(safe-area-inset-top)) 8px max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; animation: cfg-in .2s ease-out; }
.cfg-items { flex: 1; }
.cfg-right .cfg-panel { right: 0; }
.cfg-left .cfg-panel { left: 0; }
.cfg-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 36px; border-radius: 8px; color: var(--soft); text-decoration: none; font-size: var(--cfg-label); }
.cfg-link span { min-width: 0; overflow-wrap: anywhere; }
.cfg-link svg { width: var(--cfg-icon); height: var(--cfg-icon); flex-shrink: 0; }
.cfg-link:hover, .cfg-link:focus-visible { color: var(--ink); background: var(--raise); }
.cfg-link[aria-current="page"] { color: var(--hl); background: var(--panel); }
.cfg-footer { border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 8px; }
.cfg-toggle { position: fixed; z-index: 81; top: calc(var(--cfg-height) - 28px); width: 24px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--cfg-color); background: color-mix(in srgb, var(--cfg-color) 88%, transparent); color: var(--cfg-button-ink); border: 1px solid var(--line-2); font: 24px/1 sans-serif; cursor: pointer; transition: left .2s, right .2s; }
.cfg-right .cfg-toggle { right: 0; border-radius: 8px 0 0 8px; }
.cfg-left .cfg-toggle { left: 0; border-radius: 0 8px 8px 0; }
.cfg-right.cfg-open .cfg-toggle { right: var(--cfg-width); }
.cfg-left.cfg-open .cfg-toggle { left: var(--cfg-width); }
.cfg-bottom-space { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.cfg-bottom-bar { position: fixed; z-index: 81; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; min-height: 64px; padding-bottom: env(safe-area-inset-bottom); background: var(--deep); color: var(--ink); border-top: 1px solid var(--line-2); }
.cfg-bottom-bar .cfg-link { flex: 1; flex-direction: column; gap: 3px; text-align: center; }
.cfg-bottom .cfg-toggle { position: static; flex: 1; height: 56px; width: auto; border: 0; background: transparent; color: var(--ink); }
.cfg-bottom .cfg-panel { top: auto; left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 65vh; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; }
@keyframes cfg-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cfg-panel { animation: none; } .cfg-toggle { transition: none; } }