/* Phase 4 usability pass: shared shell, controls, overflow and keyboard visibility. */

/* The legacy <=1380px rule declared only two columns for a three-zone header.
   At common laptop widths that auto-placed utilities into a 210px second row,
   pushing search/date/capper actions off-screen. Keep all three zones bounded. */
@media (min-width:1281px) and (max-width:1380px){
  .topbar{
    grid-template-columns:210px minmax(150px,.55fr) minmax(590px,1.45fr);
    gap:14px;
  }
  .header-brand-copy span{display:none}
  .header-search-wrap{min-width:150px;max-width:280px}
  .header-date{min-width:112px;padding-inline:10px}
  .member-copy b{max-width:82px}
}

/* Never allow flex/grid children in the shared chrome to force page overflow. */
.topbar,.header-brand-zone,.header-page-zone,.header-utility-zone,
.command-nav,.command-nav-sports,.command-nav-scroll,.command-nav-window{
  min-width:0;
}
.header-utility-zone{max-width:100%}
.header-search-wrap{overflow:visible}

/* Consistent usable targets and visible keyboard focus throughout the platform. */
.command-nav button,.command-nav a,
.topbar button,.topbar a,
.site-footer a{
  min-height:36px;
}
.site-footer a{
  display:inline-flex;
  align-items:center;
  padding-inline:4px;
}
:where(a,button,input,select,textarea,[role="button"]):focus-visible{
  outline:3px solid var(--accent,#67f5a1);
  outline-offset:3px;
}

/* Keep fixed live UI from covering the final content/actions. */
body.msiq-live-ticker-enabled .content{
  padding-bottom:calc(32px + var(--msiq-ticker-height,54px));
}
.msiq-sports-center-panel:not(.open){
  visibility:hidden;
}

/* Narrow screens: stable stacked chrome, scrollable controls, no clipped labels. */
@media (max-width:760px){
  body.msiq-global-fixed-nav{
    --msiq-fixed-header-height:62px;
    --msiq-fixed-nav-height:104px;
    --msiq-fixed-stack-height:166px;
  }
  body.msiq-global-fixed-nav .topbar{min-height:62px}
  body.msiq-global-fixed-nav .command-nav{top:62px!important;max-height:104px}
  .header-utility-zone{overflow:visible}
  .command-nav-sports,.command-nav-scroll,.sport-tabs-v4,.section-nav-groups{
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .site-footer{padding-bottom:8px}
}

@media (max-width:460px){
  .content{padding-inline:12px}
  .topbar{padding-inline:12px}
  .command-nav{padding-inline:8px}
}
