/* A single-screen preparation desk; long reference text opens separately. */
#dialog.game-screen[data-view=loadout]{width:min(1400px,97vw);height:min(900px,96dvh);max-height:96dvh}
#dialog[data-view=loadout] .screen-header{padding:11px 22px;min-height:70px}
#dialog[data-view=loadout] .screen-emblem{width:42px;height:42px}
#dialog[data-view=loadout] .screen-header h2{font-size:23px!important}
#dialog[data-view=loadout] .screen-path{font-size:11px;margin:0 0 2px}
#dialog[data-view=loadout] .screen-steps{padding:3px 20px;gap:12px}
#dialog[data-view=loadout] .screen-steps span{font-size:12px;padding:5px}
#dialog[data-view=loadout] .screen-body{display:flex;flex-direction:column;gap:10px;padding:12px 20px 8px;overflow:hidden;scrollbar-gutter:auto;position:relative}
#dialog[data-view=loadout] .character-pick{flex:none;flex-wrap:nowrap;margin:0;padding:5px 10px;gap:10px;background-color:#e9eddc;border-color:#bec6a5;border-radius:7px;min-height:42px}
#dialog[data-view=loadout] .character-pick small{min-width:0;font-size:12px}
#dialog[data-view=loadout] select{height:32px;min-height:0;padding:4px 8px;border-radius:5px;font-size:12px;max-width:100%}
#dialog[data-view=loadout] .character-pick select{font-size:14px;width:196px;min-width:0}
#dialog[data-view=loadout] .screen-header .character-pick{flex:1;max-width:690px;min-height:0;margin:0 16px;padding:4px 10px;background:transparent;border:0;box-shadow:none;color:#f0e9cb}
#dialog[data-view=loadout] .screen-header .character-pick label{color:#ddd6b5}
#dialog[data-view=loadout] .screen-header .character-pick small{color:#d0d9bb;font-size:11px}
#dialog[data-view=loadout] .loadout-workspace{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:18px;flex:1;min-height:0}
#dialog[data-view=loadout] .loadout-catalog{display:flex;flex-direction:column;gap:7px;min-width:0;min-height:0}
#dialog[data-view=loadout] .pvp-presets{display:flex;gap:10px;align-items:center;flex:none;border:0;border-bottom:1px solid #cab88c;border-radius:0;padding:0 0 9px;margin:0;background:none}
#dialog[data-view=loadout] .pvp-presets h3{margin:0;font-size:12px;white-space:nowrap;color:#7d6845}
#dialog[data-view=loadout] .pvp-presets .presets{flex:1;display:flex;flex-wrap:nowrap;gap:7px;margin:0}
#dialog[data-view=loadout] .pvp-presets .presets button{flex:1;min-width:0;min-height:34px;line-height:1.3;padding:7px 8px;font-size:12px;border-image:none;border:1px solid #c8b786;background:#fbf6e8;border-radius:6px;box-shadow:none}
#dialog[data-view=loadout] .pvp-presets .presets button[aria-pressed=true]{background:#46674e;color:#fff7df;border-color:#46674e}
#dialog[data-view=loadout] .loadout-card-instructions{font-size:11px;color:#8b7957;line-height:1.4}
#dialog[data-view=loadout] .loadout-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;flex:1;min-height:0}
#dialog[data-view=loadout] .loadout-groups.single-stance{grid-template-columns:minmax(0,1fr)}
#dialog[data-view=loadout] .loadout-groups>section{display:flex;flex-direction:column;min-height:0;min-width:0}
#dialog[data-view=loadout] .loadout-groups h3{margin:0 0 7px;padding:0 0 5px;font-size:16px;min-height:28px;line-height:1.35;border-bottom:1px solid #b8bf9c}
#dialog[data-view=loadout] .loadout-groups h3 small{padding:2px 8px;font-size:11px}
#dialog[data-view=loadout] .loadout-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;flex:1;min-height:0}
#dialog[data-view=loadout] .single-stance .loadout-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
#dialog[data-view=loadout] .loadout-card{position:relative;min-width:0;min-height:0;margin:0;padding:12px 10px 9px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;border:1px solid #c6b588;border-image:none;border-radius:8px;background:linear-gradient(135deg,#fff9e9,#f1e8d1)!important;box-shadow:0 2px 3px #826d3520;overflow:hidden;text-align:left}
#dialog[data-view=loadout] .loadout-card .glyph{width:34px;height:34px;min-width:34px;float:none;margin:0 0 3px;background-size:cover;position:absolute;left:11px;top:14px}
#dialog[data-view=loadout] .loadout-card strong{font-size:16px;line-height:1.4;margin:0 0 0 42px;max-width:calc(100% - 44px);color:#554c37}
#dialog[data-view=loadout] .loadout-card em{font-size:12px;line-height:1.45;margin:1px 0 6px 42px;color:#8c7951;font-style:normal}
#dialog[data-view=loadout] .loadout-card p{display:none}
#dialog[data-view=loadout] .loadout-card small{display:block;flex:none;margin:2px 0 0;font-size:10px;line-height:1.5;color:#7b765f;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dialog[data-view=loadout] .loadout-card.picked{outline:0;background:linear-gradient(135deg,#edf3e3,#e3ecd5)!important;border:2px solid #64805b;padding:11px 9px 8px;box-shadow:0 2px 4px #54774620!important}
#dialog[data-view=loadout] .loadout-card.is-inspected{box-shadow:inset 0 0 0 2px #be9a51,0 2px 4px #82794d25}
#dialog[data-view=loadout] .loadout-card .pick-check{width:16px;height:16px;font-size:10px;right:5px;top:5px;line-height:14px;border-radius:50%;text-align:center}
#dialog[data-view=loadout] .loadout-selected{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:44px;padding:7px 9px;background:#e8ead4;border:1px solid #c1c7a3;border-radius:7px;font-size:11px;color:#5f674c;flex:none}
#dialog[data-view=loadout] .loadout-selected>strong{font-size:12px;color:#405c44}
#dialog[data-view=loadout] .loadout-selected-group{display:flex;gap:5px;align-items:center}
#dialog[data-view=loadout] .loadout-selected-slot{border:1px solid #b6bf99;background:#f9f7e7;padding:4px 7px;border-radius:4px;font-size:11px;color:#415d42;min-height:27px;white-space:nowrap}
#dialog[data-view=loadout] .loadout-selected-slot.is-empty{border-style:dashed;color:#8a8066;background:transparent}
#dialog[data-view=loadout] .loadout-side{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
#dialog[data-view=loadout] .loadout-inspector{padding:12px 14px;flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid #bdb991;border-radius:8px;background:#f3f0df;overflow:auto;scrollbar-width:thin}
#dialog[data-view=loadout] .loadout-inspector-heading{display:flex;justify-content:space-between;padding-bottom:7px;border-bottom:1px solid #d1c6a3;color:#8b7850;font-size:11px}
#dialog[data-view=loadout] #loadoutInspectState{color:#55714f}
#dialog[data-view=loadout] .loadout-inspector-title{display:flex;gap:11px;align-items:center;margin:12px 0 8px}
#dialog[data-view=loadout] #loadoutInspectIcon{width:43px;height:43px;background-size:cover;background-position:center;border:1px solid #c1a866;border-radius:6px;flex:none}
#dialog[data-view=loadout] #loadoutInspectName{font-size:20px;line-height:1.4;color:#345947;margin:0}
#dialog[data-view=loadout] #loadoutInspectTag{font-size:11px;color:#8a7551}
#dialog[data-view=loadout] #loadoutInspectDesc{font-size:13px;line-height:1.75;margin:0 0 9px;color:#625e49}
#dialog[data-view=loadout] #loadoutInspectCost{font-size:11px;color:#7c765e;line-height:1.5;margin-top:auto;padding-top:6px;border-top:1px dashed #cabc97}
#dialog[data-view=loadout] .loadout-setup{padding:10px 12px;background:#e9ecdb;border:1px solid #b8c09d;border-radius:8px;flex:none}
#dialog[data-view=loadout] .loadout-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
#dialog[data-view=loadout] .loadout-section-heading h3{margin:0;font-size:15px;color:#416044}
#dialog[data-view=loadout] .loadout-text-button{padding:3px 2px;background:none;border:0;border-bottom:1px solid #ae9767;font-size:11px;line-height:1.5;color:#87713f;white-space:nowrap}
#dialog[data-view=loadout] .loadout-setting-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 9px}
#dialog[data-view=loadout] .loadout-setting-fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#657050;margin:0;min-width:0}
#dialog[data-view=loadout] .loadout-setting-fields select{width:100%;min-width:0;background:#fffaf0;color:#45563d;border:1px solid #bec3a5;font-size:12px}
#dialog[data-view=loadout] .loadout-setting-fields label[hidden]{display:none}
#dialog[data-view=loadout] .loadout-reference-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:30px}
#dialog[data-view=loadout] .loadout-controls{font-size:10px;color:#8c8166;margin:0;max-width:290px;line-height:1.5}
#dialog[data-view=loadout] .screen-utility{display:flex;flex-wrap:nowrap;gap:7px;margin:0}
#dialog[data-view=loadout] .screen-utility .secondary{padding:4px 7px!important;font-size:11px!important;min-height:28px;white-space:nowrap;border-image:none;border:1px solid #c8b991;border-radius:5px;box-shadow:none;background:#f8f2df}
#dialog[data-view=loadout] .screen-footer{padding:10px 20px;gap:12px}
#dialog[data-view=loadout] .screen-footer>p{font-size:12px;line-height:1.5}
#dialog[data-view=loadout] .screen-footer .primary,#dialog[data-view=loadout] .screen-footer .secondary{min-height:44px;padding:9px 20px;font-size:16px}
#dialog[data-view=loadout] .screen-footer .primary{min-width:190px}
#dialog[data-view=loadout] [hidden]{display:none!important}
#dialog[data-view=loadout] .loadout-reference-sheet{position:absolute;inset:7px 12px;z-index:8;display:flex;flex-direction:column;border:1px solid #ad9867;border-radius:9px;background:#faf4e4;box-shadow:0 5px 30px #4e56303a;padding:16px}
#dialog[data-view=loadout] .loadout-reference-sheet>header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #c6b58b;padding-bottom:10px;flex:none}
#dialog[data-view=loadout] .loadout-reference-sheet>header h3{margin:0;font-size:20px;color:#3e6047}
#dialog[data-view=loadout] .loadout-reference-sheet>header button{padding:8px 14px;font-size:13px;min-height:36px}
#dialog[data-view=loadout] .loadout-reference-content{overflow:auto;padding:10px 12px 5px 0;min-height:0;font-size:13px;line-height:1.75}
#dialog[data-view=loadout] .loadout-reference-content .run-settings{display:block;padding:8px 12px;margin:10px 0}
#dialog[data-view=loadout] .loadout-reference-content h3{font-size:17px;color:#486247;margin:12px 0 6px}
#dialog[data-view=loadout] .loadout-reference-content .presets{justify-content:flex-start;margin:8px 0}
#dialog[data-view=loadout] .loadout-reference-content .pvp-route-card{margin:6px 0;padding:8px 0}
#dialog[data-view=loadout] .loadout-reference-content .free-presets summary{font-size:17px;color:#486247}
@media(min-width:1001px) and (max-height:760px){
 #dialog[data-view=loadout] .screen-header{padding:7px 20px;min-height:58px}
 #dialog[data-view=loadout] .screen-emblem{width:35px;height:35px}
 #dialog[data-view=loadout] .screen-body{gap:8px;padding-top:9px}
 #dialog[data-view=loadout] .loadout-inspector{padding:9px 12px}
 #dialog[data-view=loadout] .loadout-inspector-title{margin:8px 0 6px}
 #dialog[data-view=loadout] #loadoutInspectIcon{width:34px;height:34px}
 #dialog[data-view=loadout] #loadoutInspectName{font-size:18px}
 #dialog[data-view=loadout] #loadoutInspectDesc{font-size:12px;line-height:1.65}
 #dialog[data-view=loadout] .loadout-controls{display:none}
 #dialog[data-view=loadout] .loadout-card{padding-top:9px;padding-bottom:7px}
 #dialog[data-view=loadout] .loadout-card .glyph{top:11px}
 #dialog[data-view=loadout] .loadout-card small{display:none}
}
/* Extra profession options use the full row; they must not squeeze skill costs out. */
@media(min-width:1100px) and (min-height:650px){
 #dialog[data-view=loadout] .loadout-setting-fields>.loadout-extra-setting{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
 #dialog[data-view=loadout] .loadout-inspector>*{flex-shrink:0}
}
/* Low laptop windows trade spare field spacing for a wider, complete skill explanation. */
@media(min-width:1100px) and (min-height:650px) and (max-height:699px){
 #dialog[data-view=loadout] .loadout-workspace{grid-template-columns:minmax(0,1fr) 350px}
 #dialog[data-view=loadout] .loadout-setup{padding:8px 10px}
 #dialog[data-view=loadout] .loadout-section-heading{margin-bottom:6px}
 #dialog[data-view=loadout] .loadout-section-heading h3{line-height:1.2}
 #dialog[data-view=loadout] .loadout-setting-fields{gap:6px 8px}
 #dialog[data-view=loadout] .loadout-setting-fields label{line-height:1.2;gap:3px}
 #dialog[data-view=loadout] .loadout-setting-fields select{height:28px;padding:3px 7px}
 #dialog[data-view=loadout] .loadout-reference-tools{min-height:28px}
 #dialog[data-view=loadout] .loadout-reference-tools .screen-utility{border-top:0;padding-top:0}
 #dialog[data-view=loadout] .screen-footer{padding-block:7px}
 #dialog[data-view=loadout] .loadout-card{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:5px 8px;padding:6px 8px}
 #dialog[data-view=loadout] .loadout-card.picked{padding:5px 7px}
 #dialog[data-view=loadout] .loadout-card .glyph{position:static;grid-column:1;grid-row:1;width:30px;height:30px;min-width:30px;margin:0}
 #dialog[data-view=loadout] .loadout-card strong{grid-column:2;grid-row:1;max-width:100%;margin:0;font-size:15px;line-height:1.35}
 #dialog[data-view=loadout] .loadout-card em{grid-column:1/-1;grid-row:2;margin:0;font-size:11px;line-height:1.3}
 #dialog[data-view=loadout] .loadout-inspector-heading{font-size:11px;line-height:1.25;padding-bottom:5px}
 #dialog[data-view=loadout] .loadout-inspector-title{margin:6px 0 4px}
 #dialog[data-view=loadout] #loadoutInspectTag{line-height:1.4}
 #dialog[data-view=loadout] #loadoutInspectDesc{margin-bottom:7px}
 #dialog[data-view=loadout] #loadoutInspectCost{line-height:1.4}
}
@media(max-width:1000px){
 #dialog.game-screen[data-view=loadout]{width:100%;height:100dvh;max-height:100dvh}
 #dialog[data-view=loadout] .screen-body{overflow:auto;padding:10px 12px}
 #dialog[data-view=loadout] .loadout-workspace{grid-template-columns:minmax(0,1fr) 270px;min-height:430px;gap:12px}
 #dialog[data-view=loadout] .single-stance .loadout-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 #dialog[data-view=loadout] .loadout-groups:not(.single-stance){grid-template-columns:1fr;overflow:auto}
 #dialog[data-view=loadout] .loadout-groups:not(.single-stance) .loadout-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:90px}
 #dialog[data-view=loadout] .loadout-controls{display:none}
 #dialog[data-view=loadout] .screen-utility{flex-wrap:wrap}
 #dialog[data-view=loadout] .loadout-reference-tools{align-items:flex-start}
 #dialog[data-view=loadout] .screen-header .character-pick{max-width:400px;margin:0;padding:0}
 #dialog[data-view=loadout] .screen-header .character-pick small{display:none}
}
@media(max-width:700px){
 #dialog[data-view=loadout] .screen-header{padding:8px 12px;min-height:58px}
 #dialog[data-view=loadout] .screen-header{flex-wrap:wrap;gap:6px}
 #dialog[data-view=loadout] .screen-header .character-pick{order:3;flex-basis:100%;max-width:none;padding:3px 0}
 #dialog[data-view=loadout] .screen-emblem{width:34px;height:34px}
 #dialog[data-view=loadout] .screen-steps{padding:2px 8px}
 #dialog[data-view=loadout] .character-pick{flex-wrap:wrap;gap:5px 8px}
 #dialog[data-view=loadout] .character-pick small{flex-basis:100%;font-size:11px}
 #dialog[data-view=loadout] .character-pick select{flex:1}
 #dialog[data-view=loadout] .loadout-workspace{display:flex;flex-direction:column;min-height:0;flex:none}
 #dialog[data-view=loadout] .loadout-catalog{flex:none}
 #dialog[data-view=loadout] .pvp-presets{display:block;padding-bottom:6px}
 #dialog[data-view=loadout] .pvp-presets h3{margin-bottom:5px}
 #dialog[data-view=loadout] .single-stance .loadout-cards,#dialog[data-view=loadout] .loadout-groups:not(.single-stance) .loadout-cards{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:94px;gap:6px}
 #dialog[data-view=loadout] .loadout-groups:not(.single-stance){overflow:visible;gap:10px}
 #dialog[data-view=loadout] .loadout-card{padding:9px 7px 7px!important}
 #dialog[data-view=loadout] .loadout-card .glyph{position:static;width:25px;height:25px;min-width:25px;margin:0}
 #dialog[data-view=loadout] .loadout-card strong{font-size:12px;margin:0;max-width:100%}
 #dialog[data-view=loadout] .loadout-card em{font-size:10px;margin:0}
 #dialog[data-view=loadout] .loadout-card small{display:none}
 #dialog[data-view=loadout] .loadout-side{display:grid;grid-template-columns:1fr;gap:8px}
 #dialog[data-view=loadout] .loadout-inspector{min-height:175px;overflow:visible}
 #dialog[data-view=loadout] .loadout-reference-tools{flex-direction:column;gap:7px}
 #dialog[data-view=loadout] .screen-footer{padding:8px 12px}
 #dialog[data-view=loadout] .screen-footer>p{font-size:11px;margin-bottom:5px}
 #dialog[data-view=loadout] .screen-footer .primary,#dialog[data-view=loadout] .screen-footer .secondary{min-width:0;padding:8px 15px;font-size:15px}
#dialog[data-view=loadout] .loadout-reference-sheet{position:fixed;inset:90px 8px 94px;padding:11px}
}

