/* Mobile navigation drawers shared by all pages. */
@media (max-width: 768px) {
  :root { --mobile-taskbar-height: calc(61px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: var(--mobile-taskbar-height); }
  .taskbar { box-sizing: border-box; height: var(--mobile-taskbar-height); }
  .taskbar { gap: 2px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); align-items: stretch; }
  .taskbar > .tb-item, .tb-drawer { flex: 1 1 0; min-width: 0; }
  .taskbar .tb-item { display: flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 8px 2px; font-size: calc(11px + var(--page-font-increase, 0pt)); white-space: nowrap; }
  .tb-drawer { position: static; }
  .tb-drawer > summary { list-style: none; cursor: pointer; gap: 3px; }
  .tb-drawer > summary::-webkit-details-marker { display: none; }
  .tb-drawer > summary::after { content: ''; width: 5px; height: 5px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
  .tb-drawer[open] > summary { background: rgba(255,255,255,.14); opacity: 1; }
  .tb-drawer[open] > summary::after { transform: rotate(225deg); }
  .tb-drawer-panel { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px; max-height: min(60vh, 420px); max-height: min(60dvh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid rgba(255,255,255,.16); border-radius: 0; background: rgba(122,0,25,.98); box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
  .tb-drawer[open] > .tb-drawer-panel { display: flex; flex-direction: column; gap: 2px; animation: taskbar-drawer-in .2s ease-out; }
  .tb-drawer-panel a { display: block; min-height: 44px; box-sizing: border-box; padding: 12px 14px; color: #fff; font-size: calc(13px + var(--page-font-increase, 0pt)); line-height: 1.5; border-radius: 0; overflow-wrap: anywhere; }
  .tb-drawer-panel a:hover, .tb-drawer-panel a:focus-visible, .tb-drawer-panel a[aria-current="page"] { background: rgba(255,255,255,.14); }
  .taskbar a:focus-visible, .taskbar summary:focus-visible { outline: 2px solid #ffd54f; outline-offset: -2px; }
}
@keyframes taskbar-drawer-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tb-drawer[open] > .tb-drawer-panel { animation: none; } .tb-drawer > summary::after { transition: none; } }