/* Prime Skins // spatial character + skin-studio viewport safety.
   PrimeMobileSpatialMedia renders motion as an internal PrimeSpatialUnified component.
   Prime Skin Spatial selects material character only and does not own active Spatial geometry.
   Skin material translation is permitted only while Spatial is off; active Spatial geometry belongs to PrimeSpatialField. */
:root{
  --prime-skin-spatial-response:1;
  --prime-skin-spatial-depth-character:1;
  --prime-skin-spatial-settle:180ms;
  --prime-skin-far-x:var(--pc-background-x,var(--s3-material-far-x,0px));
  --prime-skin-far-y:var(--pc-background-y,var(--s3-material-far-y,0px));
  --prime-skin-mid-x:var(--pc-midground-x,var(--s3-material-x,0px));
  --prime-skin-mid-y:var(--pc-midground-y,var(--s3-material-y,0px));
  --prime-skin-near-x:var(--pc-foreground-x,var(--s3-material-near-x,0px));
  --prime-skin-near-y:var(--pc-foreground-y,var(--s3-material-near-y,0px));
}

html[data-prime-skin-motion="weighty"]{--prime-skin-spatial-settle:210ms;--prime-skin-mid-x:var(--pc-background-x,var(--s3-material-far-x,0px));--prime-skin-mid-y:var(--pc-background-y,var(--s3-material-far-y,0px));--prime-skin-near-x:var(--pc-midground-x,var(--s3-material-x,0px));--prime-skin-near-y:var(--pc-midground-y,var(--s3-material-y,0px))}
html[data-prime-skin-motion="buoyant"]{--prime-skin-spatial-settle:320ms}
html[data-prime-skin-motion="orbit"]{--prime-skin-spatial-settle:180ms}
html[data-prime-skin-motion="mechanical"]{--prime-skin-spatial-settle:95ms;--prime-skin-near-x:var(--pc-midground-x,var(--s3-material-x,0px));--prime-skin-near-y:var(--pc-midground-y,var(--s3-material-y,0px))}
html[data-prime-skin-motion="flow"]{--prime-skin-spatial-settle:260ms}

/* Skins are strictly material profiles. No skin may translate page-flow
   content, cards or machine screens, even when Spatial is disabled.
   Previously these transforms changed projected scrollable extents. */
/* Skin Studio controls remain independent viewport chrome. */
/* Skin selection does not modify transforms, including on unrelated Forge panels. */
html[data-prime-skin] .prime-skin-dialog{translate:-50% -50%!important;rotate:none!important;transform:none!important;will-change:auto!important}

