/* PRIME SKIN MATERIAL CONTRACT r3 | ONE COMMON PAINT OWNER
   Palette tokens: prime-skins.css + prime-skin-materials-hd.css.
   Panel geometry: PrimeSpatialField/PrimeZSpaceMap/PrimeDioramaAperture ONLY.
   Native scroll, card state, transforms, hit tests, clip, fonts, perspective,
   animation timing and depth positioning are not governed by skins.
   Works for every registered screen, nested machine and Page 02 service card.
   No new paint layers, DOM elements, compositing roots or observers. */

/* Material recipe inherited identically by every true 3D display assembly.
   All five built-ins and validated custom skins share this exact method. */
html[data-prime-skin] body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]:not(.pc-book-cover):not(.page04-work){
  /* Four directional edge shades visually close the deep Z2 cavity against
     the same opaque skinned rear. A single existing rear plane paints them. */
  --prime-machine-well-finish:
    linear-gradient(90deg,color-mix(in srgb,var(--pm-depth) 73%,transparent),transparent 20% 80%,color-mix(in srgb,var(--pm-depth) 73%,transparent)),
    linear-gradient(180deg,color-mix(in srgb,var(--pm-depth) 79%,transparent),transparent 20% 80%,color-mix(in srgb,var(--pm-depth) 79%,transparent)),
    var(--pm-hq-micro,var(--pm-grain)),var(--pm-inlay);
  --prime-machine-tunnel-finish:var(--pm-hw-satin,var(--pm-grain)),var(--pm-hq-horizon),var(--pm-inlay);
  --prime-machine-shell-rim:var(--pm-hw-blade,var(--pm-rim));
}

/* Glass is clear. The native optic owns only transparent highlights and
   scanlines. The root is an aperture, never a material-covered screen. */
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]:not(.pc-book-cover):not(.page04-work){
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-color:color-mix(in srgb,var(--prime-machine-shell-rim) 56%,transparent)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pm-glint) 36%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--pm-depth) 48%,transparent),
    0 0 0 1px color-mix(in srgb,var(--pm-hw-gasket,var(--pm-depth)) 27%,transparent)!important;
}
/* Actual negative-Z back wall, behind media, type, controls and every stage. */
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window:not(#portfolio)
[data-prime-z-screen="true"]:not(.pc-book-cover)>.prime-diorama-well-backdrop{
  background-image:var(--prime-machine-well-finish)!important;
  background-color:var(--prime-skin-bg)!important;
  --prime-well-seal-color:var(--pm-depth);
}
/* Four physical tunnel walls, each with its original true X/Y/Z geometry. */
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window:not(#portfolio)
[data-prime-z-screen="true"]:not(.pc-book-cover)>.prime-tunnel-wall{
  /* Reinstated original inner-chamber material. Chrome belongs exclusively
     to the reversed outside face defined by the structural aperture CSS. */
  background-image:var(--prime-machine-tunnel-finish)!important;
  background-color:var(--prime-skin-panel)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pm-glint) 24%,transparent),
    inset 0 -1px 0 var(--pm-depth)!important;
}
/* Physical machine tubing ONLY: the real extruded front-to-back sides,
   machined bevels, and corner segments. Never a viewport-wide chassis.
   These children already exist, so this changes pigment not geometry. */
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]>.prime-spatial-thickness>
:is(.prime-spatial-thickness-top,.prime-spatial-thickness-bottom,
    .prime-spatial-thickness-left,.prime-spatial-thickness-right,
    [class*="prime-spatial-thickness-bevel-"],.prime-device-chassis-corner-wall){
  background-image:var(--pm-hq-micro,var(--pm-grain)),
    var(--pm-hq-studio-softbox,var(--pm-specular)),var(--pm-metal)!important;
  background-color:var(--prime-skin-panel)!important;
  border-top-color:var(--pm-hw-blade,var(--pm-rim))!important;
  border-bottom-color:var(--pm-hw-gasket,var(--pm-depth))!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pm-glint) 65%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--pm-depth) 83%,transparent)!important;
}
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]>.prime-spatial-thickness>.prime-machine-seam{
  background-image:var(--pm-hq-grazing,var(--pm-specular)),var(--pm-metal)!important;
  border-color:var(--pm-rim)!important;
}
/* Bezel metal, not a second glass film. */
html[data-prime-skin] body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]:not(.pc-book-cover)>.prime-diorama-edge{
  border-color:color-mix(in srgb,var(--prime-machine-shell-rim) 56%,transparent)!important;
}
/* Any existing 3D relief/surface pigment must be cleared, not tinted.
   Leave real Z hardware and specular ::before/::after optical layers intact. */
