/* StikDex v0.04 post-launch mobile repair.
   This late, uniquely versioned layer prevents an installed PWA from pairing
   new Home/Binder markup with the pre-fix cached presentation. */
@media (max-width:760px), (pointer:coarse) and (max-width:960px) and (max-height:600px){
  .pocket-home-generation-grid{
    align-items:start!important;
    grid-auto-rows:88px!important;
  }
  .pocket-home-generation-grid button{
    box-sizing:border-box!important;
    position:relative!important;
    width:auto!important;
    height:88px!important;
    min-height:88px!important;
    max-height:88px!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    align-content:stretch!important;
    gap:5px!important;
    overflow:hidden!important;
    padding:8px!important;
    isolation:isolate!important;
    text-align:left!important;
  }
  .pocket-home-generation-art{
    position:absolute!important;
    z-index:0!important;
    inset:auto -5px 7px auto!important;
    width:72%!important;
    height:78%!important;
    max-width:72%!important;
    max-height:78%!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    opacity:.72!important;
    pointer-events:none!important;
  }
  .pocket-home-generation-copy{
    position:relative!important;
    z-index:1!important;
    min-width:0!important;
    display:grid!important;
    align-content:start!important;
    justify-items:start!important;
    gap:1px!important;
  }
  .pocket-home-generation-copy small{display:block!important}
  .pocket-home-generation-copy b{
    display:block!important;
    max-width:72%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .pocket-home-generation-grid button>i{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:5px!important;
    display:block!important;
  }

  #binderView .binder-pocket{
    box-sizing:border-box!important;
    position:relative!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    width:100%!important;
    height:var(--binder-mobile-pocket-height,clamp(108px,28vw,132px))!important;
    min-width:0!important;
    min-height:var(--binder-mobile-pocket-height,clamp(108px,28vw,132px))!important;
    max-height:var(--binder-mobile-pocket-height,clamp(108px,28vw,132px))!important;
    padding:0!important;
    overflow:hidden!important;
    aspect-ratio:auto!important;
  }
  #binderView .binder-grid{
    --binder-mobile-pocket-height:clamp(108px,28vw,132px)!important;
    grid-template-rows:repeat(4,var(--binder-mobile-pocket-height))!important;
    grid-auto-rows:var(--binder-mobile-pocket-height)!important;
    align-items:stretch!important;
  }
  /* The legacy two-across Pocket Binder reserved an 84px header. In the
     compact four-across page that consumed nearly the whole pocket and left
     the artwork in a tiny implicit row at the bottom. */
  #binderView .binder-pocket-header{
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    align-content:normal!important;
    gap:0!important;
  }
  #binderView .binder-image-wrap{
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0 3px 3px!important;
    padding:2px!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    align-self:stretch!important;
    flex:none!important;
    aspect-ratio:auto!important;
  }
  #binderView .binder-image{
    box-sizing:border-box!important;
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:auto!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center!important;
    align-self:center!important;
    justify-self:center!important;
  }
}