/* Skin Studio is intentionally smaller than the page and clamped to the live viewport. */
.prime-skin-dialog{
  --prime-skin-safe-top:max(.35rem,var(--pf-safe-top,env(safe-area-inset-top)));
  --prime-skin-safe-right:max(.35rem,var(--pf-safe-right,env(safe-area-inset-right)));
  --prime-skin-safe-bottom:max(.35rem,var(--pf-safe-bottom,env(safe-area-inset-bottom)));
  --prime-skin-safe-left:max(.35rem,var(--pf-safe-left,env(safe-area-inset-left)));
  box-sizing:border-box!important;
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  width:min(36rem,calc(var(--pf-vw,100vw) - var(--prime-skin-safe-left) - var(--prime-skin-safe-right) - .5rem))!important;
  max-width:calc(var(--pf-vw,100vw) - var(--prime-skin-safe-left) - var(--prime-skin-safe-right) - .5rem)!important;
  max-height:calc(var(--pf-vh,100dvh) - var(--prime-skin-safe-top) - var(--prime-skin-safe-bottom) - .5rem)!important;
  margin:0!important;overflow:hidden!important;overscroll-behavior:none!important;
}
.prime-skin-dialog>.prime-skin-shell{max-height:inherit!important;min-height:0!important}
.prime-skin-dialog .prime-skin-head{gap:.55rem!important;padding:.6rem .68rem!important}
.prime-skin-dialog .prime-skin-head b{font-size:.72rem!important;letter-spacing:.14em!important}
.prime-skin-dialog .prime-skin-head small{font-size:.68rem!important}
.prime-skin-dialog .prime-skin-close{min-width:2.15rem!important;min-height:2.15rem!important;padding:.25rem!important}
.prime-skin-dialog .prime-skin-body{min-height:0!important;padding:.68rem!important;overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
.prime-skin-dialog .prime-skin-grid{gap:.42rem!important}
.prime-skin-dialog .prime-skin-card{min-height:4.65rem!important;padding:.5rem!important}
.prime-skin-dialog .prime-skin-card::after{inset:5px!important}
.prime-skin-dialog .prime-skin-card b{font-size:.7rem!important;letter-spacing:.1em!important}
.prime-skin-dialog .prime-skin-card small{font-size:.64rem!important;line-height:1.2!important}
.prime-skin-dialog .prime-skin-custom{grid-template-columns:minmax(0,1.15fr) minmax(11rem,.85fr)!important;gap:.68rem!important;margin-top:.68rem!important;padding-top:.68rem!important}
.prime-skin-dialog .prime-skin-maker{gap:.45rem!important}
.prime-skin-dialog .prime-skin-maker h3{font-size:.9rem!important}
.prime-skin-dialog .prime-skin-maker p{font-size:.72rem!important;line-height:1.35!important}
.prime-skin-dialog .prime-skin-upload{min-height:2.2rem!important;padding:.42rem .62rem!important;font-size:.68rem!important}
.prime-skin-dialog .prime-skin-json{min-height:7rem!important;max-height:8.4rem!important;padding:.55rem!important;resize:none!important;font-size:10px!important;line-height:1.35!important}
.prime-skin-dialog .prime-skin-actions{gap:.34rem!important}
.prime-skin-dialog .prime-skin-actions button{min-height:2.05rem!important;padding:.34rem .52rem!important;font-size:.63rem!important}
.prime-skin-dialog .prime-skin-status{min-height:1.1rem!important;font-size:.68rem!important}
.prime-skin-dialog .prime-skin-preview{min-height:9rem!important;padding:.68rem!important;gap:.5rem!important}
.prime-skin-dialog .prime-skin-preview span{font-size:.7rem!important}
.prime-skin-dialog .prime-skin-preview button{min-height:2.3rem!important;font-size:.7rem!important}
.prime-skin-dialog .prime-skin-guide{margin-top:.5rem!important;padding:.48rem!important}
.prime-skin-dialog .prime-skin-guide summary{font-size:.72rem!important}
.prime-skin-dialog .prime-skin-guide ol{margin:.45rem 0 .15rem!important;font-size:.7rem!important;line-height:1.4!important}

@media(max-width:680px){
  .prime-skin-dialog{width:calc(var(--pf-vw,100vw) - var(--prime-skin-safe-left) - var(--prime-skin-safe-right) - .35rem)!important;max-width:calc(var(--pf-vw,100vw) - var(--prime-skin-safe-left) - var(--prime-skin-safe-right) - .35rem)!important}
  .prime-skin-dialog .prime-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .prime-skin-dialog .prime-skin-card{min-height:4.15rem!important}
  .prime-skin-dialog .prime-skin-custom{grid-template-columns:1fr!important}
  .prime-skin-dialog .prime-skin-json{min-height:6.1rem!important;max-height:7rem!important}
  .prime-skin-dialog .prime-skin-preview{min-height:6.8rem!important}
}

@media(orientation:landscape) and (max-height:600px){
  .prime-skin-dialog{width:min(40rem,calc(var(--pf-vw,100vw) - var(--prime-skin-safe-left) - var(--prime-skin-safe-right) - .35rem))!important;max-height:calc(var(--pf-vh,100dvh) - var(--prime-skin-safe-top) - var(--prime-skin-safe-bottom) - .35rem)!important}
  .prime-skin-dialog .prime-skin-head{padding:.4rem .55rem!important}
  .prime-skin-dialog .prime-skin-head small{display:none!important}
  .prime-skin-dialog .prime-skin-body{padding:.45rem!important}
  .prime-skin-dialog .prime-skin-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.32rem!important}
  .prime-skin-dialog .prime-skin-card{min-height:3.45rem!important;padding:.38rem!important}
  .prime-skin-dialog .prime-skin-card small{display:none!important}
  .prime-skin-dialog .prime-skin-custom{grid-template-columns:minmax(0,1.2fr) minmax(9rem,.8fr)!important;gap:.45rem!important;margin-top:.42rem!important;padding-top:.42rem!important}
  .prime-skin-dialog .prime-skin-maker{gap:.32rem!important}
  .prime-skin-dialog .prime-skin-maker>p,.prime-skin-dialog .prime-skin-guide{display:none!important}
  .prime-skin-dialog .prime-skin-json{min-height:4.25rem!important;max-height:4.8rem!important}
  .prime-skin-dialog .prime-skin-preview{min-height:5.4rem!important;padding:.5rem!important}
  .prime-skin-dialog .prime-skin-actions button{min-height:1.9rem!important;padding:.28rem .42rem!important;font-size:.58rem!important}
}

html[data-prime-resource-tier="low"],html[data-pc-hw-tier="low"],html.super-low-cost{--prime-skin-far-x:0px;--prime-skin-far-y:0px;--prime-skin-mid-x:0px;--prime-skin-mid-y:0px;--prime-skin-near-x:0px;--prime-skin-near-y:0px}
@media(prefers-reduced-motion:reduce){html[data-prime-skin]{--prime-skin-far-x:0px;--prime-skin-far-y:0px;--prime-skin-mid-x:0px;--prime-skin-mid-y:0px;--prime-skin-near-x:0px;--prime-skin-near-y:0px}}