/* ============================================================
   MDL FINAL MOBILE ALL FIX — 2026-09-13
   Single-source mobile shell.
   Confirmed root cause fixed:
   shared sidebar stayed in normal flow and consumed ~362px,
   compressing page content to ~28px on a 390px viewport.

   Scope:
   - universal mobile header
   - universal off-canvas sidebar
   - conservative overflow protection only
   - NO page-specific grid/card/form rewrites
   - desktop (>900px) unchanged
   ============================================================ */

:root{
  --mdl-mobile-header-height:58px;
  --mdl-mobile-drawer-width:min(86vw, 320px);
}

/* Mobile-only controls must never appear on desktop. */
.mdl-mobile-menu-btn-final,
.mdl-mobile-backdrop-final,
.mdl-mobile-menu-btn,
.mdl-mobile-backdrop{
  display:none !important;
}

@media (max-width:900px){

  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* =========================================================
     UNIVERSAL HEADER
     ========================================================= */
  html body .mdl-canonical-full-header{
    position:sticky !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:2200 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:var(--mdl-mobile-header-height) !important;
    height:var(--mdl-mobile-header-height) !important;
    max-height:var(--mdl-mobile-header-height) !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    padding-left:max(8px, env(safe-area-inset-left)) !important;
    padding-right:max(8px, env(safe-area-inset-right)) !important;
    gap:6px !important;
    overflow:hidden !important;
  }

  html body .mdl-canonical-full-header .mdl-full-brand-area{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    overflow:hidden !important;
  }

  html body .mdl-canonical-full-header .mdl-full-brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    overflow:hidden !important;
  }

  html body .mdl-canonical-full-header .mdl-full-logo{
    flex:0 0 36px !important;
    width:36px !important;
    min-width:36px !important;
    height:36px !important;
    max-width:36px !important;
  }

  html body .mdl-canonical-full-header .mdl-full-logo img{
    display:block !important;
    width:30px !important;
    height:30px !important;
    max-width:30px !important;
    max-height:30px !important;
  }

  html body .mdl-canonical-full-header .mdl-full-title{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:180px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:16px !important;
  }

  html body .mdl-canonical-full-header .mdl-full-subtitle,
  html body .mdl-canonical-full-header .mdl-full-beta{
    display:none !important;
  }

  html body .mdl-canonical-full-header .mdl-full-actions{
    flex:0 0 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    overflow:visible !important;
  }

  /* Compact action controls instead of allowing text to overlap. */
  html body .mdl-canonical-full-header .mdl-full-learning,
  html body .mdl-canonical-full-header .mdl-full-account,
  html body .mdl-canonical-full-header .mdl-full-theme{
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    padding:0 !important;
    margin:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
  }

  html body .mdl-canonical-full-header .mdl-full-learning .mdl-full-label,
  html body .mdl-canonical-full-header .mdl-full-account-label{
    display:none !important;
  }

  /* Keep the learning control itself available but prevent the wide track
     from colliding with the brand area on phones. */
  html body .mdl-canonical-full-header .mdl-full-learning .mdl-full-track{
    transform:scale(.78) !important;
    transform-origin:center !important;
    max-width:30px !important;
  }

  html body .mdl-canonical-full-header .mdl-full-avatar{
    margin:0 !important;
  }

  html body .mdl-mobile-menu-btn-final,
  html body .mdl-mobile-menu-btn{
    display:grid !important;
    place-items:center !important;
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:38px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.20) !important;
    border-radius:4px !important;
    background:rgba(255,255,255,.07) !important;
    color:#fff !important;
    font-size:22px !important;
    line-height:1 !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
  }

  /* On phone widths the long title is the main collision source.
     Logo + controls remain visible. */
  @media (max-width:600px){
    html body .mdl-canonical-full-header .mdl-full-title{
      display:none !important;
    }
  }

  /* =========================================================
     UNIVERSAL SIDEBAR / DRAWER
     High specificity is intentional and based on the confirmed
     computed style from the broken Plasmid page.
     ========================================================= */

  html body aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer,
  html body aside.mdl-sidebar.mdl-mobile-drawer-final,
  html body aside.mdl-sidebar.mdl-mobile-drawer{
    display:block !important;
    position:fixed !important;
    top:var(--mdl-mobile-header-height) !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;

    width:var(--mdl-mobile-drawer-width) !important;
    min-width:0 !important;
    max-width:320px !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;

    z-index:2100 !important;
    box-sizing:border-box !important;
    background:var(--mdl-sidebar-bg, #fff) !important;
    border-right:1px solid rgba(0,0,0,.12) !important;
    box-shadow:0 12px 32px rgba(0,0,0,.24) !important;

    transform:translate3d(-105%,0,0) !important;
    transition:transform .18s ease !important;
    pointer-events:auto !important;

    padding-bottom:max(18px, env(safe-area-inset-bottom)) !important;
  }

  html[data-theme="dark"] body aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html[data-theme="dark"] body aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer,
  body[data-theme="dark"] aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  body[data-theme="dark"] aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer{
    background:#1c191e !important;
    border-right-color:rgba(255,255,255,.12) !important;
  }

  html body.mdl-mobile-nav-open-final aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open-final aside.mdl-sidebar.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer,
  html body.mdl-mobile-nav-open aside.mdl-sidebar.mdl-mobile-drawer{
    transform:translate3d(0,0,0) !important;
  }

  html body aside.mdl-sidebar.mdl-mobile-drawer-final a,
  html body aside.mdl-sidebar.mdl-mobile-drawer-final button,
  html body aside.mdl-sidebar.mdl-mobile-drawer a,
  html body aside.mdl-sidebar.mdl-mobile-drawer button{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  /* Never let desktop nested scroll wrappers trap touch scrolling. */
  html body aside.mdl-sidebar.mdl-mobile-drawer-final nav,
  html body aside.mdl-sidebar.mdl-mobile-drawer-final .sidebar-content,
  html body aside.mdl-sidebar.mdl-mobile-drawer-final .sidebar-inner,
  html body aside.mdl-sidebar.mdl-mobile-drawer-final .mdl-sidebar-inner,
  html body aside.mdl-sidebar.mdl-mobile-drawer nav,
  html body aside.mdl-sidebar.mdl-mobile-drawer .sidebar-content,
  html body aside.mdl-sidebar.mdl-mobile-drawer .sidebar-inner,
  html body aside.mdl-sidebar.mdl-mobile-drawer .mdl-sidebar-inner{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }

  /* Backdrop is below the drawer, so it can never steal drawer taps/swipes. */
  html body .mdl-mobile-backdrop-final,
  html body .mdl-mobile-backdrop{
    display:block !important;
    position:fixed !important;
    top:var(--mdl-mobile-header-height) !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:2000 !important;
    background:rgba(0,0,0,.40) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease, visibility .18s ease !important;
  }

  html body.mdl-mobile-nav-open-final .mdl-mobile-backdrop-final,
  html body.mdl-mobile-nav-open .mdl-mobile-backdrop{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  html body.mdl-mobile-nav-open-final,
  html body.mdl-mobile-nav-open{
    overflow:hidden !important;
  }

  /* =========================================================
     CONSERVATIVE CONTENT PROTECTION
     Do not rewrite page grid/flex architecture.
     ========================================================= */
  main,
  [role="main"],
  .p15-main,
  .sv-main{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  main input,
  main select,
  main textarea,
  [role="main"] input,
  [role="main"] select,
  [role="main"] textarea{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  main pre,
  main code,
  main .sequence,
  main .sequence-view,
  main [class*="sequence-view"],
  [role="main"] pre{
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  main img,
  [role="main"] img{
    max-width:100% !important;
    height:auto !important;
  }

  /* Floating guide remains reachable without covering the whole form. */
  .mdl-guide-launcher,
  .guide-launcher,
  #mdlGuideButton,
  button[aria-label*="Guide"]{
    right:10px !important;
    bottom:10px !important;
    max-width:calc(100vw - 20px) !important;
  }
}

/* CONFIRMED_MOBILE_SIDEBAR_FLOW_FIX_V2_20260913 */
@media (max-width:900px){
  html body aside.sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body aside.sidebar.mdl-mobile-drawer-final,
  html body aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body aside.mdl-sidebar.mdl-mobile-drawer-final{
    display:block !important;
    position:fixed !important;
    top:58px !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:min(86vw,320px) !important;
    min-width:0 !important;
    max-width:320px !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    z-index:2100 !important;
    transform:translate3d(-105%,0,0) !important;
    pointer-events:auto !important;
  }

  html body.mdl-mobile-nav-open-final aside.sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open-final aside.sidebar.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open-final aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open-final aside.mdl-sidebar.mdl-mobile-drawer-final{
    transform:translate3d(0,0,0) !important;
  }
}

/* SHARED_MOBILE_SIDEBAR_FINAL_FIX_V2_20260913 */
@media (max-width:900px){

  html body aside.mdl-unified-side.mdl-mobile-drawer-final,
  html body aside.sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final{
    display:block !important;
    position:fixed !important;
    top:58px !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;

    width:min(86vw,320px) !important;
    min-width:0 !important;
    max-width:320px !important;

    height:calc(100dvh - 58px) !important;
    min-height:0 !important;
    max-height:calc(100dvh - 58px) !important;

    margin:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    touch-action:pan-y !important;

    z-index:2100 !important;
    transform:translate3d(-105%,0,0) !important;
    pointer-events:auto !important;
  }

  html body.mdl-mobile-nav-open-final aside.mdl-unified-side.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open-final aside.sidebar.mdl-unified-side.mdl-mobile-drawer-final,
  html body.mdl-mobile-nav-open-final aside.mdl-sidebar.mdl-unified-side.mdl-mobile-drawer-final{
    transform:translate3d(0,0,0) !important;
  }

  html body aside.mdl-unified-side .mdl-unified-nav{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    overflow:visible !important;
  }

  html body aside.mdl-unified-side .mdl-unified-group{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  html body aside.mdl-unified-side .mdl-unified-link,
  html body aside.mdl-unified-side .mdl-navbtn{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    white-space:normal !important;
  }
}