/* ScoreInsight mobile header shell.
 * This file is loaded after every shared/page stylesheet so header geometry
 * cannot be changed accidentally by feature CSS. */
.siv3-header-spacer{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important}

@media(max-width:900px){
  body.siv3-app .siv3-header,
  body.siv3-app.admin-bar .siv3-header{
    position:relative!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    inset:auto!important;
    width:100%!important;max-width:100%!important;
    margin:0!important;
    transform:none!important;
    z-index:40!important;
  }
  body.siv3-app .siv3-header .siv3-header__inner{
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr) 54px!important;
    align-items:center!important;
    justify-items:stretch!important;
    gap:10px!important;
    width:100%!important;max-width:100%!important;
    min-height:78px!important;
    margin:0!important;
    padding:10px 16px!important;
  }
  body.siv3-app .siv3-header .siv3-mobile-menu-button,
  body.siv3-app .siv3-header .siv3-mobile-account{
    display:grid!important;
    place-items:center!important;
    align-self:center!important;
    justify-self:center!important;
    width:52px!important;height:52px!important;
    min-width:52px!important;min-height:52px!important;
    margin:0!important;padding:0!important;
    border-radius:17px!important;
    line-height:1!important;
  }
  body.siv3-app .siv3-header .siv3-mobile-menu-button{font-size:27px!important;font-weight:400!important}
  body.siv3-app .siv3-header .siv3-mobile-account svg{display:block!important;width:24px!important;height:24px!important;margin:auto!important}
  body.siv3-app .siv3-header .siv3-brand{
    justify-self:center!important;
    align-self:center!important;
    justify-content:center!important;
    max-width:calc(100vw - 160px)!important;
    min-width:0!important;
    margin:0!important;
    gap:0!important;
    transform:none!important;
  }
  body.siv3-app .siv3-header .siv3-brand__mark--image{
    flex:0 0 52px!important;width:52px!important;height:52px!important;
    margin:0!important;
  }
  body.siv3-app .siv3-header .siv3-brand__text--image{
    max-width:190px!important;min-width:0!important;
    margin-left:-5px!important;
  }
  body.siv3-app .siv3-header .siv3-brand__text--image img{
    display:block!important;width:auto!important;height:29px!important;max-width:100%!important;
  }

  /* Offsets below used to assume a fixed 64–70px site header. The header now
     scrolls with the document, so only the WP toolbar (when present) reserves top space. */
  body.siv3-detail-app-page .si-tabs{top:0!important}
  body.admin-bar.siv3-detail-app-page .si-tabs{top:var(--wp-admin--admin-bar--height,46px)!important}
  body.siv3-app .siv3-mobile-filter{top:0!important}
  body.siv3-app.admin-bar .siv3-mobile-filter{top:var(--wp-admin--admin-bar--height,46px)!important}
  body.siv3-app .siv3-picksters-subnav{top:0!important}
  body.siv3-app .siv3-pickster-live-filters{top:53px!important}
  body.siv3-app.admin-bar .siv3-picksters-subnav{top:var(--wp-admin--admin-bar--height,46px)!important}
  body.siv3-app.admin-bar .siv3-pickster-live-filters{top:calc(var(--wp-admin--admin-bar--height,46px) + 53px)!important}
}

@media(max-width:430px){
  body.siv3-app .siv3-header .siv3-header__inner{
    grid-template-columns:50px minmax(0,1fr) 50px!important;
    gap:8px!important;
    min-height:74px!important;
    padding:9px 14px!important;
  }
  body.siv3-app .siv3-header .siv3-mobile-menu-button,
  body.siv3-app .siv3-header .siv3-mobile-account{
    width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;
  }
  body.siv3-app .siv3-header .siv3-brand{max-width:calc(100vw - 144px)!important}
  body.siv3-app .siv3-header .siv3-brand__mark--image{flex-basis:48px!important;width:48px!important;height:48px!important}
  body.siv3-app .siv3-header .siv3-brand__text--image{max-width:160px!important;margin-left:-6px!important}
  body.siv3-app .siv3-header .siv3-brand__text--image img{height:27px!important}
}

@media(max-width:370px){
  body.siv3-app .siv3-header .siv3-header__inner{
    grid-template-columns:46px minmax(0,1fr) 46px!important;
    gap:6px!important;
    min-height:68px!important;
    padding:8px 10px!important;
  }
  body.siv3-app .siv3-header .siv3-mobile-menu-button,
  body.siv3-app .siv3-header .siv3-mobile-account{
    width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
    border-radius:15px!important;
  }
  body.siv3-app .siv3-header .siv3-brand{max-width:calc(100vw - 124px)!important}
  body.siv3-app .siv3-header .siv3-brand__mark--image{flex-basis:43px!important;width:43px!important;height:43px!important}
  body.siv3-app .siv3-header .siv3-brand__text--image{max-width:138px!important;margin-left:-5px!important}
  body.siv3-app .siv3-header .siv3-brand__text--image img{height:24px!important}
}

@media(min-width:783px) and (max-width:900px){
  body.admin-bar.siv3-detail-app-page .si-tabs,
  body.siv3-app.admin-bar .siv3-mobile-filter,
  body.siv3-app.admin-bar .siv3-picksters-subnav{top:var(--wp-admin--admin-bar--height,32px)!important}
  body.siv3-app.admin-bar .siv3-pickster-live-filters{top:calc(var(--wp-admin--admin-bar--height,32px) + 53px)!important}
}

/* 1.22.135 — mobile bottom navigation geometry lock.
 * The theme historically carried several overlapping bottom-nav blocks in
 * app.css, premium-ui.css, mobile-polish.css and the generated bundle. This
 * final layer owns the complete geometry so icon/label placement cannot drift. */