html[data-prime-skin] body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]>.prime-spatial-surface-relief{
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  pointer-events:none!important;
}
html[data-prime-skin] body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]>.prime-diorama-glass-face{
  background-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  pointer-events:none!important;
}
/* Prismatic chrome optic must never become an opaque skin-colored overlay.
   Optical highlights remain with the native sheet's independent renderer. */
html[data-prime-skin] body.prime-v2 #main[data-app-shell]>.app-window
[data-prime-z-screen="true"]>.prime-prismatic-chrome-optics{
  background-color:transparent!important;
  pointer-events:none!important;
}
/* Without a 3D camera, retain a neutral readable display surface.
   Only chrome and controls take the chosen material in flat mode. */
html[data-prime-skin]:not([data-prime-spatial-enabled="true"]) body.prime-v2
#main[data-app-shell]>.app-window
[data-prime-z-screen="true"]:not(.pc-book-cover):not(.page04-work){
  background:linear-gradient(155deg,#101f2b,#07131e 65%,#0b1c29)!important;
  border-color:color-mix(in srgb,var(--pm-rim) 48%,transparent)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Non-machine decorative surfaces: skinned without radius, backdrop filter,
   font metrics, box size, positioning, z-index or transform changes. */
html[data-prime-skin] body.prime-v2 :is(
  [data-prime-skin-surface],.topbar,.tool-rail,.inspector,.help-panel,.help-drawer,
  .status-bar,.console-header,.prime-repair-panel,.contact form,.music-console,
  .gallery-item,.video-feature,.video-card,.pc-book-reader-panel
):not(.app-window):not([data-prime-machine-panel="true"]):not([data-prime-z-screen="true"]){
  border-color:color-mix(in srgb,var(--pm-rim) 45%,transparent)!important;
  background-image:var(--pm-hq-micro,var(--pm-grain)),var(--pm-hq-horizon),var(--pm-body)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pm-glint) 31%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--pm-depth) 48%,transparent)!important;
}
/* Programmatic skin-surface affordances that are themselves screens are always
   excluded, including cards tagged BEFORE their machine hydration arrives. */
html[data-prime-skin] body.prime-v2 :is(
  .service-card,.release-panel,.sprit-release-panel,.pan3l-release-panel,
  .process-panel,.studio-console,.tab01-intro-copy,.tab01-services-head
):not([data-prime-z-screen="true"]):not([data-prime-machine-panel="true"]){
  border-color:color-mix(in srgb,var(--pm-rim) 40%,transparent)!important;
}

/* Any other Prime pill shares the same alloy; no duplicate bezel stylesheet paint. */
html[data-prime-skin] body.prime-v2 [data-prime-skin-pill]:not(#primeCommandDeck){
  background-image:var(--pm-hq-micro,var(--pm-grain)),var(--pm-hq-spot,var(--pm-specular)),var(--pm-body)!important;
  border-color:var(--pm-rim)!important;
}
/* Command bar and familiar controls keep their geometry/input/animations.
   Every finish uses the same specular+alloy recipe, not per-skin overrides. */
html[data-prime-skin] body.prime-v2 #primeCommandDeck.prime-command-deck{
  background-image:var(--pm-hq-micro,var(--pm-grain)),var(--pm-hq-spot,var(--pm-specular)),var(--pm-body)!important;
  border-color:var(--pm-rim)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pm-glint) 55%,transparent),
    inset 0 -2px 0 var(--pm-depth),
    0 15px 40px color-mix(in srgb,var(--pm-depth) 57%,transparent)!important;
}
html[data-prime-skin] body.prime-v2 :is(
  [data-prime-skin-control],#primeCommandDeck .prime-deck-utilities>button,
  #primeCommandDeck .prime-deck-pages>button,
  #primeCommandDeck .prime-deck-tool-placeholder,
  .module-button,.screen-actions button,.mobile-nav button,.transport button,
  .service-card button,.prime-price-tab
):not(.prime-skin-card){
  background-image:var(--pm-hq-button-lip,var(--pm-glass)),
    var(--pm-hq-control-sheen,var(--pm-specular)),var(--pm-control)!important;
  border-color:color-mix(in srgb,var(--pm-rim) 66%,transparent)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pm-glint) 67%,transparent),
    inset 0 -2px 1px color-mix(in srgb,var(--pm-depth) 70%,transparent),
    0 3px 11px color-mix(in srgb,var(--pm-depth) 43%,transparent)!important;
}
/* Other native buttons still inherit their accent and bevel without applying
   paint over media assets, icons, background images or their existing animation. */
