@media (max-width:640px){
  :root{ --aivaHdrH: 140px }
  body.has-fixed-aiva{ padding-top: var(--aivaHdrH) }

  /* Fixed, full-bleed header */
  #AivaFixedHeader{
    position:fixed; top:0; left:0; width:100vw; max-width:100vw; z-index:220;
    padding:.55rem calc(.7rem + env(safe-area-inset-right)) .55rem calc(.7rem + env(safe-area-inset-left));
    backdrop-filter:blur(6px); box-sizing:border-box;
  }
  #AivaFixedHeader .row{ display:flex; flex-wrap:wrap; gap:.42rem; width:100% }
  #AivaFixedHeader .row + .row{ margin-top:.42rem }

  /* Uniform chip sizing in header */
  #AivaFixedHeader .chip, #AivaFixedHeader .btn, #AivaFixedHeader button, #AivaFixedHeader a[role=button]{
    height:36px; line-height:36px; padding:0 .62rem; border-radius:12px; font-size:1rem; white-space:nowrap;
  }

  /* ROW A = MODES — force visible, ignore legacy small-screen rules */
  #AivaRowsA .modes, #AivaRowsA [data-modes]{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:.42rem !important;
    width:100% !important;
    position:static !important;
    float:none !important;
    visibility:visible !important;
    opacity:1 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    transform:none !important;
  }
  #AivaRowsA .modes > *, #AivaRowsA [data-modes] > *{ flex:1 1 calc(25% - .42rem) !important; min-width:0 !important }
  /* if proxies are used (no .modes yet) */
  #AivaRowsA > .chip{ flex:1 1 calc(25% - .42rem); min-width:0 }
  @media (max-width:380px){
    #AivaRowsA .modes > *, #AivaRowsA [data-modes] > *, #AivaRowsA > .chip{ flex:1 1 calc(50% - .42rem) !important }
  }

  /* ROW B = CTAs */
  #AivaRowsB > *{ flex:1 1 calc(33.33% - .42rem); min-width:0 }
  @media (max-width:360px){ #AivaRowsB > *{ flex:1 1 calc(50% - .42rem) } }

  /* ROW C = Tokens (full) */
  #AivaRowsC > *{ flex:1 1 100%; text-align:center; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums }

  /* ROW D = Utils */
  #AivaRowsD > *{ flex:1 1 calc(33.33% - .42rem); min-width:0 }

  /* IMPORTANT: only hide original topbar AFTER we capture it */
  .aiva-topbar-captured .topbar{ display:none !important }
}
/* --- MODES normalizer: full-bleed + no clipping on mobile --- */
@media (max-width:640px){
  .topbar .modes{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:.42rem !important;

    /* make the row span the viewport even if the parent is narrower */
    width:100vw !important; max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 calc(.7rem + env(safe-area-inset-right)) 0 calc(.7rem + env(safe-area-inset-left)) !important;

    /* kill any legacy hiding/positioning */
    overflow:visible !important;
    position:static !important; left:auto !important; right:auto !important;
    transform:none !important; opacity:1 !important; visibility:visible !important;
    box-sizing:border-box !important;
  }
  .topbar .modes > *{
    max-width:100% !important; min-width:0 !important;
  }
}
@media (max-width:430px){
  .topbar .modes > *{ flex:1 1 calc(50% - .42rem) !important }
}
/* keep 4-across above 430px */
@media (min-width:431px) and (max-width:640px){
  .topbar .modes > *{ flex:1 1 calc(25% - .42rem) !important }
}
/* CTAs: switch to 2x2 grid on small phones and allow label wrap */
@media (max-width:460px){
  #AivaRowsB{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:.42rem !important;
  }
  #AivaRowsB > *{
    flex:none !important;   /* override earlier flex-basis */
    width:100% !important;
    min-width:0 !important;
  }
  /* Let "Weekend Pass" wrap neatly and keep vertical rhythm */
  #AivaRowsB .chip,
  #AivaRowsB .btn,
  #AivaRowsB button,
  #AivaRowsB a[role=button]{
    white-space:normal !important;
    text-align:center !important;
    line-height:1.15 !important;
    height:auto !important;
    min-height:36px !important;
    padding:.38rem .62rem !important;
  }
}