/* Keep the artwork beside the full text stack and centered in each card. */
#dialog[data-view=loadout] .loadout-card{--pick-icon-size:clamp(56px,4.45vw,64px);display:grid;grid-template-columns:var(--pick-icon-size) minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;align-items:center;gap:3px 10px}
#dialog[data-view=loadout] .loadout-card .glyph{position:static;grid-column:1;grid-row:1/4;align-self:center;width:var(--pick-icon-size);height:var(--pick-icon-size);min-width:0;margin:0;background-position:center;background-size:contain;background-repeat:no-repeat}
#dialog[data-view=loadout] .loadout-card strong{grid-column:2;grid-row:1;min-width:0;max-width:100%;margin:0;overflow-wrap:anywhere}
#dialog[data-view=loadout] .loadout-card em{grid-column:2;grid-row:2;min-width:0;margin:0;overflow-wrap:anywhere}
#dialog[data-view=loadout] .loadout-card small{grid-column:2;grid-row:3;min-width:0;margin:2px 0 0}
@media(max-width:1000px){
 #dialog[data-view=loadout] .loadout-card{--pick-icon-size:44px;column-gap:8px}
 #dialog[data-view=loadout] .loadout-workspace{flex:none;min-height:0;align-items:start}
 #dialog[data-view=loadout] .loadout-groups{flex:none}
 #dialog[data-view=loadout] .single-stance .loadout-cards,#dialog[data-view=loadout] .loadout-groups:not(.single-stance) .loadout-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:94px;flex:none}
}
@media(min-width:1100px) and (max-height:699px){
 #dialog[data-view=loadout] .loadout-card{--pick-icon-size:48px;column-gap:8px}
 #dialog[data-view=loadout] .loadout-card em{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){
 #dialog[data-view=loadout] .single-stance .loadout-cards,#dialog[data-view=loadout] .loadout-groups:not(.single-stance) .loadout-cards{grid-template-columns:minmax(0,1fr)}
}