/* ============================================================
   STORMY TITANS™ — MOBILE DOCK STRUCTURE FIX — 002-R13

   Root cause addressed:
   app.css originally made .mobile-dock itself the five-column grid.
   The newer layout correctly places a Super Safe/global-width wrapper
   (.mobile-dock-inner) inside .mobile-dock. Therefore the OUTER dock
   must be the full-width fixed background and the INNER wrapper must
   be the only five-column grid.
   ============================================================ */

@media (max-width:700px){
  /* Full-bleed fixed banner only. It has ONE child: .mobile-dock-inner. */
  .mobile-dock{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:100 !important;

    display:block !important;
    grid-template-columns:none !important;
    grid-auto-flow:initial !important;

    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:7px 0 calc(7px + env(safe-area-inset-bottom)) !important;

    background:linear-gradient(180deg,#0b4c7d,#063b64) !important;
    border-top:1px solid rgba(255,255,255,.65) !important;
    box-shadow:0 -6px 20px rgba(0,0,0,.28) !important;
    overflow:visible !important;
  }

  /* This is the one and only dock grid. */
  .mobile-dock > .mobile-dock-inner{
    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:1fr !important;
    grid-auto-flow:row !important;

    align-items:stretch !important;
    justify-items:stretch !important;
    gap:0 !important;

    position:relative !important;
    inset:auto !important;
    transform:none !important;

    /* Same left/right boundary as the rest of Stormy Titans. */
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:var(--st-global-edge,22px) !important;
    margin-right:var(--st-global-edge,22px) !important;
    padding:0 !important;
  }

  /* Each shortcut occupies one independent equal-width cell. */
  .mobile-dock > .mobile-dock-inner > a{
    box-sizing:border-box !important;
    position:static !important;
    inset:auto !important;
    transform:none !important;
    float:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:58px !important;

    margin:0 !important;
    padding:5px 2px !important;

    color:#fff !important;
    text-align:center !important;
    text-decoration:none !important;
    overflow:hidden !important;
  }

  .mobile-dock > .mobile-dock-inner > a > span{
    position:static !important;
    display:block !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
    font-size:1.35rem !important;
    line-height:1.15 !important;
    flex:0 0 auto !important;
  }

  .mobile-dock > .mobile-dock-inner > a > b{
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 1px !important;
    transform:none !important;

    font-size:.72rem !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:center !important;
  }
}