/* Mobile page repair — loads last so it wins over style/ux-premium/situations.
   Phone widths only. Desktop (≥761px) is untouched. */

html, body{
  overflow-x:clip;
}

@media (max-width:760px){
  /* —— Shared shell clearance —— */
  html body .shell,
  html body #workspace.shell{
    padding-inline:16px !important;
    padding-bottom:calc(28px + var(--player-dock-h, 0px)) !important;
  }
  html body .footer.site-footer,
  html body .footer.site-chrome-footer{
    padding-bottom:calc(28px + var(--player-dock-h, 0px)) !important;
  }

  /* Fallback header: one scrollable nav row, not a tall icon wall */
  html body .header:not(.site-chrome) nav{
    order:3;
    flex:1 0 100%;
    width:100%;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    -webkit-mask-image:linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image:linear-gradient(to left, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  html body .header:not(.site-chrome) nav::-webkit-scrollbar{display:none}
  html body .header:not(.site-chrome) .nav{
    flex:0 0 auto;
    min-width:max-content;
    min-height:52px !important;
    max-height:56px;
    padding:6px 10px 8px !important;
    font-size:12px !important;
    white-space:nowrap;
  }
  html body .header:not(.site-chrome) .nav-icon{
    width:20px !important;
    height:20px !important;
  }

  /* Level chips: ALL + A1–C2 as one scroll row (no orphan wrap) */
  html body .level-list{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:0 !important;
    padding:2px 2px 6px;
    overscroll-behavior-inline:contain;
  }
  html body .level-list::-webkit-scrollbar{display:none}
  html body .level-list .level{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:52px;
    min-height:48px !important;
    padding:8px 12px !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
  }
  html body .level-list .level-name,
  html body .level-list .level-caption,
  html body .level-list .level-total{
    display:none !important;
  }
  html body .level-list .level-code{
    min-width:0 !important;
    padding:0 !important;
    background:none !important;
    font-size:14px !important;
  }
  html body .sidebar-heading .eyebrow{display:none !important}
  html body .topic-filter{
    margin-top:12px !important;
    padding-top:12px !important;
    border-top:1px solid var(--line);
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  html body .topic-filter label{margin:0 !important; white-space:nowrap}
  html body .topic-filter select{flex:1; min-width:0}

  /* Filters / listen session / alphabet */
  html body .filter-row{
    gap:10px !important;
    align-items:stretch !important;
  }
  html body .filter-row select{
    flex:1 1 140px;
    min-width:0 !important;
    max-width:none !important;
  }
  html body .session-options{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
  html body .alphabet{
    gap:6px !important;
  }
  html body .letter{
    width:36px !important;
    height:38px !important;
  }

  /* Cards / directories / grammar */
  html body .cards,
  html body .verb-directory,
  html body .grammar-grid{
    grid-template-columns:1fr !important;
  }
  html body .results-heading{
    flex-direction:column;
    align-items:stretch !important;
    gap:10px;
  }
  html body .workspace-toolbar{
    flex-wrap:wrap;
  }
  html body .workspace-toolbar .button{
    flex:1 1 auto;
  }

  /* Home portal strip: friendly 2-col shortcut cards under the hero */
  html body #home-landing .home-hero-portal-strip[data-fallback="1"]{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    justify-content:stretch;
    max-width:none;
    margin-top:14px !important;
    padding:0 16px 4px;
  }
  html body #home-landing .home-hero-portal-strip a{
    width:100%;
    min-height:52px !important;
    justify-content:flex-start;
    border-radius:16px !important;
    border:1px solid rgba(25,40,76,.10) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,249,255,.9)) !important;
    box-shadow:0 6px 18px rgba(18,35,70,.07) !important;
    font-size:13px !important;
    padding:10px 12px !important;
  }
  html body #home-landing .home-stats{
    width:calc(100% - 24px) !important;
    margin-inline:auto;
    margin-top:14px !important;
  }

  /* Word library search stack */
  html body .word-search-main{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  html body #word-search-go{width:100% !important; order:3}
  html body .word-search-extras{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
  }
  html body .word-search-extras select{width:100% !important}
  html body .word-category-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  html body .word-detail-layout{
    grid-template-columns:1fr !important;
  }

  /* Grammar lesson / controls */
  html body .grammar-controls{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  html body .grammar-controls label{min-width:0 !important}

  /* CMS public pages */
  html body .cms-widget__grid{
    grid-template-columns:1fr !important;
  }
  html body .cms-site-nav{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  html body .cms-site-nav::-webkit-scrollbar{display:none}
  html body .cms-site-nav a{
    flex:0 0 auto;
    white-space:nowrap;
    padding:8px 10px;
  }
}

@media (max-width:420px){
  html body .session-options{
    grid-template-columns:1fr !important;
  }
  html body .verb-directory{
    grid-template-columns:1fr !important;
  }
  html body #home-landing .home-hero-portal-strip[data-fallback="1"]{
    gap:8px;
    padding-inline:12px;
  }
  html body #home-landing .home-hero-portal-strip a{
    min-height:44px;
    font-size:12px;
    padding:8px 10px;
  }
  html body .level-list .level{
    min-width:48px;
    padding:8px 10px !important;
  }
}