/* Mobile drawer — companion to static/js/mobile_drawer.js.
   Any element with data-mobile-drawer becomes an off-canvas drawer at phone
   width. Inert above 767px: .mdrawer is only ever added there, so desktop
   layout is untouched. The width/height !importants exist because the three
   sidebars carry inline width/height styles from their desktop layouts. */
@media (max-width: 767px) {
  .mdrawer {
    position: fixed !important;
    top: var(--nav-height, 56px);
    bottom: 0;
    left: 0;
    height: auto !important;
    width: min(85vw, 320px) !important;
    max-width: none !important;
    z-index: 1041;
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .35);
  }
  .mdrawer.mdrawer-open { transform: none; }

  .mdrawer-backdrop {
    position: fixed;
    inset: 0;
    top: var(--nav-height, 56px);
    background: rgba(15, 23, 42, .55);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .mdrawer-backdrop.show { opacity: 1; pointer-events: auto; }

  .mdrawer-toggle {
    position: fixed;
    left: .85rem;
    bottom: 1.1rem;
    z-index: 1042;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  }
}
/* Desktop: never shown even if the JS is mid-transition on a resize */
@media (min-width: 768px) {
  .mdrawer-toggle, .mdrawer-backdrop { display: none !important; }
}