@media(max-width:900px){
  body.siv3-app{
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  }
  body.siv3-app .siv3-mobile-bottom{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    width:100%!important;
    height:calc(70px + env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;
    margin:0!important;
    padding:5px 8px calc(5px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;
    border-top:1px solid rgba(82,219,235,.16)!important;
    border-radius:18px 18px 0 0!important;
    background:linear-gradient(180deg,rgba(10,15,23,.985),rgba(5,8,13,.995))!important;
    box-shadow:0 -10px 30px rgba(0,0,0,.34),0 -1px 18px rgba(34,211,238,.03)!important;
    backdrop-filter:blur(22px)!important;
    overflow:hidden!important;
    z-index:120!important;
  }
  body.siv3-app .siv3-mobile-bottom::before{
    content:""!important;
    position:absolute!important;
    left:12%!important;right:12%!important;top:0!important;
    width:auto!important;height:1px!important;
    background:linear-gradient(90deg,transparent,#22d3ee,#8b5cf6,#f59e0b,transparent)!important;
    opacity:.72!important;
  }
  body.siv3-app .siv3-mobile-bottom>a{
    position:relative!important;
    display:grid!important;
    grid-template-rows:28px 14px!important;
    place-items:center!important;
    align-content:center!important;
    justify-content:stretch!important;
    row-gap:3px!important;
    width:100%!important;height:60px!important;min-height:60px!important;
    margin:0!important;padding:0 2px!important;
    border-radius:13px!important;
    color:#78869a!important;
    line-height:1!important;
    transform:none!important;
  }
  body.siv3-app .siv3-mobile-bottom>a::before{
    content:""!important;
    position:absolute!important;
    inset:2px 5px!important;
    width:auto!important;height:auto!important;
    border-radius:12px!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  body.siv3-app .siv3-mobile-bottom>a::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;top:-5px!important;
    width:28px!important;height:3px!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:translateX(-50%)!important;
  }
  body.siv3-app .siv3-mobile-bottom__icon{
    position:relative!important;z-index:2!important;
    display:grid!important;place-items:center!important;
    align-self:center!important;justify-self:center!important;
    width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;
    margin:0!important;padding:0!important;
    font-size:0!important;line-height:0!important;
    transform:none!important;
  }
  body.siv3-app .siv3-mobile-bottom__icon svg{
    display:block!important;
    width:24px!important;height:24px!important;
    margin:0!important;padding:0!important;
    transform:none!important;
  }
  body.siv3-app .siv3-mobile-bottom small{
    position:relative!important;z-index:2!important;
    display:block!important;
    align-self:center!important;justify-self:center!important;
    margin:0!important;padding:0!important;
    color:inherit!important;
    font-size:10px!important;font-weight:850!important;
    line-height:14px!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
  }
  body.siv3-app .siv3-mobile-bottom>a.is-active{color:#67e8f9!important}
  body.siv3-app .siv3-mobile-bottom>a.is-active::before{
    background:radial-gradient(circle at 50% 43%,rgba(34,211,238,.14),transparent 62%),rgba(34,211,238,.038)!important;
    box-shadow:inset 0 0 0 1px rgba(34,211,238,.09)!important;
  }
  body.siv3-app .siv3-mobile-bottom>a.is-active::after{
    background:#56e9f5!important;
    box-shadow:0 0 12px rgba(70,230,244,.64)!important;
  }
  body.siv3-app .siv3-mobile-bottom>a:nth-child(4){color:#78869a!important}
  body.siv3-app .siv3-mobile-bottom>a:nth-child(4).is-active{color:#ffd36b!important}
  body.siv3-app .siv3-mobile-bottom>a:nth-child(4).is-active::before{
    background:radial-gradient(circle at 50% 43%,rgba(246,184,74,.16),transparent 62%),rgba(246,184,74,.038)!important;
    box-shadow:inset 0 0 0 1px rgba(246,184,74,.10)!important;
  }
  body.siv3-app .siv3-mobile-bottom>a:nth-child(4).is-active::after{
    background:#f6c85f!important;
    box-shadow:0 0 12px rgba(246,200,95,.58)!important;
  }
  body.siv3-app .siv3-ad--mobile_sticky{
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Performance comparison icon/title alignment lock. */
@media(max-width:760px){
  body.siv3-app .siv3-performance-page .siv3-perf-model>header{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:12px!important;
    min-height:46px!important;
  }
  body.siv3-app .siv3-performance-page .siv3-perf-model>header>.siv3-perf-icon.is-model{
    width:44px!important;height:44px!important;
    margin:0!important;
    align-self:center!important;justify-self:center!important;
  }
  body.siv3-app .siv3-performance-page .siv3-perf-model>header>.siv3-perf-icon.is-model svg{
    width:22px!important;height:22px!important;
  }
  body.siv3-app .siv3-performance-page .siv3-perf-model>header>div{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-self:center!important;
    min-height:44px!important;
  }
}


/* 1.22.135 — Performance Center model-icon optical centering lock.
 * Root cause fixed: `.siv3-perf-model>header span` had higher specificity than
 * `.siv3-perf-icon` and changed the icon wrapper from grid to block, leaving the
 * SVG in the wrapper's top-left corner. Keep the icon wrapper as its own layout
 * context and center the SVG box independently of surrounding text rules. */
body.siv3-app .siv3-performance-page .siv3-perf-model>header>.siv3-perf-icon.is-model{
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  line-height:0!important;
  text-align:center!important;
  padding:0!important;
  overflow:hidden!important;
}
body.siv3-app .siv3-performance-page .siv3-perf-model>header>.siv3-perf-icon.is-model>svg{
  display:block!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  transform-origin:50% 50%!important;
}
body.siv3-app .siv3-performance-page .siv3-perf-model>header>div>span{
  display:block!important;
}