/* A frame owns layout space as well as paint. Fixed slices tile along the
   edges; surface fills stop at the inner edge, including hover/selection. */
body[data-view=builder] :is(.build-meta,.arsenal-equipment,.workshop-scene,.sanctum-scene,.virtue-scene,.journal-scene,.stats-panel){
  border:6px solid transparent;
  border-image:url('/assets/ui/game-panel-frame.webp') 34/6px repeat;
}
body[data-view=builder] :is(.build-meta,.arsenal-equipment,.workshop-scene,.sanctum-scene,.virtue-scene,.journal-scene,.stats-panel):before,
body[data-view=builder] .build-record>summary:before,
body[data-view=builder] .scene-switch>button:before,
body[data-view=builder] .inventory-item:before,
body[data-view=builder] .temper-cell:before,
body[data-view=builder] .joinery-fitting:before,
body[data-view=builder] .pact-arts-shelf .pact-ability:before{content:none}

body[data-view=builder] .build-record>summary,
body[data-view=builder] .scene-switch>button{
  border:6px solid transparent;
  border-image:url('/assets/ui/game-panel-frame.webp') 34/6px repeat;
}
body[data-view=builder] .scene-switch>button[aria-pressed=true]{border-color:transparent}
body[data-view=builder] .inventory-item,
body[data-view=builder] .inventory-item:is(:hover,[aria-pressed=true]){
  min-height:176px;
  border:9px solid transparent;
  border-image:url('/assets/ui/arsenal-item-frame.webp') 34/9px repeat;
}
body[data-view=builder] .inventory-item.is-equipped{border-image-source:url('/assets/ui/arsenal-item-equipped.webp')}
body[data-view=builder] .inventory-item:is(:hover,[aria-pressed=true]){border-image-source:url('/assets/ui/arsenal-item-hover.webp')}
body[data-view=builder] .temper-cell{
  border:9px solid transparent;
  border-image:url('/assets/ui/arsenal-item-frame.webp') 34/9px repeat;
  background:#8c69300e;
}
body[data-view=builder] .temper-cell:is(:hover,:focus-within){border-image-source:url('/assets/ui/arsenal-item-hover.webp')}
body[data-view=builder] .temper-cell .upgrade-pick{background:transparent}
body[data-view=builder] .joinery-fitting{
  border:10px solid transparent;
  border-image:url('/assets/ui/forge-joinery-frame.webp') 60/10px repeat;
}
body[data-view=builder] .joinery-fitting:hover{border-image-source:url('/assets/ui/forge-joinery-hover.webp')}
body[data-view=builder] .pact-arts-shelf .pact-ability{
  border:8px solid transparent;
  border-image:url('/assets/ui/forge-select-frame.webp') 60/8px repeat;
}

/* State selectors also override older background shorthands, which reset
   background-clip. Keep tooltips and intentional scrolling surfaces visible. */
body[data-view] :is(.build-meta,.arsenal-equipment,.workshop-scene,.sanctum-scene,.virtue-scene,.journal-scene,.stats-panel,
  .build-record>summary,.scene-switch>button,.scene-switch>button[aria-pressed=true],.scene-switch>button:hover,
  .inventory-item,.inventory-item[aria-pressed=true],.inventory-item:hover,.inventory-item.is-equipped,
  .inventory-preview,.temper-cell,.joinery-fitting,.pact-arts-shelf .pact-ability,
  .panel,.doc-card,.guide-card,.resource-panel,.empty-state,.reading-view,.tier-board,.tier-item,.tier-item:hover,
  .journal-scene .journal-page,.sanctum-scene .skill-inspection,dialog,dialog .dialog-head){background-clip:padding-box}

body[data-view=builder] :is(.build-record>summary,.scene-switch>button,.inventory-item,.temper-cell .upgrade-pick,.joinery-fitting .upgrade-pick):focus-visible,
.tier-item:focus-visible{outline:1px solid var(--gold);outline-offset:-3px}
body[data-view=builder] .inventory-item:focus-visible{outline-offset:-12px}
body[data-view=builder] .scene-switch>button:focus-visible,
body[data-view=builder] .build-record>summary:focus-visible{outline-offset:-9px}
body[data-view=builder] .scene-switch>button>span{min-width:0}
body[data-view=builder] .build-record>summary{flex-wrap:wrap;gap:.4rem .8rem}
body[data-view=builder] .build-record>summary>[data-record-title]{flex:1 1 140px}
body[data-view=builder] .pact-arts-shelf .pact-ability{min-width:0;overflow-wrap:anywhere}
body[data-view=builder] dialog .dialog-head>div{min-width:0;flex:1}
body[data-view=builder] dialog .dialog-head h2{overflow-wrap:anywhere}
body[data-view=builder] dialog .dialog-head .icon-button{flex:none}

@media(max-width:760px){
  body[data-view=builder] .scene-switch>button{flex:1 1 120px;flex-wrap:wrap}
  body[data-view=builder] .inventory-item,
  body[data-view=builder] .inventory-item:is(:hover,[aria-pressed=true]){min-height:144px;padding:.5rem .25rem}
}