/* Roadmap 7: mobile/PWA polish and lightweight rendering safeguards. */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --site-content-max:1680px;
}
html{overscroll-behavior-y:none;scrollbar-gutter:stable}
body{min-height:100dvh;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}

/* Use the wider centre workspace everywhere, not only in Admin. */
.content{width:min(var(--site-content-max),calc(100% - 32px))}

/*
  Family heights vary dramatically (one variant vs. seven+ variants). The old
  360px intrinsic placeholder made the document change height as tall families
  entered the viewport, which could feel like a hitch or jump while scrolling.
  Keep real family geometry stable and save work by pausing card motion instead.
*/
#grid .family{content-visibility:visible;contain-intrinsic-size:none}
#grid .variant{will-change:auto!important}
@media(pointer:fine){
  #grid .variant:hover,#grid .variant:focus-within{will-change:transform!important}
}

/* Off-screen families do not need continuous floating / shine animation ticks. */
#grid .family[data-catalogue-viewport="far"] *,
#grid .family[data-catalogue-viewport="far"] *::before,
#grid .family[data-catalogue-viewport="far"] *::after{
  animation-play-state:paused!important;
}

/* While the user is actively scrolling, favour scrolling over decorative motion. */
html[data-catalogue-scrolling="1"] #grid .variant,
html[data-catalogue-scrolling="1"] #grid .family{
  transition-duration:0s!important;
}
html[data-catalogue-scrolling="1"] #grid .variant{
  transform:none!important;
  will-change:auto!important;
}
html[data-catalogue-scrolling="1"] #grid .variant *,
html[data-catalogue-scrolling="1"] #grid .variant *::before,
html[data-catalogue-scrolling="1"] #grid .variant *::after,
html[data-catalogue-scrolling="1"] #grid .variant::before,
html[data-catalogue-scrolling="1"] #grid .variant::after,
html[data-page-hidden="1"] #grid .variant *,
html[data-page-hidden="1"] #grid .variant *::before,
html[data-page-hidden="1"] #grid .variant *::after{
  animation-play-state:paused!important;
}

/* On large desktops the extra width should show more catalogue, not just larger cards. */
@media(min-width:1780px){
  #grid.spritegrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

.variant img,.dashboard-featured-img,.sprite-info-art img,.parity-editor-art img{user-select:none;-webkit-user-drag:none}
.top{padding-left:max(16px,var(--safe-left))!important;padding-right:max(16px,var(--safe-right))!important}
.mobile{padding-left:max(6px,var(--safe-left))!important;padding-right:max(6px,var(--safe-right))!important;padding-bottom:max(6px,var(--safe-bottom))!important}
.modal,.sprite-info-overlay{padding-left:max(12px,var(--safe-left));padding-right:max(12px,var(--safe-right))}

/* Installed mode feels like an app rather than a browser page. */
html.is-standalone .top{padding-top:max(10px,var(--safe-top))!important}
html.is-standalone .content{padding-bottom:calc(88px + var(--safe-bottom))}
html.is-standalone .mobile{box-shadow:0 -12px 36px rgba(0,0,0,.18)}

@media(max-width:900px){
  .top{position:sticky;top:0;z-index:45;gap:8px}
  .actions{gap:6px;min-width:0}
  .actions .pill{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .actions .btn{min-height:44px}
  .mobile button{min-height:46px;touch-action:manipulation}
  .content{width:min(calc(100% - 20px - var(--safe-left) - var(--safe-right)),var(--site-content-max))}
  .home-hero,.dashboard-card,.panel,.family{scroll-margin-top:90px}
}

@media(max-width:620px){
  .top{padding-inline:max(10px,var(--safe-left)) max(10px,var(--safe-right))!important}
  .brand-home{min-width:0!important;max-width:calc(100% - 154px)}
  .brand-home .brand-lockup{min-width:0}
  .brand-home .brand-copy{overflow:hidden}
  .brand-home .brand-title{overflow:hidden;text-overflow:ellipsis}
  .actions .theme-toggle{min-width:44px!important;width:44px;padding:0!important}
  .actions #sync{display:none}
  .actions #account{padding-inline:10px;white-space:nowrap}
  .toolbar .input,.toolbar .select{min-height:44px}
  .sprite-info-trigger,.overview-check,.btn,.chip{touch-action:manipulation}
}

@media(max-width:420px){
  .content{width:calc(100% - 14px)}
  .brand-home{max-width:calc(100% - 120px)}
  .brand-home .brand-title{font-size:1rem!important}
  .actions #account{font-size:.72rem;padding-inline:8px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}