/* Loadout builder and favorites. Shares the site's dark ground, lime actions and skewed card frames. */
.loadout-shared{position:relative;isolation:isolate;padding:16px 26px;margin-bottom:22px}
.loadout-shared:before,.loadout-weapon:before,.loadout-summary:before{content:'';position:absolute;inset:0 7px;z-index:-1;background:var(--surface);border:1px solid var(--line);transform:skewX(-4deg)}
.loadout-shared:before{border-color:var(--yellow)}
.loadout-shared p{margin:0 0 10px}
.loadout-shared p:last-child,.loadout-shared .detail-actions{margin:0}
.loadout-shared .detail-actions{margin-top:12px}
.loadout-head{display:flex;gap:18px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.loadout-name-field{flex:1;min-width:240px}
.loadout-name-field .field-input{font-size:20px;font-weight:800}
.loadout-head-actions{display:flex;gap:12px;flex-wrap:wrap}
.loadout-head-actions .button{font-size:19px}
.loadout-group-field{flex:0 1 210px!important}
.loadout-favorites{margin:0 0 24px}
.loadout-favorites h2{font-size:15px;letter-spacing:.09em;text-transform:uppercase;font-weight:750;margin-bottom:10px;color:#d3ddca}
.loadout-favorites ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loadout-chip{display:flex;align-items:center;gap:9px;min-height:40px;padding:4px 14px 4px 6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:4px;font-weight:750;font-size:14px}
.loadout-chip img{width:40px;height:28px;object-fit:contain}
.loadout-chip:hover,.loadout-chip:focus-visible{border-color:var(--yellow);color:var(--yellow)}
.loadout-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:38px;align-items:start}
.loadout-contents .section-heading{border-bottom:1px solid var(--line);margin-bottom:4px}
.loadout-group{margin-top:18px}
.loadout-group h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#d3ddca;font-weight:750;margin:0 0 4px}
.loadout-group h3 span{color:var(--yellow);margin-left:6px}
.loadout-group ul,.favorite-list{list-style:none;margin:0;padding:0}
.loadout-line{display:grid;grid-template-columns:minmax(0,1fr) 72px 100px 100px auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--subtle-line)}
.loadout-item,.favorite-link{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0}
.loadout-item img,.favorite-link img{width:60px;height:40px;object-fit:contain;flex-shrink:0}
.loadout-item strong,.favorite-link strong{display:block;font-weight:850;line-height:1.2;overflow-wrap:anywhere}
.loadout-item small,.favorite-link small{display:block;color:var(--muted);font-size:13px}
.loadout-qty input{width:100%;min-height:38px;padding:6px 10px}
.loadout-value{text-align:right;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}
.loadout-value small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.loadout-remove,.favorite-remove{background:none;border:0;padding:8px 4px;color:var(--muted);font-size:14px;font-weight:750;text-decoration:underline;text-underline-offset:4px}
.loadout-remove:hover,.loadout-remove:focus-visible,.favorite-remove:hover,.favorite-remove:focus-visible{color:var(--yellow)}
.loadout-contents .empty-state{margin-top:18px}
.loadout-weapons{margin-top:30px}
.loadout-weapons h2{font-size:25px}
.loadout-weapon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.loadout-weapon{position:relative;isolation:isolate;padding:16px 26px 14px}
.loadout-weapon header{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.loadout-weapon header img{width:76px;height:46px;object-fit:contain}
.loadout-weapon h3{font-size:19px;margin:0}
.loadout-weapon h3 a{text-decoration:none}
.loadout-weapon header small{color:var(--muted);font-size:13px}
.loadout-weapon dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0}
.loadout-weapon dd{font-size:20px}
.loadout-summary{position:relative;isolation:isolate;padding:22px 30px 20px;position:sticky;top:20px}
.loadout-summary dl{margin:0 0 16px}
.loadout-summary dl>div{padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid var(--subtle-line)}
.loadout-summary dd{color:var(--yellow);font-size:30px}
.loadout-summary dd small{display:block;font:600 13px/1.4 Nunito,Arial,sans-serif;color:var(--muted);margin-top:2px}
.loadout-summary .button{width:100%;font-size:18px;margin-top:10px}
.loadout-summary .content-note{margin:10px 0 0;font-size:13px}
.loadout-summary .tool-status{min-height:21px}
.loadout-summary .share-output{min-height:150px}
.loadout-saved-section{margin-top:36px;padding-top:6px}
.loadout-saved-section .section-heading{border-bottom:1px solid var(--line)}
.loadout-saved{list-style:none;margin:0;padding:0}
.loadout-saved li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--subtle-line)}
.loadout-saved strong{display:block;font-size:18px;font-weight:850}
.loadout-saved small{color:var(--muted);font-size:13px}
.loadout-saved-actions{display:flex;gap:12px;align-items:center}
.loadout-saved .loadout-saved-empty{color:var(--muted);display:block}
.loadout-saved [aria-current=true]:before{background:var(--yellow)}
.loadout-saved [aria-current=true]{color:var(--ground)}
.favorites-bar{justify-content:space-between;align-items:center}
.favorites-bar label{flex:0 1 240px}
.favorite-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--subtle-line)}
.favorite-row dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.favorite-row dd{font-size:18px}
.favorite-actions{display:flex;gap:16px;align-items:center;justify-content:end}
.favorites-app .tool-status{min-height:21px}
@media(max-width:1280px){
.loadout-layout{grid-template-columns:minmax(0,1fr) 300px;gap:30px}
.loadout-line{grid-template-columns:minmax(0,1fr) 64px 92px 92px auto}
.loadout-summary{padding-inline:26px}
}
@media(max-width:1000px){
.loadout-layout{grid-template-columns:1fr}
.loadout-summary{position:relative;top:auto}
}
@media(max-width:700px){
.loadout-line{grid-template-columns:minmax(0,1fr) 76px;grid-template-areas:"item qty" "base sell" "remove remove";row-gap:6px}
.loadout-line .loadout-item{grid-area:item}
.loadout-line .loadout-qty{grid-area:qty}
.loadout-line .loadout-value:nth-of-type(1){grid-area:base;text-align:left}
.loadout-line .loadout-value:nth-of-type(2){grid-area:sell}
.loadout-line .loadout-remove{grid-area:remove;justify-self:start;padding-top:0}
.favorite-row{grid-template-columns:1fr;gap:10px}
.favorite-actions{justify-content:space-between}
}
@media(max-width:590px){
.loadout-head-actions{width:100%}
.loadout-head-actions .button{flex:1;font-size:17px;padding-inline:14px}
.loadout-group-field{flex-basis:100%!important}
.loadout-summary{padding:18px 22px}
.loadout-summary dd{font-size:26px}
.loadout-saved li{flex-wrap:wrap}
.favorites-bar label{flex-basis:100%}
.favorite-row dl{grid-template-columns:repeat(3,minmax(0,1fr))}
.favorite-row dd{font-size:16px}
}
/* The totals panel is tall, so a shallower slant keeps its frame inside the page gutter. */
.loadout-summary:before{transform:skewX(-2deg)}
.loadout-hint{font-size:14px;color:var(--yellow);margin:-14px 0 16px;min-height:0}
.loadout-hint:empty{margin:0}
.loadout-item-picker{position:relative;display:block}
.loadout-item-picker select{width:100%}
.loadout-item-picker.has-image select{padding-left:66px}
.loadout-item-picker img{position:absolute;left:9px;top:50%;width:48px;height:32px;object-fit:contain;transform:translateY(-50%);pointer-events:none;filter:brightness(1.12)}
.tool-form .loadout-item-field{flex:2 1 300px}
.loadout-item-picker select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:590px){.tool-form .loadout-item-field{flex-basis:100%}}
#loadout-add .field{min-width:150px}
#loadout-add .loadout-group-field{flex:0 1 170px!important}
#loadout-add .loadout-item-field{flex:2 1 260px}
@media(max-width:590px){#loadout-add .field{min-width:0}#loadout-add .loadout-group-field,#loadout-add .loadout-item-field{flex-basis:100%!important}}
/* Steam sign-in: the sync bar on favorites and loadouts, and the account page. */
.account-bar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:12px 0 14px;margin-bottom:20px;border-bottom:1px solid var(--subtle-line)}
.account-bar p{margin:0;font-size:15px;color:#d3ddca;flex:1;min-width:240px;display:flex;align-items:center;gap:10px}
.account-bar p[hidden],.account-bar a[hidden]{display:none}
.account-bar img{width:32px;height:32px;border-radius:4px;flex-shrink:0}
.account-bar strong{color:var(--ink)}
.account-panel{position:relative;isolation:isolate;padding:24px 32px;margin:0 0 28px;max-width:760px}
.account-panel:before{content:'';position:absolute;inset:0 8px;z-index:-1;background:var(--surface);border:1px solid var(--line);transform:skewX(-2deg)}
.account-panel h2{font-size:26px;margin-bottom:10px}
.account-panel>p{max-width:62ch;color:#d3ddca}
.account-panel .content-note{margin:16px 0 0}
.account-identity{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.account-identity img{width:64px;height:64px;border-radius:6px}
.account-identity h2{margin:0 0 2px}
.account-identity p{margin:0 0 4px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.account-counts{display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:12px;margin:0 0 6px}
.account-counts dd{color:var(--yellow)}
.account-section{margin-top:24px;padding-top:18px;border-top:1px solid var(--subtle-line)}
.account-section h3{font-size:18px;margin-bottom:6px}
.account-section p{font-size:14px;color:var(--muted);max-width:62ch}
.account-facts{margin-top:10px}
.account-facts h2{font-size:24px}
.account-facts ul{padding-left:20px;margin:0 0 14px}
.account-facts li{margin-bottom:6px}
.account-app>.tool-status:empty{margin:0}
@media(max-width:590px){
.account-panel{padding:20px 22px}
.account-bar .button{width:100%}
}
.account-bar p[data-account-out]{display:block}
.account-bar p[data-account-out][hidden]{display:none}
/* On-page confirmation (src/inline-confirm.mjs). The site never opens browser dialogs. */
.inline-confirm{position:relative;isolation:isolate;flex-basis:100%;margin:6px 0 4px;padding:14px 22px 16px}
.inline-confirm:before{content:'';position:absolute;inset:0 6px;z-index:-1;background:var(--surface);border:1px solid var(--yellow);transform:skewX(-2deg)}
.inline-confirm p{margin:0 0 12px;font-size:15px;color:var(--ink);max-width:62ch}
.inline-confirm-actions{display:flex;flex-wrap:wrap;gap:10px}