/* The workshop can be narrower than the viewport after dragging/resizing. */
@layer pokeidle-brand {
html:root body #profession-system .profession-window{container:profession / inline-size!important}
@container profession (max-width:700px){
html:root body #profession-system .profession-window :is(.profession-choices,.profession-recipe-grid,.profession-utility-view,.profession-output-bag>div){grid-template-columns:minmax(0,1fr)!important}
html:root body #profession-system .profession-window .profession-choice{grid-template-columns:36px minmax(0,1fr)!important;gap:8px!important;padding:10px!important}
html:root body #profession-system .profession-window .profession-choice>button{grid-column:1/-1!important;width:100%!important;min-height:40px!important;font-size:12px!important}
html:root body #profession-system .profession-window .profession-choice h3{font-size:16px!important;word-break:normal!important;overflow-wrap:normal!important}
html:root body #profession-system .profession-window :is(.profession-choice small,.profession-choice em){font-size:11px!important}
html:root body #profession-system .profession-window .profession-header{display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;padding:8px!important;gap:6px!important;min-height:0!important}
html:root body #profession-system .profession-window .profession-brand>i{display:none!important}
html:root body #profession-system .profession-window .profession-brand h2{font-size:16px!important}
html:root body #profession-system .profession-window .profession-brand p{display:none!important}
html:root body #profession-system .profession-window .profession-header>aside{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:4px!important}
html:root body #profession-system .profession-window .profession-header>aside>span{min-width:0!important;padding:3px 6px!important}
html:root body #profession-system .profession-window .profession-close{grid-column:2!important;grid-row:1!important;width:40px!important;height:40px!important}
html:root body #profession-system .profession-window .profession-profile-xp{grid-column:1/-1!important;min-width:0!important;padding:5px 7px!important;gap:3px!important}
html:root body #profession-system .profession-window .profession-profile-xp>div:first-child{flex-wrap:wrap!important;gap:3px!important}
html:root body #profession-system .profession-window .profession-tabs{display:flex!important;overflow-x:auto!important;gap:3px!important;padding:5px!important;flex-shrink:0!important}
html:root body #profession-system .profession-window .profession-tabs button{flex:0 0 auto!important;min-height:38px!important;font-size:11px!important;padding:5px 9px!important}
html:root body #profession-system .profession-window .profession-body{min-height:80px!important;min-width:0!important;overflow:auto!important}
html:root body #profession-system .profession-window .profession-tools{position:static!important;grid-template-columns:minmax(0,1fr)!important;padding:6px!important;gap:6px!important}
html:root body #profession-system .profession-window .profession-tools>*{grid-column:1!important;min-width:0!important;max-width:100%!important}
html:root body #profession-system .profession-window .profession-recipe{min-width:0!important;padding:10px!important}
html:root body #profession-system .profession-window .profession-recipe>header{display:grid!important;grid-template-columns:26px minmax(0,1fr)!important;gap:6px!important}
html:root body #profession-system .profession-window .profession-recipe>header>strong{grid-column:2!important;text-align:left!important}
html:root body #profession-system .profession-window .profession-recipe-copy{min-width:0!important}
html:root body #profession-system .profession-window .profession-recipe-copy h3{font-size:16px!important;word-break:normal!important}
html:root body #profession-system .profession-window :is(.profession-recipe-copy p,.profession-recipe-copy small,.profession-craft-rewards small){font-size:11px!important;line-height:1.4!important}
html:root body #profession-system .profession-window .profession-craft-flow{grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
html:root body #profession-system .profession-window .profession-flow-arrow{transform:rotate(90deg)!important;justify-self:center!important}
html:root body #profession-system .profession-window .profession-material-list>span{min-width:0!important}
html:root body #profession-system .profession-window .profession-recipe>footer{grid-template-columns:minmax(0,1fr)!important;gap:8px!important}
html:root body #profession-system .profession-window .profession-recipe>footer>*{grid-column:1!important;min-width:0!important}
html:root body #profession-system .profession-window .profession-recipe>footer button{min-height:40px!important;font-size:12px!important;white-space:normal!important;line-height:1.4!important}
html:root body #profession-system .profession-window [data-profession-craft]{border-color:#ffd45b!important;color:#ffe99d!important;padding:9px!important}
html:root body #profession-system .profession-window .profession-craft-quantity{width:100%!important}
html:root body #profession-system .profession-window .profession-craft-quantity>span{display:grid!important;grid-template-columns:40px minmax(64px,1fr) 40px!important;width:100%!important;max-width:100%!important}
html:root body #profession-system .profession-window .profession-craft-quantity input{width:100%!important;min-width:64px!important;box-sizing:border-box!important}
html:root body #profession-system .profession-window .profession-craft-quantity button{width:40px!important;min-width:40px!important;padding:0!important}
}
/* More specific than the shared mobile auto-fit grid that caused two tiny cards. */
@media(max-width:1099px),(max-height:560px),(hover:none) and (pointer:coarse){
html:root.ui-mobile-windows body #profession-system .profession-window[data-mobile-window] :is(.profession-choices,.profession-recipe-grid){grid-template-columns:minmax(0,1fr)!important}
}
}