/* The gear sheet (web/gear-sheet.js): Armory Gear tab, main-menu panel and drop card share these. */
/* `:not(#gear-sheet-id)` adds ID weight so slot buttons beat lobby.css's `body button:not(...)` atlas rule
   and the old `.gear-slot` card rules without !important. */
.gear-sheet{--gear-gold:#e0bc62;--gear-text:#d1be94;--gear-muted:#a99a77;--gear-line:#594529;--gear-panel:rgba(10,8,5,.94);color:var(--gear-text)}
.gear-sheet .quality-1{--item-color:#ffffff}.gear-sheet .quality-2{--item-color:#1eff00}.gear-sheet .quality-3{--item-color:#0070dd}.gear-sheet .quality-4{--item-color:#a335ee}.gear-sheet .quality-5{--item-color:#ff8000}
.gear-header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.gear-score{font:22px Morpheus,Friz,Georgia,serif;color:var(--gear-gold)}
.gear-status{margin:0;color:#c9b27a;font-size:12px}
.gear-doll{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;grid-template-rows:auto auto;gap:10px 14px;align-items:start}
.gear-doll-left,.gear-doll-right{display:grid;gap:8px}
.gear-doll-gap{background:none;min-height:220px}
.gear-doll-weapon{grid-column:1/-1;display:flex;justify-content:center}
.gear-sheet button.gear-slot:not(#gear-sheet-id){position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:auto;min-height:0;padding:3px;border:0;border-radius:4px;background:rgba(10,8,5,.82);box-shadow:none;color:var(--gear-gold);white-space:nowrap;grid-template-columns:none}
.gear-sheet button.gear-slot:not(#gear-sheet-id):hover:enabled{background:#2c1d0d}
.gear-sheet button.gear-slot[aria-pressed=true]:not(#gear-sheet-id){background:#30200c;box-shadow:0 0 0 1px #e2b758,0 0 10px #c69a3f55}
.gear-slot-icon{display:block;width:46px;height:46px;border:2px solid var(--item-color,#584728);border-radius:4px;background:#100a04;box-shadow:0 0 0 1px #000,inset 0 0 5px #000}
.gear-slot.empty .gear-slot-icon{filter:grayscale(1);opacity:.6;border-color:#4d4131}
.gear-stars{font-size:9px;letter-spacing:1px;color:#f0c94f;line-height:1}
.gear-new{position:absolute;top:-5px;right:-7px;padding:0 4px;border-radius:3px;background:#b51b0e;color:#fff3c4;font:8px/14px Friz,Georgia,serif;box-shadow:0 0 0 1px #000}
.gear-totals{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin:12px 0;padding:8px 10px;border:1px solid var(--gear-line);border-radius:5px;background:var(--gear-panel);font-size:12px}
.gear-total{color:#f0d275}
.gear-set-bonus{display:flex;flex-wrap:wrap;gap:4px 10px;flex-basis:100%;font-size:11px}
.gear-set-bonus strong{font-weight:normal;color:var(--gear-gold)}.gear-set-active{color:#1eff00}.gear-set-next{color:var(--gear-muted)}
.gear-list{display:grid;gap:7px;margin-top:10px}
.gear-list-header{margin:0 0 3px;font:18px Morpheus,Friz,Georgia,serif;color:var(--gear-gold)}
.gear-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border:1px solid var(--gear-line);border-radius:5px;background:#100e0a}
.gear-row.worn{border-color:#8a6c33;background:linear-gradient(#24190c,#100b05)}
.gear-row.legacy{grid-template-columns:minmax(0,1fr) auto;color:var(--gear-muted);font-size:12px}
.gear-row.unowned{opacity:.55}.gear-row.unowned .gear-row-icon{filter:grayscale(1)}
.gear-row-icon{width:42px;height:42px;border:2px solid var(--item-color,#584728);border-radius:4px;background:#100a04}
.gear-row-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.gear-row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.gear-name{font-weight:normal;color:var(--item-color,#e2dccb)}
.gear-ilvl{color:#f0d275;font-size:11px}.gear-acquisition{color:#a9a08a;font-size:11px;white-space:nowrap}.gear-row-stars{color:#f0c94f;font-size:11px;letter-spacing:1px}
.gear-row .gear-new{position:static}
.gear-effect{font-size:12px;color:#c9b88f}.gear-set{font-size:11px;color:var(--gear-gold)}
.gear-source,.gear-no-visual{font-size:11px;color:var(--gear-muted)}.gear-no-visual{font-style:italic}
.gear-deltas{display:flex;flex-direction:column;gap:1px;margin-top:3px;font-size:12px}
.delta.better{color:#1eff00}.delta.worse{color:#ff2020}
.gear-row-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:260px}
.gear-row-actions small{font-size:10px;color:#b09a6c;text-align:right}
.gear-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;padding-top:10px;border-top:1px solid #60502b55}
.gear-footer .muted{font-size:11px;color:var(--gear-muted)}
/* Bag count, salvage and the smart-roll switches (world gear). */
.gear-bag{padding:2px 10px;border:1px solid var(--gear-line);border-radius:4px;background:rgba(10,8,5,.9);color:#f0d275;font-size:12px;cursor:help}
.gear-bag.warn{border-color:#ff7a5c;color:#ff7a5c;background:rgba(60,18,10,.9)}
.gear-salvage,.gear-salvage-all{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gear-salvage-all{margin:0 0 8px}
.gear-salvage-ask{font-size:11px;color:#f0d275}
.gear-loot-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;flex:1 1 auto}
.gear-loot-prefs-title{font-weight:normal;font-size:12px;color:var(--gear-gold)}
.gear-pref{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gear-text);cursor:pointer}
.result-item-outcome{font-size:11px;color:#f0d275}
.gear-menu .gear-score{font-size:18px;text-align:center;margin-bottom:6px}
.gear-menu .gear-doll-gap{min-height:180px}
.gear-menu .gear-slot-icon{width:36px;height:36px}
.gear-menu .gear-totals{justify-content:center;margin:8px 0;padding:6px 8px;font-size:11px}
.gear-menu .gear-status{text-align:center;font-size:11px}
.gear-currencies{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.gear-currency{padding:3px 10px;border:1px solid var(--gear-line,#594529);border-radius:4px;background:rgba(10,8,5,.9);color:#f0d275;font-size:12px;cursor:help}
.gear-currency.relics{color:#7fc4ff}
/* Keystone currencies carry their spell icon (Keystone Runes, Titan Residuum). */
.gear-currency:has(.gear-currency-icon){display:inline-flex;align-items:center;gap:6px;padding-left:4px}
.gear-currency-icon{display:block;width:18px;height:18px;border:1px solid #6b5530;border-radius:3px;background:#100a04;box-shadow:0 0 0 1px #000}
.gear-currency.runes{color:#9fd8ff}.gear-currency.residuum{color:#e8d8ff}
/* "K7": a piece's keystone level, a small gold pill after its item level. */
.ilvl-keystone{display:inline-block;padding:0 5px;border:1px solid #a8822f;border-radius:8px;background:linear-gradient(#5a3f10,#2e1f06);color:#ffd96a;font:bold 10px/14px Friz,Georgia,serif;letter-spacing:.5px;vertical-align:1px;box-shadow:0 0 0 1px #000,0 0 6px #e0bc6244}
/* Suffix reroll: a button that asks Yes/No in place, as Salvage does. */
.gear-reroll{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gear-reroll-ask{font-size:11px;color:#f0d275;max-width:240px;text-align:right}
.gear-reroll button:not(#gear-sheet-id){min-height:0;height:auto;padding:4px 12px;font-size:11px}
.gear-reroll .gear-reroll-btn:not(#gear-sheet-id){color:#9fd8ff}
.gear-reroll button:disabled:not(#gear-sheet-id){opacity:.5;filter:grayscale(.7);cursor:not-allowed}
.gear-row-actions .gear-upgrade{white-space:normal;text-align:right;max-width:260px}
.gear-row-actions .gear-short{color:#ff7a5c}
.gear-empty-note{margin:0;padding:8px;border:1px dashed var(--gear-line);border-radius:5px;color:var(--gear-muted);font-size:12px}
@media(max-width:520px){
 .gear-doll{grid-template-columns:1fr 1fr;gap:8px}
 .gear-doll-gap{display:none}
 .gear-doll-left,.gear-doll-right{justify-items:center}
 .gear-slot-icon,.gear-menu .gear-slot-icon{width:38px;height:38px}
 .gear-row{grid-template-columns:34px minmax(0,1fr);gap:8px}
 .gear-row-icon{width:34px;height:34px}
 .gear-row>button,.gear-row-actions{grid-column:1/-1;justify-self:stretch;align-items:stretch;max-width:none}
 .gear-row-actions small{text-align:left}
 .gear-footer{flex-direction:column;align-items:stretch}
 .gear-salvage,.gear-salvage-all,.gear-reroll{justify-content:flex-start}
 .gear-reroll-ask{text-align:left}
}

/* Labeled doll (the sheet dialog): name and numbers beside each icon; the menu panel keeps icons only. */
.gear-doll-labeled .gear-doll-left,.gear-doll-labeled .gear-doll-right{justify-items:stretch}
.gear-doll-labeled .gear-slot{display:flex;align-items:center;gap:10px;width:100%;min-width:0;text-align:left;padding:4px 8px 4px 4px}
.gear-doll-labeled .gear-doll-right .gear-slot{flex-direction:row-reverse;text-align:right}
.gear-doll-labeled .gear-slot .gear-stars{position:static;display:none}
.gear-slot-label{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.25}
.gear-slot-label strong{font:15px Friz,Georgia,serif;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gear-slot-label .gear-slot-empty{color:#8f7d55;font-style:italic}
.gear-slot-label small{font-size:12px;color:#d6c59a}.gear-slot-label .gear-slot-effect{color:#b09a6c;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gear-doll-labeled .gear-doll-weapon .gear-slot{width:auto;min-width:320px;margin:0 auto}
/* Rows: larger text, and an Upgrade button that wraps instead of overflowing. */
.gear-page .gear-effect{font-size:13px}.gear-page .gear-ilvl,.gear-page .gear-row-stars,.gear-page .gear-set{font-size:12px}
/* Upgrade: a two-line WoW button (label, then cost); the gain and any shortfall sit muted underneath.
   The id-weighted selector beats lobby.css's global button min-height:35px and inline-flex. */
.gear-row-actions{max-width:240px}
.gear-row-actions .gear-upgrade:not(#gear-sheet-id){display:flex;flex-direction:column;align-items:center;gap:2px;min-height:0;height:auto;max-width:240px;padding:7px 14px;white-space:normal;line-height:1.2;font-size:12px;text-align:center}
.gear-row-actions .gear-upgrade small{font-size:11px;color:#f0d275}
.gear-row-actions .gear-upgrade:disabled small{color:#9c8c66}
.gear-row-actions .gear-gain{color:var(--gear-muted)}
.gear-row-actions .gear-unequip:not(#gear-sheet-id){min-height:0;height:auto;padding:4px 12px;font-size:11px}
/* The slot panel (dialog doll): floats beside its slot, over the hero gap, in the tooltip frame. */
.gear-doll-labeled .gear-doll-left,.gear-doll-labeled .gear-doll-right,.gear-doll-labeled .gear-doll-weapon{position:relative}
.gear-pop{position:absolute;z-index:30;top:0;width:320px;max-height:420px;overflow:auto;display:grid;gap:6px;padding:9px 10px;border:2px solid #8c8c8c;border-radius:6px;background:linear-gradient(rgba(16,14,30,.97),rgba(6,6,14,.97));box-shadow:0 0 0 1px #000,0 6px 18px #000c;color:var(--gear-text);text-align:left;white-space:normal}
.gear-pop-left{left:calc(100% + 8px)}.gear-pop-right{right:calc(100% + 8px)}
.gear-pop-weapon{top:auto;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}
.gear-pop-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding-bottom:4px;border-bottom:1px solid #ffffff22}
.gear-pop-head strong{font:16px Friz,Georgia,serif;font-weight:normal;color:#fff}.gear-pop-rank{color:#f0c94f;font-size:11px;letter-spacing:1px}
.gear-pop-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center}
.gear-pop-row.worn{padding:4px;border:1px solid #8a6c3366;border-radius:4px;background:#24190c88}
.gear-pop-row.unowned{opacity:.55}.gear-pop-row.unowned .gear-pop-icon{filter:grayscale(1)}
.gear-pop-icon{width:30px;height:30px;border:2px solid var(--item-color,#584728);border-radius:3px;background:#100a04}
.gear-pop-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.gear-pop-info .gear-name{font:13px Friz,Georgia,serif}
.gear-pop-meta{font-size:11px;color:#f0d275}.gear-pop-effect{font-size:11px;color:#c9b88f}
.gear-pop-row .gear-source{font-size:10px}
.gear-pop button:not(#gear-sheet-id){min-height:0;height:auto;padding:3px 10px;font-size:11px}
.gear-pop-note{margin:0;font-size:12px;color:var(--gear-muted);font-style:italic}
.gear-pop-hint{font-size:10px;color:var(--gear-muted);text-align:center}
@media(max-width:760px){.gear-pop,.gear-pop-left,.gear-pop-right,.gear-pop-weapon{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:60vh;transform:none}}

/* The Armory Gear tab: flat slot cards in two columns around the stat panel and the weapon (the compact
   paperdoll block at the end of this file), then the selected slot's section as the bottom panel. `--g` scales
   cards and type to the viewport height so the sheet fits without any scrollbar; the bottom panel
   (.gear-list) is the one region that scrolls, on its own. `--gw` widens the dialog on big monitors. */
#armoryDialog[data-tab=gear]{--g:.7;--gw:1;width:min(calc(100vw - 32px),max(760px,calc(var(--gw)*950px)))}
#armoryDialog[data-tab=gear][open]{display:flex;flex-direction:column;height:calc(100dvh - 24px);max-height:none;overflow:hidden}
@media(min-width:1500px){#armoryDialog[data-tab=gear]{--gw:1.2}}
@media(min-width:1900px){#armoryDialog[data-tab=gear]{--gw:1.4}}
@media(min-height:640px){#armoryDialog[data-tab=gear]{--g:.74}}
@media(min-height:710px){#armoryDialog[data-tab=gear]{--g:.8}}
@media(min-height:780px){#armoryDialog[data-tab=gear]{--g:.86}}
@media(min-height:960px){#armoryDialog[data-tab=gear]{--g:1}}
@media(min-height:1100px){#armoryDialog[data-tab=gear]{--g:1.08}}
@media(min-height:1290px){#armoryDialog[data-tab=gear]{--g:1.18}}
@media(min-height:1400px){#armoryDialog[data-tab=gear]{--g:1.26}}
/* Short screens: below 900 px the banner gives way to the currency strip, and below 710 px each card drops
   its item level and stat line (both stay in the tooltips and the slot panel). */
@media(max-height:899px){#armoryDialog[data-tab=gear] .armory-banner{display:none}}
@media(max-height:709px){#armoryDialog[data-tab=gear] .gear-slot-label small,#armoryDialog[data-tab=gear] .gear-slot-label .gear-slot-effect{display:none}}
#armoryDialog[data-tab=gear]>*{flex:none}
#armoryDialog[data-tab=gear] .window-title{min-height:calc(42px*var(--g));padding:calc(6px*var(--g)) 35px;font-size:calc(24px*var(--g))}
#armoryDialog[data-tab=gear] .realm-tabs{padding-top:calc(7px*var(--g));padding-bottom:0}
#armoryDialog[data-tab=gear] .realm-tabs .realm-tab{min-height:calc(31px*var(--g));padding:calc(5px*var(--g)) calc(11px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .armory-banner{padding:calc(20px*var(--g)) calc(25px*var(--g)) calc(16px*var(--g))}
#armoryDialog[data-tab=gear] .armory-banner h2{font-size:calc(31px*var(--g));margin:0 0 calc(3px*var(--g))}
#armoryDialog[data-tab=gear] .armory-banner p,#armoryDialog[data-tab=gear] #armoryHint{font-size:calc(13px*var(--g))}
#armoryDialog[data-tab=gear] .currencies{gap:calc(25px*var(--g))}
#armoryDialog[data-tab=gear] .currency strong{font-size:calc(18px*var(--g))}
#armoryDialog[data-tab=gear] .currency span{font-size:calc(10px*var(--g))}
#armoryDialog[data-tab=gear] #gearPage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:calc(20px*var(--g)) calc(24px*var(--g))}
#armoryDialog[data-tab=gear] #gearSheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#armoryDialog[data-tab=gear] .gear-page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#armoryDialog[data-tab=gear] .gear-page>*{flex:none}
/* The bottom panel: the selected slot's section, the only scroller on the tab. */
#armoryDialog[data-tab=gear] .gear-page>.gear-list{flex:1 1 auto;min-height:calc(100px*var(--g));overflow:auto;overscroll-behavior:contain;margin-top:calc(10px*var(--g));align-content:start;padding-right:calc(4px*var(--g));gap:calc(7px*var(--g))}
#armoryDialog[data-tab=gear] .window-footer{min-height:0;padding:calc(13px*var(--g)) 22px}
#armoryDialog[data-tab=gear] .gear-currencies{margin-bottom:calc(10px*var(--g))}
#armoryDialog[data-tab=gear] .gear-currency{padding:calc(3px*var(--g)) calc(10px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-header{gap:calc(6px*var(--g)) calc(14px*var(--g));margin-bottom:calc(10px*var(--g))}
#armoryDialog[data-tab=gear] .gear-score{font-size:calc(22px*var(--g))}
#armoryDialog[data-tab=gear] .gear-status{font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-bag{padding:calc(2px*var(--g)) calc(10px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-doll{gap:calc(10px*var(--g)) calc(14px*var(--g))}
#armoryDialog[data-tab=gear] .gear-doll-left,#armoryDialog[data-tab=gear] .gear-doll-right{gap:calc(8px*var(--g))}
#armoryDialog[data-tab=gear] .gear-doll-gap{min-height:0}
#armoryDialog[data-tab=gear] .gear-sheet button.gear-slot:not(#gear-sheet-id){padding:calc(3px*var(--g));gap:calc(2px*var(--g))}
#armoryDialog[data-tab=gear] .gear-slot-icon{width:calc(46px*var(--g));height:calc(46px*var(--g))}
#armoryDialog[data-tab=gear] .gear-slot-label strong{font-size:calc(15px*var(--g))}
#armoryDialog[data-tab=gear] .gear-slot-label small{font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-slot-label .gear-slot-effect{font-size:calc(11px*var(--g))}
#armoryDialog[data-tab=gear] .gear-doll-labeled .gear-doll-weapon .gear-slot{min-width:calc(320px*var(--g))}
#armoryDialog[data-tab=gear] .gear-totals{gap:calc(6px*var(--g)) calc(16px*var(--g));margin:calc(12px*var(--g)) 0 0;padding:calc(8px*var(--g)) calc(10px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-set-bonus{font-size:calc(11px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list-header{font-size:calc(18px*var(--g))}
#armoryDialog[data-tab=gear] .gear-row{grid-template-columns:calc(42px*var(--g)) minmax(0,1fr) auto;gap:calc(10px*var(--g));padding:calc(8px*var(--g))}
#armoryDialog[data-tab=gear] .gear-row-icon{width:calc(42px*var(--g));height:calc(42px*var(--g))}
#armoryDialog[data-tab=gear] .gear-page .gear-name,#armoryDialog[data-tab=gear] .gear-page .gear-effect,#armoryDialog[data-tab=gear] .gear-page .gear-deltas{font-size:calc(13px*var(--g))}
#armoryDialog[data-tab=gear] .gear-page .gear-ilvl,#armoryDialog[data-tab=gear] .gear-page .gear-row-stars,#armoryDialog[data-tab=gear] .gear-page .gear-set,#armoryDialog[data-tab=gear] .gear-source{font-size:calc(11px*var(--g))}
#armoryDialog[data-tab=gear] .gear-row-actions .gear-upgrade:not(#gear-sheet-id),#armoryDialog[data-tab=gear] .gear-row-actions .gear-unequip:not(#gear-sheet-id),#armoryDialog[data-tab=gear] .gear-row-actions .gear-equip:not(#gear-sheet-id){padding:calc(4px*var(--g)) calc(12px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-footer{gap:calc(6px*var(--g)) 12px;margin-top:calc(10px*var(--g));padding-top:calc(8px*var(--g))}
#armoryDialog[data-tab=gear] .gear-loot-prefs{gap:calc(4px*var(--g)) calc(18px*var(--g))}
#armoryDialog[data-tab=gear] .gear-loot-prefs-title{font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-pref{margin-top:0;white-space:nowrap;font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-pref-input{width:16px;height:16px;margin:0;padding:0;flex:none}
#armoryDialog[data-tab=gear] .gear-footer .muted,#armoryDialog[data-tab=gear] .window-footer .muted{font-size:calc(11px*var(--g))}
#armoryDialog[data-tab=gear] .gear-footer .small-button,#armoryDialog[data-tab=gear] .window-footer button{min-height:0;padding:calc(3px*var(--g)) calc(14px*var(--g));font-size:calc(12px*var(--g))}

/* The bottom panel as a compact grid: the header bar (rank title and Salvage-all-green), the worn piece as one wide
   compact card with its inline buttons, then the bag pieces as small cards, as many per row as fit (min 240 px).
   Costs, the "Need N more" explanation, where a piece drops and its set are tooltips, not text. */
#armoryDialog[data-tab=gear] .gear-page>.gear-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(240px*var(--g)),1fr));gap:calc(8px*var(--g));align-content:start}
#armoryDialog[data-tab=gear] .gear-list>*{min-width:0}
#armoryDialog[data-tab=gear] .gear-list-bar{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:calc(6px*var(--g)) calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list-bar .gear-list-header{margin:0}
#armoryDialog[data-tab=gear] .gear-list-bar .gear-salvage-all{margin:0 0 0 auto}
#armoryDialog[data-tab=gear] .gear-list>.gear-row.worn,#armoryDialog[data-tab=gear] .gear-list>.gear-empty-note{grid-column:1/-1}
#armoryDialog[data-tab=gear] .gear-list .gear-row{grid-template-columns:calc(40px*var(--g)) minmax(0,1fr);align-items:start;gap:calc(2px*var(--g)) calc(8px*var(--g));padding:calc(6px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-row-icon{grid-row:1/3;width:calc(40px*var(--g));height:calc(40px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-row-info{gap:calc(1px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-row-head{flex-wrap:nowrap;gap:calc(2px*var(--g)) calc(8px*var(--g));align-items:baseline;min-width:0}
#armoryDialog[data-tab=gear] .gear-list .gear-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#armoryDialog[data-tab=gear] .gear-list .gear-effect{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#armoryDialog[data-tab=gear] .gear-list .gear-source,#armoryDialog[data-tab=gear] .gear-list .gear-set,#armoryDialog[data-tab=gear] .gear-list .gear-no-visual{display:none}
/* The comparison against the worn piece: short coloured tags on one line. */
#armoryDialog[data-tab=gear] .gear-list .gear-deltas{flex-direction:row;flex-wrap:wrap;gap:calc(3px*var(--g)) calc(6px*var(--g));margin-top:calc(2px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-deltas .delta{padding:0 calc(5px*var(--g));border-radius:3px;background:#0006;font-size:calc(11px*var(--g));white-space:nowrap}
/* Buttons sit inline under the info (bag cards) or beside it (the worn card). */
#armoryDialog[data-tab=gear] .gear-list .gear-row>button,#armoryDialog[data-tab=gear] .gear-list .gear-row-actions{grid-column:2;justify-self:start;max-width:none}
#armoryDialog[data-tab=gear] .gear-list .gear-row-actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:calc(4px*var(--g)) calc(6px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-row-actions .gear-upgrade:not(#gear-sheet-id){display:inline-flex;flex-direction:row;max-width:none;white-space:nowrap}
#armoryDialog[data-tab=gear] .gear-list .gear-row-actions .gear-gain{padding:0 calc(5px*var(--g));border-radius:3px;background:#0006;color:#1eff00;font-size:calc(11px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list>.gear-row.worn{grid-template-columns:calc(40px*var(--g)) minmax(0,1fr) auto;align-items:center}
#armoryDialog[data-tab=gear] .gear-list>.gear-row.worn .gear-row-icon{grid-row:auto}
#armoryDialog[data-tab=gear] .gear-list>.gear-row.worn .gear-row-actions{grid-column:3;justify-self:end;justify-content:flex-end}
@media(max-width:520px){#armoryDialog[data-tab=gear] .gear-list>.gear-row.worn{grid-template-columns:calc(40px*var(--g)) minmax(0,1fr)}#armoryDialog[data-tab=gear] .gear-list>.gear-row.worn .gear-row-actions{grid-column:1/-1;justify-self:start}}

/* Compact paperdoll (2026-10-20, owner: the first row of bag cards must show without scrolling).
   Slot cards lie flat, icon beside the text and mirrored on the right; the stat panel and the weapon
   share the centre column between the two slot columns. `.gear-doll` is `display:contents`, so its
   columns join the page grid beside the stat panel without changing the DOM order. The banner shows
   the currencies, so the strip under the tabs only returns where the banner is hidden (short screens). */
#armoryDialog[data-tab=gear] #gearSheet{container-type:inline-size}
#armoryDialog[data-tab=gear] .gear-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:calc(16px*var(--g));align-content:stretch}
#armoryDialog[data-tab=gear] .gear-page>.gear-header{grid-column:1/-1;grid-row:1}
#armoryDialog[data-tab=gear] .gear-page>.gear-doll{display:contents}
#armoryDialog[data-tab=gear] .gear-doll-gap{display:none}
#armoryDialog[data-tab=gear] .gear-doll-left{grid-column:1;grid-row:2/4;align-content:start}
#armoryDialog[data-tab=gear] .gear-doll-right{grid-column:3;grid-row:2/4;align-content:start}
#armoryDialog[data-tab=gear] .gear-page>.gear-totals{grid-column:2;grid-row:2;align-self:start;margin:0}
#armoryDialog[data-tab=gear] .gear-doll-weapon{grid-column:2;grid-row:3;align-self:end;padding-top:calc(8px*var(--g))}
#armoryDialog[data-tab=gear] .gear-page>.gear-list{grid-column:1/-1;grid-row:4}
#armoryDialog[data-tab=gear] .gear-page>.gear-footer{grid-column:1/-1;grid-row:5}
@media(min-height:900px){#armoryDialog[data-tab=gear] #gearCurrencies{display:none}}
#armoryDialog[data-tab=gear] .gear-header{align-items:center;flex-wrap:nowrap}
#armoryDialog[data-tab=gear] .gear-header .gear-status{margin-left:auto;text-align:right;min-width:0}
/* Flat slot cards: a framed icon, then name, item level and the stat line. */
#armoryDialog[data-tab=gear] .gear-doll-labeled button.gear-slot:not(#gear-sheet-id){flex-direction:row;align-items:center;gap:calc(10px*var(--g));width:100%;padding:calc(5px*var(--g)) calc(10px*var(--g)) calc(5px*var(--g)) calc(5px*var(--g));border:1px solid #3b2d17;background:linear-gradient(90deg,#1c140acc,#0d0a06cc);text-align:left;white-space:normal}
#armoryDialog[data-tab=gear] .gear-doll-right button.gear-slot:not(#gear-sheet-id){flex-direction:row-reverse;padding:calc(5px*var(--g)) calc(5px*var(--g)) calc(5px*var(--g)) calc(10px*var(--g));background:linear-gradient(270deg,#1c140acc,#0d0a06cc);text-align:right}
#armoryDialog[data-tab=gear] .gear-doll-labeled button.gear-slot:not(#gear-sheet-id):hover:enabled{background:#2c1d0d;border-color:#6b5228}
#armoryDialog[data-tab=gear] .gear-doll-labeled button.gear-slot[aria-pressed=true]:not(#gear-sheet-id){background:linear-gradient(90deg,#3a270e,#1d1408);border-color:#e2b758;box-shadow:0 0 0 1px #000,0 2px 12px #c69a3f44}
#armoryDialog[data-tab=gear] .gear-doll-right button.gear-slot[aria-pressed=true]:not(#gear-sheet-id){background:linear-gradient(270deg,#3a270e,#1d1408)}
#armoryDialog[data-tab=gear] .gear-slot-icon{flex:none}
#armoryDialog[data-tab=gear] .gear-slot-label{flex:1 1 auto;min-width:0}
#armoryDialog[data-tab=gear] .gear-slot-label>*{max-width:100%}
#armoryDialog[data-tab=gear] .gear-doll-right .gear-slot-label{align-items:flex-end}
#armoryDialog[data-tab=gear] .gear-doll-labeled .gear-doll-weapon .gear-slot:not(#gear-sheet-id){width:auto;max-width:100%;margin:0 auto}
#armoryDialog[data-tab=gear] .gear-page>.gear-totals{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:calc(6px*var(--g)) calc(12px*var(--g));padding:calc(8px*var(--g)) calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-totals .gear-total{white-space:nowrap}
#armoryDialog[data-tab=gear] .gear-totals .gear-set-bonus{grid-column:1/-1;padding-top:calc(5px*var(--g));border-top:1px solid #3b2d17}
/* The slot panel: its header bar stays put while the cards scroll; bag cards are wide enough for a full
   name, the item level never wraps, the slot's stars (the same on every card) only show on the worn card,
   the comparison is short tags and Equip, Salvage and Reroll sit on one line. */
#armoryDialog[data-tab=gear] .gear-page>.gear-list{grid-template-columns:repeat(auto-fill,minmax(max(250px,calc(300px*var(--g))),1fr));padding-top:0}
#armoryDialog[data-tab=gear] .gear-list-bar{position:sticky;top:0;z-index:2;padding:calc(6px*var(--g)) 0;background:linear-gradient(#1a1209,#1a1209f2 80%,#1a120900)}
#armoryDialog[data-tab=gear] .gear-list-slot{font:calc(20px*var(--g)) Morpheus,Friz,Georgia,serif;color:var(--gear-gold)}
#armoryDialog[data-tab=gear] .gear-list-bar .gear-list-header{font:calc(13px*var(--g)) Friz,Georgia,serif;color:var(--gear-muted)}
#armoryDialog[data-tab=gear] .gear-list .gear-row:not(.worn) .gear-row-stars{display:none}
#armoryDialog[data-tab=gear] .gear-list .gear-row-head .gear-ilvl,#armoryDialog[data-tab=gear] .gear-list .gear-row-head .gear-acquisition{flex:none;white-space:nowrap}
#armoryDialog[data-tab=gear] .gear-list .gear-row-head .gear-name{flex:0 1 auto}
#armoryDialog[data-tab=gear] .gear-list .gear-row:not(.worn) .gear-row-actions{flex-wrap:wrap;margin-top:calc(4px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-row:not(.worn)>button{margin-top:calc(4px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list button:not(#gear-sheet-id){min-height:0;height:auto;padding:calc(4px*var(--g)) calc(12px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog[data-tab=gear] .gear-list .gear-deltas .delta{cursor:help}
/* A narrow dialog stacks the doll: both slot columns, then the weapon, then the stat panel. */
@container (max-width:860px){
 #armoryDialog[data-tab=gear] .gear-page{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto}
 #armoryDialog[data-tab=gear] .gear-doll-left{grid-column:1;grid-row:2}
 #armoryDialog[data-tab=gear] .gear-doll-right{grid-column:2;grid-row:2}
 #armoryDialog[data-tab=gear] .gear-doll-weapon{grid-column:1/-1;grid-row:3}
 #armoryDialog[data-tab=gear] .gear-page>.gear-totals{grid-column:1/-1;grid-row:4;margin-top:calc(8px*var(--g))}
 #armoryDialog[data-tab=gear] .gear-page>.gear-list{grid-row:5}
 #armoryDialog[data-tab=gear] .gear-page>.gear-footer{grid-row:6}
 #armoryDialog[data-tab=gear] .gear-header{flex-wrap:wrap}
}
@container (max-width:480px){
 #armoryDialog[data-tab=gear] .gear-page>.gear-totals{grid-template-columns:repeat(2,auto)}
 #armoryDialog[data-tab=gear] .gear-doll-right button.gear-slot:not(#gear-sheet-id){flex-direction:row;text-align:left}
 #armoryDialog[data-tab=gear] .gear-doll-right .gear-slot-label{align-items:flex-start}
}

/* ---- Shared Armory frame ----
   Every Armory tab (Gear, Talents, Spells, Boss Contracts, Drop Tables) uses the Gear tab's frame: same width, same
   viewport height, same title/banner/tab bar/footer. Only the page between tab bar and footer changes, and it scrolls
   inside itself, never the dialog. The Gear tab keeps its own more specific rules above. */
#armoryDialog{--g:.7;--gw:1;width:min(calc(100vw - 32px),max(760px,calc(var(--gw)*950px)))}
#armoryDialog[open]{display:flex;flex-direction:column;height:calc(100dvh - 24px);max-height:none;overflow:hidden}
@media(min-width:1500px){#armoryDialog{--gw:1.2}}
@media(min-width:1900px){#armoryDialog{--gw:1.4}}
@media(min-height:640px){#armoryDialog{--g:.74}}
@media(min-height:710px){#armoryDialog{--g:.8}}
@media(min-height:780px){#armoryDialog{--g:.86}}
@media(min-height:960px){#armoryDialog{--g:1}}
@media(min-height:1100px){#armoryDialog{--g:1.08}}
@media(min-height:1290px){#armoryDialog{--g:1.18}}
@media(min-height:1400px){#armoryDialog{--g:1.26}}
@media(max-height:899px){#armoryDialog .armory-banner{display:none}}
#armoryDialog>*{flex:none}
#armoryDialog .window-title{min-height:calc(42px*var(--g));padding:calc(6px*var(--g)) 35px;font-size:calc(24px*var(--g))}
#armoryDialog .realm-tabs{padding-top:calc(7px*var(--g));padding-bottom:0}
#armoryDialog .realm-tabs .realm-tab{min-height:calc(31px*var(--g));padding:calc(5px*var(--g)) calc(11px*var(--g));font-size:calc(12px*var(--g))}
#armoryDialog .armory-banner{padding:calc(20px*var(--g)) calc(25px*var(--g)) calc(16px*var(--g))}
#armoryDialog .armory-banner h2{font-size:calc(31px*var(--g));margin:0 0 calc(3px*var(--g))}
#armoryDialog .armory-banner p,#armoryDialog #armoryHint{font-size:calc(13px*var(--g))}
#armoryDialog .window-footer{min-height:0;padding:calc(13px*var(--g)) 22px}
#armoryDialog:not([data-tab=gear])>.armory-page{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#80653a #100c07}
/* The tab bar: lobby.css's global button:hover:enabled (specificity 0,2,1) used to turn a hovered tab red, which made
   the idle tab under the pointer look more active than the selected one. */
#armoryDialog .realm-tabs .realm-tab{background:linear-gradient(#2a1f10,#140d06);border-color:#4d3b23;color:#a89e87;text-shadow:none;box-shadow:inset 0 1px #d6c29714}
#armoryDialog .realm-tabs .realm-tab:hover:enabled{background:linear-gradient(#3c2d19,#1c1409);border-color:#8a7143;color:#e9d9ae;box-shadow:inset 0 1px #d6c29724}
#armoryDialog .realm-tabs .realm-tab.selected,#armoryDialog .realm-tabs .realm-tab[aria-selected=true],#armoryDialog .realm-tabs .realm-tab.selected:hover:enabled,#armoryDialog .realm-tabs .realm-tab[aria-selected=true]:hover:enabled{background:linear-gradient(#7a5a2c,#43301a);border-color:#e2b758;color:#fff0b8;box-shadow:inset 0 -3px #e2b758,0 0 0 1px #000}
/* Boss Contracts: three labelled blocks, comfortable text, lines capped near 75 characters. */
#contractsPage{font-size:14px;line-height:1.55}
#contractsPage>h2{margin:0 0 4px}
#contractsPage h3{margin:18px 0 6px;color:#e0bc62;font:calc(15px*var(--g)) Friz,Georgia,serif;letter-spacing:.03em}
#contractsPage #contractRequirements h3:first-child{margin-top:8px}
#contractsPage p,#contractsPage li{max-width:75ch;font-size:14px;line-height:1.55;color:#d8cba8}
#contractsPage #contractRequirements p{margin:6px 0}
#contractsPage .drop-table{max-width:60ch}
#contractsPage .progression-rules-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,34ch),1fr));gap:12px 18px;margin-top:6px}
#contractsPage .contract-rules{padding:10px 14px 8px;border:1px solid #4a3a21;border-radius:4px;background:linear-gradient(#1a1209,#0f0b06);box-shadow:inset 0 1px #b88d3b55}
#contractsPage .contract-rules h3{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#cbb16c}
#contractsPage .contract-rules ul{margin:0;padding-left:18px}
#contractsPage .contract-rules li{margin:5px 0;font-size:13px}
/* Spells: the first sentence of each description under the name. */
#spellsPage .spell-blurb{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:#a99a77;font-weight:normal;white-space:normal}