/* 147: compact equipment controls and intrinsic shop rows.
   This file follows the shared painted theme; the approved art is unchanged. */
html body #inventory-panel :is(.character-actions,.bag-tabs,.bag-title,.bag-footer,.bag-paging,#bag-set-options,.detail-actions) button,
html body #inventory-panel #collect-loot{
 border-width:6px!important;
 border-image-width:14.34px 6.54px 16.38px 6.6px!important;
 border-image-outset:8.58px .78px 10.62px .84px!important;
 min-height:32px!important;padding:2px 5px!important;font-size:12px!important;line-height:1.2;
 clip-path:inset(0 round 4px);
}
html body #inventory-panel .character-actions{grid-template-columns:1fr 1.2fr 1fr;gap:5px;padding:5px 0}
html body #inventory-panel .character-actions button{min-height:38px!important}
html body #inventory-panel .bag-tabs{flex-wrap:nowrap;gap:5px}
html body #inventory-panel .bag-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:40px!important;min-width:0}
html body #inventory-panel .bag-tabs small{display:block;margin:0;font:10px/1.1 system-ui,sans-serif}
html body #inventory-panel #bag-set-options button{font-size:11px!important;white-space:nowrap;overflow-wrap:normal}
html body #inventory-panel .bag-title button,
html body #inventory-panel .bag-footer button,
html body #inventory-panel .bag-paging button{font-size:11px!important}
html body #inventory-panel .bag-paging{gap:12px;padding:5px 0}
html body #inventory-panel .bag-paging button{width:36px;padding:0!important}
/* Leave the skin square and its visibility label clear above the presets. */
html body #inventory-panel .equipment-loadouts{
 top:calc(var(--gear-size,48px) + 32px);left:calc(var(--gear-size,48px) + 8px);
 transform:none;display:flex;flex-direction:column;gap:6px;
}
html body #inventory-panel .equipment-loadouts button{
 display:grid;place-items:center;flex:none;box-sizing:border-box;
 width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;
 padding:0!important;border-width:6px!important;
 border-image-width:14.34px 6.54px 16.38px 6.6px!important;
 border-image-outset:8.58px .78px 10.62px .84px!important;
 white-space:nowrap;overflow-wrap:normal;word-break:normal;clip-path:inset(0 round 4px);
 font:600 14px/1 Georgia,'Times New Roman',serif!important;
}
/* Fixed 3 by 3 equipment selection does not expand across the whole panel. */
html body dialog.syl-forge .forge-grid.equipped{
 grid-template-columns:repeat(3,minmax(0,72px));width:min(100%,228px);gap:6px;margin:0 auto;justify-content:center;
}
html body dialog.syl-forge .forge-grid.equipped .item-cell{width:100%;height:auto;aspect-ratio:1;min-height:0}
html body dialog.syl-forge .forge-section{padding:10px 0}
html body dialog.syl-forge .forge-section>h3{font-size:17px;line-height:1.25;margin:0 0 8px;text-align:center}
html body dialog.syl-forge .forge-selected .item-cell{width:68px;height:68px;min-height:0}
html body dialog.syl-forge .forge-pair{width:min(100%,270px);gap:12px;margin:8px auto 10px}
html body dialog.syl-forge .forge-selected>strong{max-width:100%;font-size:11px;line-height:1.3}
html body dialog.syl-forge .forge-selected>small{font-size:11px}
html body dialog.syl-forge .forge-tabs button,
html body dialog.syl-forge .forge-inspect{
 border-width:6px!important;border-image-width:14.34px 6.54px 16.38px 6.6px!important;
 border-image-outset:8.58px .78px 10.62px .84px!important;min-height:32px!important;padding:2px 4px!important;font-size:12px;clip-path:inset(0 round 4px);
}
html body dialog.syl-forge .forge-inspect{font-size:10px}
html body dialog.syl-forge .forge-grid.equipped .item-cell:disabled{
 filter:grayscale(.85) brightness(.52)!important;opacity:.55!important;
}
/* The scroll container has block children. Only the catalog itself is a grid,
   with content-sized rows; its images and copy cannot collapse into each other. */
html body dialog.syl-service.ui144-panel[data-service=equipment] .syl-service-body{display:block}
html body dialog.syl-service.ui144-panel .cosmetic-preview{
 display:block;height:auto;min-height:0;max-height:none;padding:12px 10px;margin:0 0 10px;
 box-sizing:border-box;overflow:visible;
}
html body dialog.syl-service.ui144-panel .cosmetic-art-frame{
 display:grid;place-items:center;width:180px;height:180px;max-width:100%;margin:0 auto 8px;overflow:hidden;
}
html body dialog.syl-service.ui144-panel .cosmetic-preview .cosmetic-art-frame>canvas{
 position:static!important;inset:auto!important;display:block;width:100%!important;height:100%!important;
 max-width:100%;max-height:100%;object-fit:contain;margin:0;transform:none;
}
html body dialog.syl-service.ui144-panel .cosmetic-preview-copy{position:static;display:block;min-width:0;text-align:center}
html body dialog.syl-service.ui144-panel .cosmetic-preview-copy h3{font-size:23px;line-height:1.25;margin:4px 0!important}
html body dialog.syl-service.ui144-panel .cosmetic-preview-copy p{font-size:12px;line-height:1.45;margin:5px 0;overflow-wrap:anywhere}
html body dialog.syl-service.ui144-panel .cosmetic-catalog{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;
 align-items:start;align-content:start;gap:8px;width:100%;margin:0 0 10px;
}
html body dialog.syl-service.ui144-panel .cosmetic-catalog>.cosmetic-choice{
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:95px auto auto;
 align-items:center;align-content:start;justify-items:center;gap:6px;
 width:100%;height:auto!important;min-height:161px;max-height:none;
 padding:9px 5px;box-sizing:border-box;overflow:hidden;margin:0;
}
html body dialog.syl-service.ui144-panel .cosmetic-choice-art{display:block;width:95px;height:95px;max-width:100%;overflow:hidden}
html body dialog.syl-service.ui144-panel .cosmetic-choice-art>canvas{
 position:static!important;inset:auto!important;display:block;width:100%!important;height:100%!important;
 max-width:100%;max-height:100%;object-fit:contain;margin:0;transform:none;
}
html body dialog.syl-service.ui144-panel .cosmetic-choice strong{
 position:static;display:block;width:100%;margin:0;text-align:center;font:600 16px/1.25 Georgia,serif;overflow-wrap:anywhere;
}
html body dialog.syl-service.ui144-panel .cosmetic-choice small{
 position:static;display:block;width:100%;margin:0;text-align:center;font:12px/1.3 system-ui,sans-serif;overflow-wrap:anywhere;
}
html body dialog.syl-service.ui144-panel .cosmetic-buy{margin:0;padding:3px 0 8px;position:static;background:none}
@media(max-width:370px){
 html body #inventory-panel .character-actions button{font-size:11px!important}
 html body #inventory-panel #bag-set-options button{font-size:10px!important;padding:2px!important}
 html body dialog.syl-service.ui144-panel .cosmetic-preview-copy h3{font-size:21px}
}