html[data-prime-skin] body.prime-v2 :is(button,[role="button"],.key,.tool):not(.prime-skin-card){
  border-color:color-mix(in srgb,var(--pm-rim) 44%,transparent)!important;
}
html[data-prime-skin] body.prime-v2 :is(
 [data-prime-skin-control],#primeCommandDeck .prime-deck-utilities>button,
 #primeCommandDeck .prime-deck-pages>button,.module-button,.prime-price-tab
):is(:focus-visible,[aria-current="page"],[aria-pressed="true"],[data-selected="true"]){
  border-color:var(--prime-skin-accent)!important;
  background-image:var(--pm-hq-control-sheen),var(--pm-control-active)!important;
}
/* Keep custom picker swatches visibly distinct; preview owns its miniatures. */
html[data-prime-skin] body.prime-v2 :is(.prime-skin-card,.prime-skin-preview){
  border-color:var(--pm-rim)!important;
}
@media(forced-colors:active){
  html[data-prime-skin] body.prime-v2 #main[data-app-shell]>.app-window
  [data-prime-z-screen="true"]{background:Canvas!important;color:CanvasText!important}
}

/* SKIN-FINISHED GREY TUBING | r8, visible profile ×0.5
   One existing front perimeter and its existing inset rail. Use each skin's
   alloy and highlight tokens on the GREY TUBING itself, not on glass,
   screen text, card interiors, or the viewport. There are no new elements,
   raster images, WebGL passes, filters, animation loops or layout changes. */
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active
[data-prime-z-screen="true"]:not(.pc-book-cover):not(.page04-work){
  --prime-tube-bright:var(--pm-hw-blade,var(--pm-rim));
  --prime-tube-dark:var(--pm-hw-gasket,var(--pm-depth));
  --prime-tube-light:var(--pm-glint);
  border-color:color-mix(in srgb,var(--prime-tube-bright) 74%,var(--prime-tube-dark))!important;
  box-shadow:
    inset 0 .5px 0 color-mix(in srgb,var(--prime-tube-light) 50%,transparent),
    inset 0 -.5px 0 color-mix(in srgb,var(--prime-tube-dark) 66%,transparent),
    0 0 0 .5px color-mix(in srgb,var(--prime-tube-bright) 28%,transparent),
    0 7px 18px color-mix(in srgb,var(--prime-tube-dark) 42%,transparent)!important;
}
/* The thick rounded inset border highlighted in the supplied screenshots:
   its native geometry stays exactly the same for projected aperture clipping. */
html[data-prime-skin][data-prime-spatial-system-enabled="true"][data-prime-spatial-enabled="true"]
body.prime-v2 #main[data-app-shell]>.app-window.is-prime-viewport-active
[data-prime-z-screen="true"]:not(.pc-book-cover)>.prime-diorama-edge{
  border-width:.5px!important;
  border-color:color-mix(in srgb,var(--pm-hw-blade,var(--pm-rim)) 81%,var(--pm-hw-gasket,var(--pm-depth)))!important;
  box-shadow:
    inset 0 0 0 .5px color-mix(in srgb,var(--pm-hw-gasket,var(--pm-depth)) 66%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--pm-hw-blade,var(--pm-rim)) 26%,transparent),
    0 0 0 .5px color-mix(in srgb,var(--pm-hw-gasket,var(--pm-depth)) 73%,transparent),
    0 0 3.5px color-mix(in srgb,var(--pm-glint) 17%,transparent)!important;
}
/* Existing extruded face/side/corner pieces remain skinnable using --pm-metal,
   --pm-hw-gloss and --pm-hw-satin declarations earlier in this stylesheet.
   Existing source glass stays clear. */