/* KARAOKE_V7_TABLET_RESPONSIVE_V1
   Responsive layout layer for the /hp remote only.
   No Firebase, room, queue, playback, scoring, microphone, license, or TV logic changes. */

@media (min-width:700px){
  body.route-hp{
    --tablet-shell-max:1120px;
  }

  body.route-hp .app{
    max-width:var(--tablet-shell-max)!important;
  }

  body.route-hp .app-header{
    width:min(var(--tablet-shell-max),100%)!important;
    padding-left:clamp(22px,3vw,32px)!important;
    padding-right:clamp(22px,3vw,32px)!important;
  }

  body.route-hp .page{
    padding-left:clamp(22px,3vw,32px)!important;
    padding-right:clamp(22px,3vw,32px)!important;
    padding-bottom:30px!important;
  }

  body.route-hp .bottom-nav{
    width:min(760px,calc(100% - 32px))!important;
    bottom:12px!important;
    padding:7px!important;
    border:1px solid rgba(105,135,210,.18)!important;
    border-radius:25px!important;
    box-shadow:0 18px 48px rgba(0,0,0,.42)!important;
  }

  body.route-hp .kv7-help-launcher{
    right:max(14px,calc((100vw - 760px)/2 + 14px))!important;
  }

  body.route-hp .nav-inner{
    padding:6px!important;
  }

  body.route-hp .nav-btn{
    min-height:62px!important;
    font-size:12px!important;
  }

  body.route-hp #page-home>.quick-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  body.route-hp #page-home>.quick-grid .quick{
    min-height:118px!important;
  }

  body.route-hp .kv7-discovery-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  body.route-hp #page-search .content-search-tabs,
  body.route-hp #page-search .search-mode-tabs,
  body.route-hp #page-search .library-tabs{
    gap:10px!important;
  }

  body.route-hp #page-search .content-search-btn,
  body.route-hp #page-search .search-mode-btn,
  body.route-hp #page-search .library-tab{
    min-height:54px!important;
  }

  body.route-hp #page-queue{
    width:100%;
    max-width:940px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (min-width:900px){
  body.route-hp #page-home.active{
    display:grid!important;
    grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
    gap:18px 22px;
    align-items:start;
  }

  body.route-hp #page-home>.remote-hero{
    grid-column:1;
    grid-row:1;
    margin-bottom:0!important;
  }

  body.route-hp #page-home>.quick-grid{
    grid-column:1;
    grid-row:2;
    margin-top:0!important;
  }

  body.route-hp #page-home>.room-card{
    grid-column:2;
    grid-row:1 / span 2;
    margin-top:0!important;
    position:sticky;
    top:calc(var(--header-height) + 18px);
  }

  body.route-hp #page-home>.account-data-card,
  body.route-hp #page-home>.remote-purpose-strip,
  body.route-hp #page-home>.kv7-home-legal{
    grid-column:1 / -1;
  }

  body.route-hp #page-search .results{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:start;
  }

  body.route-hp #page-search .results>.empty{
    grid-column:1 / -1;
  }

  body.route-hp #page-control.active{
    display:grid!important;
    grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
    gap:14px 22px;
    align-items:start;
  }

  body.route-hp #page-control.active>.section-title{
    grid-column:1 / -1;
    margin-bottom:2px!important;
  }

  body.route-hp #page-control.active>.control-card{
    grid-column:1;
    grid-row:2 / span 10;
    position:sticky;
    top:calc(var(--header-height) + 18px);
  }

  body.route-hp #page-control.active>:not(.section-title):not(.control-card){
    grid-column:2;
    margin-top:0!important;
    margin-bottom:0!important;
  }

  body.route-hp #page-control .event-ticker-actions,
  body.route-hp #page-control .app-maintenance-actions{
    grid-template-columns:1fr 1fr!important;
  }
}

@media (min-width:1200px){
  body.route-hp .brand p{
    max-width:none;
  }

  body.route-hp #page-search .song{
    min-height:196px!important;
  }
}