/* layout pass 2 phase B: per-tool restructures */
/* B1 cape builder: skins | capes side by side, gallery chips */
@media(min-width:1100px){
#page-capebuilder.active{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;align-items:start}
#page-capebuilder.active>*{grid-column:1/-1}
#page-capebuilder.active>.card:has(#cbSkinDz){grid-column:1}
#page-capebuilder.active>.card:has(#cbCapeDz){grid-column:2}
}
.cb-gal-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .5rem}
.cb-gal-chip{font-family:var(--mc);font-size:.52rem;padding:.45rem .7rem;background:var(--btn-bg);color:var(--text-sec);border:2px solid;border-top-color:var(--btn-hi);border-left-color:var(--btn-hi);border-bottom-color:var(--btn-lo);border-right-color:var(--btn-lo);cursor:pointer;text-shadow:1px 1px 0 #000}
.cb-gal-chip:hover{filter:brightness(1.15)}
.cb-gal-chip.on{background:linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 14%),color-mix(in srgb,var(--accent),#000 24%));color:#fff}
/* B2 totem: options left, big preview right */
@media(min-width:1000px){
#page-totem.active .card:has(#tmPreviewWrap){display:grid;grid-template-columns:.92fr 1.08fr;gap:0 1.3rem;align-items:start}
#page-totem.active .card:has(#tmPreviewWrap)>*{grid-column:1}
#page-totem.active .card:has(#tmPreviewWrap)>.card-label{grid-column:1/-1}
#page-totem.active .card:has(#tmPreviewWrap)>div:has(#tmPreviewWrap){grid-column:2;grid-row:2/12}
#tmPreviewWrap{min-height:380px}
}
#tmPreviewWrap canvas{width:min(380px,92%);height:auto;image-rendering:pixelated}
/* B3 colorcode: editor left spans, preview + copy stacked right */
@media(min-width:821px){
#page-colorcode .cc-duo>.card:nth-child(1){grid-column:1;grid-row:1/3}
#page-colorcode .cc-duo>.cc-prev-card{grid-column:2;grid-row:1}
#page-colorcode .cc-duo>.card:nth-child(3){grid-column:2;grid-row:2}
}
#page-colorcode .cc-preview{font-size:1.05rem}
/* B4 emoji pack: grid left, cheat sheet right */
@media(min-width:1100px){
#page-emojipack.active{display:grid;grid-template-columns:1.12fr .88fr;gap:0 1rem;align-items:start}
#page-emojipack.active>*{grid-column:1/-1}
#page-emojipack.active>.card:has(#epDrop){grid-column:1}
#page-emojipack.active>.card:has(#epCheatTable){grid-column:2;position:sticky;top:74px}
}
/* B5 music disc: 5-up grid, bigger art */
@media(min-width:900px){#mdDiscGrid{grid-template-columns:repeat(5,1fr)!important}}
#mdDiscGrid .md-disc-card img{width:60px!important;height:60px!important}
/* B6 avatar: 3-col style gallery, wider left column */
@media(min-width:1100px){
#page-avatar.active:has(.av-edit.active){grid-template-columns:440px 1fr}
#page-avatar .av-gallery{grid-template-columns:repeat(3,1fr)!important}
}
/* B7 hud: full-width action bar */
#page-hudcustom.active>div:has(#hudDownload){grid-column:1/-1;background:var(--panel);border:2px solid var(--panel-border);border-top-color:var(--panel-hi);border-left-color:var(--panel-hi);box-shadow:3px 3px 0 #000;padding:1rem;margin:1rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem}
#page-hudcustom.active>div:has(#hudDownload)>div{margin:0!important}
#hudDownload{font-size:.7rem!important;padding:12px 26px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent),#fff 14%),color-mix(in srgb,var(--accent),#000 24%));color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.55);box-shadow:0 4px 0 color-mix(in srgb,var(--accent),#000 42%)}
#hudDownload:active:not(:disabled){box-shadow:0 1px 0 color-mix(in srgb,var(--accent),#000 42%)}
/* B8 wizard tabs + direction + next */
.m-tab{padding:9px 16px}
.m-label{font-size:.68rem}
#cvDirJ2B,#cvDirB2J,#cvDirJVer{font-size:.6rem;padding:12px 18px}
.btn-row .btn-p{font-size:.62rem;padding:10px 22px}
/* B9/B11: pack-info fields side by side */
@media(min-width:900px){
#page-paintings .card:has(#ptPackName){display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
#page-paintings .card:has(#ptPackName)>.card-label{grid-column:1/-1}
#page-capebuilder .card:has(#cbPackName){display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
#page-capebuilder .card:has(#cbPackName)>.card-label{grid-column:1/-1}
#page-emojipack .card:has(#epName):not(:has(#epDrop)){display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
#page-emojipack .card:has(#epName):not(:has(#epDrop))>.card-label{grid-column:1/-1}
}
/* evenness fixes (Cooper's double-check round) */
@media(min-width:900px){#mdDiscGrid>.md-disc-card:last-child:nth-child(5n+1){grid-column:3}}
#page-emojipack .card:has(#epName):not(:has(#epDrop)) input:is([type=text],:not([type])){width:100%;box-sizing:border-box}
@media(min-width:1100px){
#page-hudcustom.active>.card:has(#hudCrosshairCanvas){grid-column:1;grid-row:span 3}
#page-hudcustom.active>.card:has(#hudHeartPicker){grid-column:2}
#page-hudcustom.active>.card:has(#hudFoodPicker){grid-column:2}
#page-hudcustom.active>.card:has(#hudXpModeSingle){grid-column:2}
}