/* Zone4 Equipment Lab — single stylesheet. */
:root{
  color-scheme:dark;
  --bg:#0a0a0a;--surface:#141414;--surface-2:#191919;--surface-3:#212121;--well:#0e0e0e;
  --line:#2a2a2a;--line-2:#3a3a3a;
  --text:#ededed;--text-2:#b3b3b3;--text-3:#7d7d7d;
  --accent:#ff8a1f;--accent-ink:#1c0e02;--accent-soft:#ff8a1f1f;--accent-line:#7a4216;
  --good:#7fdc6a;--bad:#ff7f70;--info:#a3a3a3;--value:#ffb877;
  --radius:10px;--radius-sm:6px;--shadow:0 14px 36px #000a;
  --font:"Segoe UI","Leelawadee UI","Noto Sans Thai","Sukhumvit Set",Thonburi,Tahoma,system-ui,sans-serif;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(1100px 520px at 0 0,#331a0a4d,transparent 62%),var(--bg);color:var(--text);font:14px/1.5 var(--font)}
h1,h2,h3,h4,p{margin:0}
button,input,select{font:inherit;color:inherit}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 12px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);font-size:13px;line-height:1.25;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button:hover:not(:disabled),.button:hover{border-color:var(--accent);background:#2b1d12}
button:disabled{opacity:.45;cursor:not-allowed}
.ghost{background:transparent}
input,select{min-height:34px;min-width:0;padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--well);font-size:13px}
input::placeholder{color:var(--text-3)}
select{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
summary{min-height:24px;padding-block:3px;cursor:pointer}
.scroll-thin,.item-grid,.item-tooltip,.orb-list,#orb-cards,.bag-view,#warnings,.compare-dialog,.image-dialog{scrollbar-width:thin;scrollbar-color:#3d3d3d transparent}

/* App bar: the build and its menu, character and level, compare, history and share in one row (it wraps on narrow
   screens). Every control names itself, so no field needs a label above it. */
.app-header{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:8px 24px;border-bottom:1px solid #5c3415;background:#0c0c0c}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:32px;height:26px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:900;font-style:italic}
.brand-name{font-size:14px;font-weight:800;letter-spacing:.08em}
.toolbar{display:flex;flex:1;flex-wrap:wrap;align-items:center;gap:8px 18px;min-width:0}
.tool-group{display:flex;align-items:center;gap:6px;min-width:0}
.tool-end{margin-left:auto}
.toolbar select{min-height:32px;padding:4px 8px}
#build-select{width:170px}
#character{width:110px}
#level{width:86px}
#compare-select{width:130px}
.icon{min-width:32px;min-height:32px;padding:4px 8px;font-size:15px;line-height:1}
.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700}
.primary:hover:not(:disabled){border-color:var(--accent);background:#ffa24d}
.compare-tools:has(#compare-select:disabled){display:none}
/* The build's less frequent actions sit in a menu under ⋯ */
.menu{position:relative}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{border-color:var(--accent)}
.menu-list{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:grid;min-width:170px;padding:4px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-2);box-shadow:var(--shadow)}
.menu-list>button,.menu-list>.button{justify-content:flex-start;min-height:32px;border-color:transparent;background:none;font-size:13px}
.menu-list>button:hover:not(:disabled),.menu-list>.button:hover{border-color:transparent;background:var(--surface-3)}
.menu-list>.danger{color:var(--bad)}
main{max-width:1880px;margin:0 auto;padding:12px 24px 0}
/* Notices float at the bottom as a toast instead of pushing the page down */
#message:not(:empty){position:fixed;bottom:20px;left:50%;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:max-content;max-width:min(560px,calc(100vw - 32px));padding:9px 14px;border:1px solid #7a4216;border-radius:var(--radius-sm);background:#24170c;color:#ffd3a8;font-size:13px;box-shadow:var(--shadow);transform:translateX(-50%)}
#message .share-url{flex:1 1 100%;min-height:30px;font-size:12px}

/* Workspace grid */
.workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.left-zone{min-width:0;container:build/inline-size}
.build-details{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
/* Two columns once there is room: the equipment with its orbs, title and pet under it, and the stats beside it with
   the set bonuses under them. Each lower panel spans into the row of the taller upper one, so it starts right under its
   own. */
@container build (min-width:500px){
  .build-details{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .build-details>.equipment{grid-area:1/1}
  .build-details>.stats{grid-area:1/2/3}
  .build-details>.equipment-extras{grid-area:2/1/4}
  .build-details>.bonuses{grid-area:3/2}
}
/* On a desktop the page itself never scrolls: the bar stays on top, and the build and the catalogue each scroll in place */
@media(min-width:1024px){
  body{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden}
  main{display:flex;flex:1;flex-direction:column;width:100%;min-height:0}
  .workspace{flex:1;min-height:0;grid-template-columns:420px minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch}
  .left-zone{overflow-y:auto;overscroll-behavior:contain;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent}
  .catalogue{min-height:0;margin-bottom:12px}
  footer{flex:none}
  .catalogue .catalogue-body{flex:1 1 auto;min-height:0}
  .catalogue .item-grid,.catalogue .bag-view{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .catalogue:not(.wide) .filter-body{max-height:min(46vh,440px);overflow-y:auto;overscroll-behavior:contain}
  .catalogue.wide .catalogue-body{grid-template-rows:minmax(0,1fr)}
  .catalogue.wide .filter-panel{overflow-y:auto;overscroll-behavior:contain}
  .catalogue.wide .catalogue-main{min-height:0}
}
@media(min-width:1024px) and (max-width:1279px){.catalogue .item-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}}
@media(min-width:1280px){.workspace{grid-template-columns:clamp(500px,38vw,640px) minmax(0,1fr)}}

/* Panels */
.panel{min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.section-head{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#1c1c1c,#161616)}
.section-head h2{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.head-meta{margin-left:auto;color:var(--text-2);font-size:12px;text-align:right}
.head-meta small{color:var(--text-3);font-size:11px}
.head-meta:empty{display:none}
/* An action on the whole panel, such as taking off every piece */
.head-action{min-height:26px;padding:2px 9px;background:transparent;color:var(--text-2);font-size:12px}
.head-meta:empty+.head-action{margin-left:auto}
.head-action:hover:not(:disabled){border-color:var(--bad);background:transparent;color:var(--bad)}
.empty-state{grid-column:1/-1;padding:18px 14px;color:var(--text-3);font-size:12.5px;text-align:center}

/* Item art: icons and frames share one 100x100 canvas, so both layers scale together */
.art{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:6px;background:radial-gradient(circle at 50% 40%,#303030,#181818 64%,#111111)}
.art>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.art-missing{display:grid;place-items:center;color:var(--text-3);font-size:20px}

/* Equipment: each side is a window like the game's, a tab over a 3×2 block (hair, shirt, pants / face, gloves, shoes)
   and a 2×2 block (accessory, ring / back) of square slots. The side the catalogue is browsing has the gold frame. */
.loadouts{display:grid;grid-template-columns:minmax(0,280px);justify-content:center;gap:10px;padding:12px 12px 14px}
.loadout-row{display:grid;justify-items:start}
.loadout-heading{position:relative;z-index:1;min-width:0;min-height:0;margin-bottom:-1px;padding:3px 16px 4px;border:1px solid #363636;border-bottom:0;border-radius:6px 6px 0 0;background:#0f0f0f;color:var(--text-3);font-size:12px;font-weight:800}
.loadout-heading[aria-pressed=true],.loadout-heading:hover:not(:disabled){border-color:#c2621a;background:#0f0f0f;color:var(--accent)}
.slot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 3px repeat(2,minmax(0,1fr));grid-template-areas:"Hair Shirt Pants gap Accessory Ring" "Face Gloves Shoes gap Back .";gap:5px;width:100%;padding:7px;border:1px solid #363636;border-radius:0 6px 6px 6px;background:#0f0f0f}
.loadout-row:has(>[aria-pressed=true]) .slot-grid{border-color:#c2621a}
.slot-grid::before{content:"";grid-area:gap;justify-self:center;width:1px;background:#363636}
.slot-cell{position:relative;min-width:0}
.slot{position:relative;display:block;width:100%;aspect-ratio:1;min-height:0;padding:2px;border:1px solid #363636;border-radius:4px;background:linear-gradient(180deg,#262626,#171717);color:var(--text-3)}
.slot.filled{border-color:#8a4a1a}
/* A piece worn from the bag with its own stats */
.slot.own{border-color:#ffb877}
.slot:hover:not(:disabled){border-color:var(--accent);background:linear-gradient(180deg,#2e2e2e,#1c1c1c)}
.slot.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 12px #ff8a1f40}
.slot .art{border-radius:2px;background:radial-gradient(circle at 50% 40%,#333333,#1c1c1c 70%)}
.slot-empty{display:grid;place-items:center;width:100%;aspect-ratio:1;font-size:17px;filter:grayscale(1);opacity:.3}
.slot .plus-badge{top:1px;left:1px;padding:0 3px;font-size:9.5px}
.slot-cell .remove{position:absolute;top:-6px;right:-6px;z-index:2;width:18px;height:18px;min-height:0;padding:0;border-radius:50%;background:#1d1d1d;font-size:12px;line-height:1;opacity:0}
.slot-cell:hover .remove,.slot-cell:focus-within .remove{opacity:1}
/* Without a pointer that hovers, only the slot tapped last shows its ×, rather than one on every piece */
@media(hover:none){.slot-cell .remove{visibility:hidden}.slot-cell:focus-within .remove,.slot-cell:has(.selected) .remove{visibility:visible;opacity:1}}

/* Stats */
.stats{display:flex;flex-direction:column}
/* A wide stats panel puts attack beside defence, and the general stats two to a row under them */
.stats{container:stats/inline-size}
@container stats (min-width:400px){
  .ability-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ability-group:last-child{grid-column:1/-1}
  .ability-group:last-child .ability-values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ability-group:last-child .ability-row+.ability-row{border-top:0}
  .ability-group:last-child .ability-row:nth-child(n+3){border-top:1px solid #1f1f1f}
}
.level-warning{padding:8px 12px 0;color:#f5c84c;font-size:11.5px}
.level-warning:empty{display:none}
.ability-body{display:grid;gap:6px;padding:8px 10px 10px}
.ability-group{overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--well)}
.ability-label{padding:3px 10px;border-bottom:1px solid var(--line);background:#191919;color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.16em}
.ability-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 8px;padding:2px 10px;font-size:12.5px;line-height:1.45}
.ability-row+.ability-row{border-top:1px solid #1f1f1f}
.ability-row>span{color:var(--text-2);white-space:nowrap}
.ability-row>strong{margin-left:auto;color:#86e27a;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ability-row>strong small{margin-left:4px;color:var(--info);font-size:11px;font-weight:400}
.ability-row .vs{margin-left:6px;font-size:11px;font-style:normal;font-weight:600}
.vs.up{color:var(--good)}
.vs.down{color:var(--bad)}
.vs.same{color:var(--text-3)}
.ability-row[data-tooltip-stat]{cursor:help}
.ability-row[data-tooltip-stat]:hover,.ability-row[data-tooltip-stat]:focus-visible{outline:none;background:#1f1f1f}

/* Set bonuses: a card per set being worn, with its tiers and every piece as a toggle */
#bonuses{display:grid;gap:6px;padding:8px 10px 10px}
.set-card{display:grid;gap:6px;padding:5px 9px;border:1px solid #363636;border-radius:var(--radius-sm);background:#171717}
.set-card.complete{border-color:#3f5f33}
.set-row{display:flex;align-items:center;gap:8px}
.set-toggle{flex:1;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:start;gap:1px;min-width:0;min-height:0;padding:2px 0;border:0;background:none;text-align:left}
.set-toggle:hover:not(:disabled){border:0;background:none}
.set-toggle:hover strong{text-decoration:underline;text-underline-offset:2px}
.set-toggle strong{color:var(--accent);font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.set-toggle strong::before{content:"▸";display:inline-block;width:14px;color:var(--text-3);transition:transform .15s}
.set-card.open .set-toggle strong::before{transform:rotate(90deg)}
/* A closed row keeps its bonus to two lines; the open set lists every tier */
.set-toggle small{display:-webkit-box;overflow:hidden;color:var(--text-2);font-size:11.5px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.set-done{flex:none;color:var(--good);font-size:12px;font-weight:600}
.set-body{display:grid;gap:8px;justify-items:start}
.set-body>.set-tiers,.set-body>.set-pieces{justify-self:stretch}
.set-fill{flex:none;min-height:26px;padding:2px 8px;font-size:11.5px}
.set-fill:not(:disabled){border-color:#8a4a1a;background:#2b1a0d;color:#ffb070}
.link{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--accent);font-size:inherit;text-decoration:underline;text-underline-offset:2px}
.link:hover:not(:disabled){border:0;background:none;color:var(--text)}
.set-tiers{margin:0;padding:0;list-style:none}
.set-tiers li{padding:3px 0;border-top:1px solid #2a2a2a;color:var(--text-2);font-size:12px;line-height:1.45}
.set-tiers li b{margin-right:8px;color:var(--text);font-weight:600}
.set-tiers li.active{color:var(--value)}
.set-tiers li.active b{color:var(--good)}
.set-tiers .down{color:var(--bad)}
.set-tiers em{color:var(--text-3);font-size:11px;font-style:normal;white-space:nowrap}
.set-pieces{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.set-piece{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:3px;min-width:0;min-height:0;padding:3px 3px 4px;border:1px dashed #3d3d3d;border-radius:8px;background:var(--well);color:var(--text-3)}
.set-piece .art{opacity:.55}
.set-piece:hover .art,.set-piece.worn .art{opacity:1}
.set-piece.worn{border:1px solid #4f7a3f;background:#7fdc6a12;color:var(--good)}
.set-piece.worn::after{content:'✓';position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2f5a24;color:#e6ffdc;font-size:11px;font-weight:800;line-height:1}
.set-piece[aria-disabled=true]{cursor:not-allowed}
.set-piece[aria-disabled=true] .art{filter:grayscale(1);opacity:.3}
.set-piece[aria-disabled=true]:hover{border-color:#3d3d3d;background:var(--well)}
.set-piece small{position:absolute;inset:3px 3px auto;display:grid;place-items:center;aspect-ratio:1;color:#f5c84c;font-size:11px;font-weight:700;text-shadow:0 1px 2px #000}
.set-piece-part{overflow:hidden;font-size:10.5px;line-height:1.2;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.set-status{color:var(--text-3);font-size:11.5px;line-height:1.5}
.set-status:empty{display:none}
.set-status b{color:var(--text);font-weight:600}
.set-status .up{color:var(--good)}
.set-status .down{color:var(--bad)}
#warnings{max-height:160px;overflow:auto;color:#e0a970}

/* Orbs, title and pet */
/* Search and pick an orb, then how many and add, on as few lines as the width allows */
.equipment-extras{container:extras/inline-size}
.orb-tools{padding:10px 12px 0}
.orb-picker{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px}
.orb-picker #orb-search,.orb-picker #orb-choice{grid-column:1/-1}
.orb-many{padding:6px 9px;font-size:12.5px}

.orb-quantity{display:flex;align-items:center;gap:4px;color:var(--text-3);font-size:12px}
.orb-quantity input{width:56px}
.orb-count{color:var(--accent)}
.orb-count.at-limit{color:var(--bad)}
.orb-preview{display:flex;align-items:center;gap:10px;padding:8px 12px 0;font-size:12px;color:var(--text-3)}
.orb-preview:empty{display:none}
.orb-preview img,.orb-chip>img{flex:none;width:36px;height:36px;object-fit:contain;border-radius:6px}
.orb-preview strong,.orb-chip strong{display:block;color:var(--text);font-size:12.5px}
.orb-preview small{display:block;color:var(--info);font-size:11px}
.orb-browser{margin:8px 12px 0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--well)}
.orb-browser>summary{padding:7px 10px;color:var(--text-2);font-size:12px}
#orb-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;max-height:260px;overflow:auto;padding:0 8px 8px}
#orb-cards button{display:grid;justify-items:center;gap:4px;min-height:0;padding:6px 4px;font-size:10.5px;line-height:1.25;text-align:center}
#orb-cards img{width:34px;height:34px;object-fit:contain}
.orb-search-hint{grid-column:1/-1;color:var(--text-3);font-size:11px}
.orb-list{display:grid;gap:6px;max-height:300px;overflow:auto;padding:8px 12px 0}
.orb-list:empty{display:none}
.orb-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--well)}
.orb-chip small{display:block;color:var(--text-2);font-size:11px}
/* An orb set in a worn bag piece: listed with the build's orbs, locked, as it counts with its piece */
.orb-chip.locked{border-style:dashed;background:transparent}
.orb-chip .orb-in{margin-top:4px;color:var(--info)}
.orb-twice{margin:0;padding:6px 9px;border:1px solid #6b3a14;border-radius:6px;background:#2e170a26;color:#f5c84c;font-size:11.5px}
.orb-stepper{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.orb-stepper button{min-width:30px;min-height:28px;padding:2px 8px;font-size:13px}
.orb-stepper button:last-child{font-size:11.5px}
.orb-stepper b{min-width:22px;text-align:center}
.character-bonuses{display:grid;gap:10px;margin-top:10px;padding:10px 12px 12px;border-top:1px solid var(--line)}
.character-bonuses section{display:grid;gap:4px}
.character-bonuses label{color:var(--text-2);font-size:12px;font-weight:600}
.character-bonuses small{color:var(--info);font-size:11.5px}
.character-bonuses small:empty{display:none}
/* Title: the worn title and what it gives this build; the list to choose from floats over the page */
.title-button{position:relative;display:grid;justify-items:start;gap:2px;width:100%;min-height:34px;padding:6px 28px 6px 10px;background:var(--well);text-align:left}
.title-button::after{content:"▾";position:absolute;top:50%;right:10px;color:var(--text-3);transform:translateY(-50%)}
.title-button #title-name{font-size:13px;font-weight:600}
.title-effects,.title-list li small{display:flex;flex-wrap:wrap;gap:0 10px;color:var(--info);font-size:11.5px;line-height:1.45}
.title-effects .other,.title-list .other{color:var(--text-3)}
.title-effects b,.title-list b{color:var(--value);font-weight:600}
.title-pop{position:fixed;z-index:50;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2);box-shadow:var(--shadow);overflow:hidden}
.title-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.title-tools select{max-width:180px;font-size:12px}
.title-list{flex:1;min-height:0;margin:0;padding:4px;overflow-y:auto;list-style:none;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent}
.title-list li{display:grid;gap:1px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer}
.title-list li strong{font-size:12.5px;font-weight:600}
.title-list li small{font-size:11px}
.title-list li:hover,.title-list li.active{background:var(--surface-3)}
.title-list li[aria-selected=true]{background:#2b1a0d;box-shadow:inset 2px 0 var(--accent)}
.title-list .title-none{color:var(--text-3);cursor:default}
/* Orb results under the search: picture, name, stats */
.orb-row{grid-template-columns:30px minmax(0,1fr)!important;align-items:center;gap:8px!important}
.orb-row img{width:30px;height:30px;object-fit:contain}
.orb-row small{display:block;color:var(--info);font-size:11px}
.title-all{display:flex;align-items:center;gap:6px;padding:7px 10px;border-top:1px solid var(--line);color:var(--text-3);font-size:11.5px;cursor:pointer}
.title-all input{width:13px;height:13px;min-height:0;margin:0;padding:0;accent-color:var(--accent)}
@media(max-width:760px){.title-pop{top:auto;right:8px;bottom:8px;left:8px;max-height:72dvh}}
.pet-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.pet-fields label{display:flex;align-items:center;gap:6px}
.pet-fields #pet-glow{width:64px}

/* Catalogue */
.catalogue{display:flex;flex-direction:column}
.catalogue>*{flex:none}
/* Panel 05 is two tabs: the catalogue and the viewer's bag */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.view-tabs{display:inline-flex;gap:2px;margin-right:auto;padding:2px;border:1px solid var(--line-2);border-radius:8px;background:var(--well)}
.view-tabs [role=tab]{gap:5px;min-height:28px;padding:4px 14px;border:0;border-radius:6px;background:transparent;color:var(--text-2);font-size:13px;font-weight:700}
.view-tabs [role=tab]:hover:not([aria-selected=true]){background:#ff8a1f14;color:var(--text)}
.view-tabs [role=tab][aria-selected=true]{background:var(--accent);color:var(--accent-ink)}
.view-tabs [role=tab][aria-selected=true] .count{color:inherit;opacity:.75}
/* The bag: ways to add an item, the new card to confirm, then the items kept */
.bag-view{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:12px 14px 18px}
.bag-heading{font-size:13px;font-weight:700}
.bag-heading small{margin-left:4px;color:var(--text-3);font-size:11.5px;font-weight:400}
.bag-add{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.bag-drop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 12px;border:1px dashed #4a4a4a;border-radius:var(--radius);background:var(--well)}
.bag-drop #bag-image-pick{margin-left:auto}
.bag-drop.over{border-color:var(--accent);background:#ff8a1f12}
.bag-drop strong{font-size:13.5px}
.bag-drop small{color:var(--text-3);font-size:12px}
.bag-add-row{display:flex;flex-wrap:wrap;gap:6px}
.bag-add-row input{flex:1 1 240px}
.bag-paste{display:grid;gap:6px}
.bag-paste textarea{min-height:132px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--well);color:var(--text);font:12.5px/1.5 var(--font);resize:vertical}
.bag-paste button{justify-self:start}
.bag-status{min-height:1.5em;color:var(--accent);font-size:12px;line-height:1.5}
.bag-status:empty{min-height:0}
.bag-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.bag-picks:empty{display:none}
.bag-pick{display:grid;grid-template-columns:40px minmax(0,1fr);justify-items:start;gap:8px;min-height:0;padding:5px 8px;text-align:left}
.bag-pick strong{display:block;font-size:12px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.bag-pick small{display:block;color:var(--text-3);font-size:11px;line-height:1.35}
.bag-none{grid-column:1/-1;color:var(--text-3);font-size:12px}
/* A new card waits above the bag to be confirmed; the card being edited takes the whole row for its form */
#bag-draft{display:grid;gap:6px}
.bag-choose{display:grid;gap:4px;color:#f5c84c;font-size:12px}
.bag-queue{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-bottom:8px;padding:6px 10px;border:1px solid #333333;border-radius:6px;background:#161616;color:#b3b3b3;font-size:12px}.bag-queue button{min-height:28px;padding:2px 10px;font-size:12px}
.bag-entry.new{border-color:var(--accent);box-shadow:0 0 0 1px #ff8a1f55}
.bag-entry.editing{grid-column:1/-1}
.bag-entry .item-actions>.primary{border-color:#8a4a1a;background:#2b1a0d;color:#ffb070}
.bag-edit{grid-area:stats;display:grid;gap:10px;padding-top:8px;border-top:1px solid var(--line)}
.edit-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 16px}
.edit-stats label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text-2);font-size:12px}
.edit-stats input{width:96px;min-height:30px;padding:2px 8px;text-align:right;font-variant-numeric:tabular-nums}
.edit-stats label.verify{color:#f5c84c}
.edit-stats label.verify input{border-color:#f5c84c}
.edit-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--text-2);font-size:12px}
.edit-line>span:first-child{min-width:44px;color:var(--text-3)}
.edit-line.verify>span:first-child{color:#f5c84c}
.edit-line label{display:flex;align-items:center;gap:6px}
.edit-line input{width:84px;min-height:30px;padding:2px 8px;text-align:right;font-variant-numeric:tabular-nums}
.edit-line select{flex:1 1 180px;min-width:0;max-width:300px}
.tag.orb button{min-width:0;min-height:0;margin-left:4px;padding:0 2px;border:0;background:none;color:inherit;font-size:12px;line-height:1}
.tag.verify{border-color:#8a4a1a;color:#f5c84c}
/* A bag card lists the piece as the game's tooltip does: a line per stat in its magenta, then the orbs in green */
.game-lines{grid-area:stats;display:grid;align-content:start;gap:1px;margin:0;padding:7px 0 0;border-top:1px solid var(--line);list-style:none;color:#f08ce8;font-size:12.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.game-lines .orb{color:var(--good)}
.game-lines .orb::before{content:"●";margin-right:6px;font-size:9px;vertical-align:1px}
.game-lines select{max-width:calc(100% - 16px);min-height:0;padding:0 4px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit;font-size:12.5px;cursor:pointer}
.game-lines select:hover,.game-lines select:focus-visible{border-color:var(--line-2);background:var(--well)}
.game-lines .orb.add{color:var(--text-3)}
.game-lines .verify{color:#f5c84c}
.game-lines .verify::after{content:" ?";font-weight:700}
.game-lines .item-no-stats{color:var(--text-3)}
.bag-entry .item-preview{position:relative}
.plus-badge{position:absolute;top:2px;left:2px;padding:0 4px;border-radius:3px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;line-height:1.45}
.bag-entry .up{color:var(--good)}
.bag-entry .down{color:var(--bad)}
/* Costume Workshop roll beside a stat: green above the catalogue, red below, amber when no roll of ±20% explains it */
.roll{display:inline-block;padding:0 6px;border-radius:999px;background:#ffffff0d;color:var(--text-3);font-size:10.5px;font-weight:700;line-height:1.6;white-space:nowrap}
.roll.up{background:#7fdc6a1a;color:var(--good)}
.roll.down{background:#ff7f701a;color:var(--bad)}
.roll.odd{background:#f5c84c1f;color:#f5c84c}
/* Best in slot: the stats to weigh with the side and source beside them, then what the build found changes, the sets
   it can wear in full and the build itself as tiles. Everything keeps its own size, so a wider tab fits more tiles in a
   row instead of stretching them. */
.recommend-view{container:rec/inline-size}
.rec-setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 32px}
.rec-setup>.bag-status{flex-basis:100%}
.rec-stats{display:grid;gap:6px;min-width:0}
.rec-options{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.rec-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rec-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);font-size:12px;line-height:1.4;white-space:nowrap;cursor:pointer;user-select:none}
.rec-chip:hover{color:var(--text)}
.rec-chip input{width:13px;height:13px;min-height:0;margin:0;padding:0;accent-color:var(--accent)}
.rec-chip:has(input:checked){border-color:var(--accent);background:#2b1a0d;color:#ffb070}
.rec-chip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rec-clear{padding:0 4px;font-size:12px}
/* One of a few: a segmented control with the chosen part filled */
.rec-seg{display:inline-flex;max-width:100%;border:1px solid var(--line-2);border-radius:999px;overflow:hidden}
.rec-seg>label{position:relative;display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;color:var(--text-2);font-size:12px;line-height:1.4;white-space:nowrap;cursor:pointer;user-select:none}
.rec-seg>label+label{border-left:1px solid var(--line-2)}
.rec-seg>label:hover{color:var(--text)}
.rec-seg input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;cursor:pointer}
.rec-seg>label:has(input:checked){background:#2b1a0d;color:#ffb070}
.rec-seg>label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px}
.rec-result{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line);transition:opacity .15s}
.rec-result.busy,.rec-set-rank.busy{opacity:.5}
.rec-set-rank.busy{pointer-events:none}
.rec-summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.rec-summary .primary{min-height:30px;padding:4px 14px}
.rec-same{color:var(--good);font-size:12.5px;font-weight:600}
.rec-diff{flex:1 1 320px;display:flex;flex-wrap:wrap;gap:2px 12px;min-width:0;font-size:12.5px;font-variant-numeric:tabular-nums}
.rec-diff .up{color:var(--good)}
.rec-diff .down{color:var(--bad)}
.rec-diff span:not(.weighted){opacity:.65}
.rec-sets{flex-basis:100%;color:var(--text-3);font-size:11.5px}
.rec-set-rank{display:grid;gap:6px}
.rec-set-rank.loading{min-height:66px}
.rec-set-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.rec-set-list>li{display:flex;min-width:0}
.rec-set{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:0;min-width:0;min-height:0;padding:5px 10px;text-align:left}
.rec-set strong,.rec-set small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-set strong{max-width:100%;font-size:12.5px;font-weight:600}
.rec-set small{max-width:100%;color:var(--text-3);font-size:11px;line-height:1.4}
.rec-set .rec-pct{color:var(--accent);font-size:11.5px;font-variant-numeric:tabular-nums}
.rec-set.active{padding-right:24px;border-color:var(--accent);background:#2b1a0d}
.rec-set.active::after{content:"✕";position:absolute;top:5px;right:8px;color:var(--text-2);font-size:10px}
.rec-sides{display:grid;gap:10px}
.rec-sides>section{display:grid;gap:6px;min-width:0}
.rec-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin:0;padding:0;list-style:none}
/* A tile: the piece and its name over its slot and the ticked stats it gives; the lock waits in the corner */
.rec-slot{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:5px 28px 5px 5px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--well)}
.rec-slot>.art{flex:0 0 38px;width:38px}
.rec-text{display:grid;min-width:0}
.rec-text strong,.rec-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-text strong{font-size:12.5px;font-weight:600;line-height:1.35}
.rec-text small{color:var(--text-3);font-size:11px;line-height:1.4}
.rec-gain{color:var(--text-2);font-variant-numeric:tabular-nums}
.rec-slot.empty .rec-text strong{color:var(--text-3);font-weight:400}
.rec-slot.changed{border-color:#6b3a14;background:#19110a}
.rec-slot.locked{border-color:var(--accent-line)}
.rec-lock{position:absolute;top:2px;right:2px;min-width:24px;min-height:24px;padding:0;border-color:transparent;background:none;font-size:11px;opacity:.3}
.rec-slot:hover .rec-lock,.rec-lock:focus-visible,.rec-lock[aria-pressed=true]{opacity:1}
.rec-lock[aria-pressed=true]{border-color:var(--accent-line);background:#2b1a0d}
@media(hover:none){.rec-lock{opacity:.75}}
/* Beside the stat rows (a wide tab) the two choices stack; below them they share a row */
@container rec (min-width:700px){.rec-options{display:grid;justify-items:start}}
.tag.orb{border-color:#3f5f33;color:var(--good)}
.tip-top .plus{margin-left:6px;padding:0 6px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-size:12px}
.bag-tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{padding:0 7px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);font-size:11px;line-height:1.65;white-space:nowrap}
.bag-shelf{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.bag-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bag-toolbar .bag-heading{margin-right:auto}
.bag-toolbar button{min-height:30px;padding:4px 10px;font-size:12px}
.bag-toolbar .danger{background:transparent;color:var(--text-2)}
.bag-toolbar .danger:hover:not(:disabled){border-color:var(--bad);background:transparent;color:var(--bad)}
.bag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-content:start}
.bag-group{grid-column:1/-1;margin-top:2px;color:var(--text-3);font-size:11px;font-weight:800;letter-spacing:.12em}
.bag-entry[draggable=true]{cursor:grab}
.bag-entry.blocked .item-preview,.bag-entry.blocked .item-body h3{opacity:.55}
.bag-why{color:#f5c84c;font-size:11.5px}
.bag-entry .item-actions>[data-bag-action=wear]:not(:disabled){border-color:#8a4a1a;background:#2b1a0d;color:#ffb070}
.bag-entry.equipped .item-actions>[data-bag-action=wear]{border-color:var(--accent-line);background:transparent;color:var(--accent)}
.bag-entry .item-actions>[data-bag-action=edit],.bag-entry .item-actions>[data-bag-action=remove],.bag-entry .item-actions>[data-bag-action=discard],.bag-entry .item-actions>[data-edit-cancel]{flex:0 0 auto}
.bag-entry.just-saved{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px #ff8a1f40}
.tip-bag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:8px;color:var(--text-2);font-size:11.5px}
.tip-bag b{color:var(--info);font-weight:700}
.tip-bag span{padding:0 7px;border:1px solid var(--line-2);border-radius:999px}
.tip-table td small{font-size:10.5px}
/* Catalogue body: the filter panel sits beside the results when the catalogue is wide (.wide, set from its width)
   and collapses above them otherwise; .catalogue-main dissolves so the narrow layout can order its parts. */
.catalogue-body{display:flex;flex-direction:column;min-width:0}
.catalogue-main{display:contents}
.catalogue-controls{order:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;padding:10px 14px 0}
.side-tabs{margin-right:4px}
.catalogue .filters{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 14px 0}
.filter-bar{order:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 14px 0}
.active-filters{display:contents}
.filter-panel{order:4;margin:8px 14px 0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--well)}
.filter-hint{order:5;padding:6px 14px 0;color:var(--text-3);font-size:11.5px}
.filter-hint:empty{display:none}
.catalogue .item-grid{order:6;margin-top:10px;border-top:1px solid var(--line)}
.catalogue .more{order:7}
.catalogue.wide .catalogue-body{display:grid;grid-template-columns:252px minmax(0,1fr)}
.catalogue.wide .catalogue-main{display:flex;flex-direction:column;min-width:0}
.catalogue.wide .filter-panel{order:0;margin:0;border:0;border-right:1px solid var(--line);border-radius:0;background:#101010}
.catalogue.wide .filter-body{grid-template-columns:minmax(0,1fr);gap:16px;padding:12px 14px 18px}
.catalogue.wide .filter-toggle,.catalogue.wide .filter-bar:has(>.active-filters[hidden]){display:none}
.side-tabs{display:inline-flex;padding:2px;border:1px solid var(--line-2);border-radius:8px;background:var(--well)}
.side-tabs button{min-height:28px;padding:4px 12px;border:0;border-radius:6px;background:transparent;color:var(--text-2);font-size:12px;font-weight:800;letter-spacing:.08em}
.side-tabs button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.slot-tabs{display:contents}
.slot-tabs button{min-height:28px;padding:3px 10px;border-radius:999px;background:#151515;color:var(--text-2);font-size:12px}
.slot-tabs button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.count{color:var(--text-3);font-size:10.5px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.count:empty{display:none}
.side-tabs button[aria-pressed=true] .count,.slot-tabs button[aria-pressed=true] .count,.grade-chip .count{color:inherit;opacity:.7}
.slot-tabs button[data-empty]:not([aria-pressed=true]),.side-tabs button[data-empty]:not([aria-pressed=true]),.facet[data-empty]:not([aria-pressed=true]){opacity:.45}
.catalogue .filters #search{flex:1 1 240px}
.sort-tools{display:flex;flex-wrap:wrap;gap:6px}
.inline-field{display:inline-flex;align-items:center;min-width:0;min-height:34px;padding-left:10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--well);color:var(--text-3);font-size:11px;font-weight:600;white-space:nowrap}
.inline-field select{min-height:32px;padding:4px 8px;border:0;background:transparent;color:var(--text);font-size:12.5px}
.inline-field select:focus-visible{outline:none}
.inline-field:has(select:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.toggle{min-height:34px;padding:6px 10px;font-size:12px}
.toggle[aria-pressed=true]{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good)}
.filter-toggle{min-height:28px;padding:3px 10px;font-size:12px;font-weight:600}
.filter-toggle::after{content:'▾';color:var(--text-3)}
.filter-toggle[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.filter-toggle[aria-expanded=true]::after{content:'▴';color:inherit}
.filter-toggle .count{padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;line-height:1.6}
.filter-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px 18px;padding:10px 10px 12px}
.filter-group{display:grid;align-content:start;gap:6px;min-width:0;margin:0;padding:0;border:0}
.filter-group legend{margin-bottom:6px;padding:0;color:var(--text-3);font-size:11px;font-weight:700;letter-spacing:.04em}
.facet-chips{display:flex;flex-wrap:wrap;gap:5px}
.facet{min-height:28px;padding:3px 9px;border-radius:999px;background:#151515;color:var(--text-2);font-size:12px}
.grade-chip{--g:#9aa3b2;border-color:color-mix(in srgb,var(--g) 32%,var(--line-2));color:var(--g)}
.grade-chip[aria-pressed=true]{border-color:var(--g);background:color-mix(in srgb,var(--g) 18%,transparent)}
.stat-rules{display:grid;gap:6px}
.stat-rules:empty{display:none}
.stat-rule{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 30px;gap:5px;padding:6px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.stat-rule select{grid-column:1/3}
.stat-rule select,.stat-rule input,.range-fields input,.filter-field select{min-height:30px;padding:4px 8px;font-size:12.5px}
.rule-remove{min-height:30px;padding:0;font-size:15px}
.add-rule,.filter-reset{justify-self:start;min-height:30px;padding:4px 10px;font-size:12px}
.range-fields{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;color:var(--text-3)}
.filter-check{display:flex;align-items:center;gap:7px;min-height:28px;color:var(--text-2);font-size:12px}
.filter-check input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--accent)}
#equipable-level{color:var(--text-3)}
.filter-field{display:grid;gap:3px;color:var(--text-2);font-size:11px;font-weight:600}
.filter-reset{grid-column:1/-1}
.filter-chip{min-height:28px;padding:3px 5px 3px 10px;border-color:var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px}
.filter-chip>span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:14px;line-height:1}
.filter-chip:hover>span{background:#ff8a1f33}
.clear-all{min-height:28px;padding:3px 8px;border-color:transparent;background:transparent;color:var(--text-2);font-size:12px;text-decoration:underline}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;align-content:start;padding:12px 14px}
.item{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"art body" "stats stats" "actions actions";gap:8px 12px;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#181818,#121212);transition:border-color .15s}
.item:hover{border-color:#7a4216}
.item.equipped{border-color:var(--accent-line);background:linear-gradient(180deg,#26180c,#151312)}
/* The element whose tooltip is open: the tooltip may sit a few cards away, outside the grid */
.item.tip-anchor{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 18px #ff8a1f33}
.slot.tip-anchor{border-color:var(--accent)}
.ability-row.tip-anchor{background:#ff8a1f14}
.item-preview{grid-area:art;align-self:start}
.item-body{grid-area:body;display:grid;align-content:start;gap:5px;min-width:0}
.item-body h3{font-size:13.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--text-2);font-size:11.5px}
.item-stats{grid-area:stats;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 14px;padding-top:7px;border-top:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}
.item-stats>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 6px;min-width:0;color:var(--text-2);white-space:nowrap}
.item-stats b{margin-left:auto;color:var(--value);font-weight:600}
.item-no-stats{grid-column:1/-1;color:var(--text-3)}
.item-stats>div.focus{color:var(--text)}
.item-stats>div.focus b{color:var(--accent)}
.item-gain{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
.item-gain b{font-weight:700;white-space:nowrap}
.item-gain.up b{color:var(--good)}
.item-gain.down b{color:var(--bad)}
.item-gain.same b{color:var(--text-3)}
.empty-state button{margin-top:10px}
.item-actions{grid-area:actions;display:flex;gap:6px}
.item-actions>button{flex:1;min-height:30px;padding:4px 8px;font-size:12px}
.item-actions>[data-equip]:not(:disabled){border-color:#8a4a1a;background:#2b1a0d;color:#ffb070}
.item.equipped .item-actions>[data-equip]{border-color:var(--accent-line);background:transparent;color:var(--accent)}
.item-actions>[data-bag-add]{flex:0 0 auto}
.catalogue .more{align-self:center;min-width:240px;margin:6px auto 12px;font-size:12.5px}

/* Grade badges: a progressive hue from common to top grades */
.grade{--g:#9aa3b2;display:inline-flex;align-items:center;padding:1px 7px;border:1px solid color-mix(in srgb,var(--g) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--g) 13%,transparent);color:var(--g);font-size:11px;font-weight:700;line-height:1.4}
/* Shared by grade badges, grade filter chips and the item tooltip */
[data-grade=Low]{--g:#9aa3b2}
[data-grade=Medium]{--g:#b9c6d6}
[data-grade=High]{--g:#6fd6a3}
[data-grade=Unique]{--g:#62b8ff}
[data-grade=Rare]{--g:#8f98ff}
[data-grade=Legend]{--g:#c690ff}
[data-grade=Ultimate]{--g:#ff9f55}
[data-grade=Mystic]{--g:#ff6f9a}
[data-grade=Champion]{--g:#ffd34f}
[data-grade=GM]{--g:#ff5a5a}

/* Tooltip for items and stat rows: opaque, beside its element and tinted by the item's grade; a bottom sheet on touch */
:where(.item-tooltip){--g:#c46a24}
.item-tooltip{position:fixed;z-index:1000;width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;padding:12px 14px 14px;border:1px solid color-mix(in srgb,var(--g) 55%,#2a2a2a);border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--g) 9%,#0e0e0e),#0e0e0e 110px);box-shadow:0 18px 44px #000d,0 0 0 1px #000a;color:var(--text);font-size:12.5px;line-height:1.5}
.item-tooltip.stat-tip{width:min(260px,calc(100vw - 16px))}
.item-tooltip.sheet{inset:auto 8px 8px;width:auto;max-height:min(72dvh,620px);box-shadow:0 -10px 40px #000e}
.tip-close{position:absolute;top:8px;right:8px;z-index:1;min-width:30px;min-height:30px;padding:0;border-radius:50%;font-size:17px;line-height:1}
.item-tooltip:not(.pinned) .tip-close{display:none}
/* A hover tooltip only shows; the pointer passes through it to whatever is underneath. Pinning makes it usable. */
.item-tooltip:not(.pinned){pointer-events:none}
.item-tooltip.pinned .tip-body>:first-child{padding-right:32px}
.tip-top{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px}
.tip-top strong{display:block;color:var(--g);font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.tip-top small{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px;color:var(--text-2);font-size:12px}
.tip-table{width:100%;margin-top:10px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tip-table th,.tip-table td{padding:2px 0 2px 12px;text-align:right;white-space:nowrap}
.tip-table th:first-child{padding-left:0;text-align:left;white-space:normal}
.tip-table tbody th{color:var(--text-2);font-weight:400}
.tip-table thead th{padding-bottom:4px;border-bottom:1px solid #24170d;color:var(--text-3);font-size:11px;font-weight:600}
.tip-table td{color:var(--value);font-weight:600}
.tip-table .up{color:var(--good)}
.tip-table .down{color:var(--bad)}
.tip-table .same{color:var(--text-3);font-weight:400}
.tip-table tr.focus>*{background:#ff8a1f14}
.tip-table tr.focus th{color:var(--accent);font-weight:700}
.tip-notes{margin-top:8px;padding:6px 9px;border:1px solid #6b3a14;border-radius:6px;background:#170f08}
.tip-notes p{color:#cfcfcf;font-size:11.5px}
.tip-notes .up{color:var(--good)}
.tip-notes .down{color:var(--bad)}
.tip-description{margin-top:8px;color:#bdbdbd;font-size:12px;white-space:pre-wrap}
.tip-section-title{margin:0 0 4px;color:var(--accent);font-size:12px;font-weight:700}
.tip-unknown{margin-top:10px;color:#f5c84c}
/* The tooltip only describes the item's sets; pieces are picked in the set bonus panel */
.tip-set{margin-top:10px;padding-top:10px;border-top:1px solid #24170d}
.tip-set-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.tip-set-head strong{color:var(--accent);font-size:13px;line-height:1.35}
.tip-set-head small{color:var(--text-2);font-size:11.5px}
.tip-set .set-tiers{margin-top:4px}
.tip-set-pieces{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tip-set-pieces span{padding:1px 8px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);font-size:11.5px}
.tip-set-pieces .worn{border-color:#4f7a3f;background:#7fdc6a14;color:var(--good)}
.tip-set-pieces .self{font-weight:700;color:var(--text)}
.tip-set-pieces .worn.self{color:var(--good)}
.tip-breakdown>div{display:flex;justify-content:space-between;gap:12px;line-height:1.7}
.tip-breakdown>div>span{color:#cfcfcf}
.tip-breakdown>div>b{font-weight:500;white-space:nowrap}
.tip-breakdown>.total{margin-top:4px;padding-top:4px;border-top:1px solid #6b3a14}
.tip-breakdown>.total>*{color:var(--accent);font-weight:700}
.tip-breakdown>.vs-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Side-by-side build comparison */
.compare-dialog,.image-dialog{width:min(780px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #9a4f17;border-radius:10px;background:#0d0d0d;color:var(--text)}
.compare-dialog::backdrop,.image-dialog::backdrop{background:#000b}
.dialog-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid #5c3415;background:#161616}
.dialog-head h2{color:var(--accent);font-size:15px}
.dialog-head button{min-width:36px;padding:4px 10px;font-size:16px}
.compare-body{padding:12px 14px 16px}
.compare-body h3{margin:16px 0 6px;color:var(--accent);font-size:13px}
.compare-body h3 small{margin-left:6px;color:#cfcfcf;font-weight:400}
.compare-table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.compare-table th,.compare-table td{padding:5px 8px;border-bottom:1px solid #2a2a2a;text-align:right;vertical-align:top}
.compare-table tbody th{color:var(--text-2);font-weight:400;text-align:left;white-space:nowrap}
.compare-table thead th{color:var(--accent);font-weight:700;overflow-wrap:anywhere}
.compare-table .up{color:var(--good)}
.compare-table .down{color:var(--bad)}
.compare-table .same,.compare-table .empty{color:var(--text-3)}
.compare-table.slots td,.compare-table.slots thead th{text-align:left}
.compare-table tr.changed td{background:#24160a;color:var(--value)}

/* The build as a picture: the preview fits the window, and the buttons sit under it */
.image-dialog{width:min(860px,calc(100vw - 24px))}
.image-body{display:grid;gap:10px;padding:12px 14px 14px}
.image-preview{justify-self:center;display:block;max-width:100%;max-height:calc(100dvh - 160px);border:1px solid var(--line);border-radius:8px}
.image-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.image-status{flex:1 1 220px;min-height:1.5em;color:var(--text-2);font-size:12.5px}
@media(max-width:760px){.image-status{flex-basis:100%}.image-status:empty{display:none}}

footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:2px 0 8px;color:var(--text-3);font-size:11px}
/* The data notes open upwards over the page, so the footer never grows */
.data-notes{position:relative}
.data-notes>summary{min-height:0;padding:0}
.data-notes>div{position:absolute;bottom:calc(100% + 6px);left:0;z-index:40;width:max-content;max-width:min(420px,90vw);padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface-2);box-shadow:var(--shadow);color:var(--text-2);line-height:1.6}

/* Tablet and phone */
@media(max-width:1023px){
  .catalogue .more{position:sticky;bottom:10px;box-shadow:0 6px 18px #000b}
}
@media(max-width:760px){
  .app-header{gap:8px;padding:8px 12px}
  .brand,.tool-label{display:none}
  .toolbar{gap:8px}
  .tool-group:first-child{flex:1 1 200px}
  #build-select{flex:1;width:auto}
  main{padding:10px 12px 0}
  .loadouts{padding:12px}
  .catalogue-controls,.catalogue .filters,.filter-bar,.filter-hint{padding-left:12px;padding-right:12px}
  .filter-panel{margin-left:12px;margin-right:12px}
  .catalogue .filters #search{flex-basis:100%}
  .sort-tools{width:100%}
  .inline-field{flex:1 1 0}
  .inline-field select{flex:1;width:100%}
  .toggle{flex:1 1 100%}
  .filter-body{grid-template-columns:minmax(0,1fr)}
  .item-grid{grid-template-columns:minmax(0,1fr);padding:10px 12px}
  .item{grid-template-columns:64px minmax(0,1fr)}
  .view-tabs [role=tab]{padding:4px 10px}
  .bag-view{padding:10px 12px 14px}
  .bag-grid{grid-template-columns:minmax(0,1fr)}
  .edit-line input{width:64px}
  .compare-table th,.compare-table td{padding:4px 5px;font-size:11.5px}
  .compare-table tbody th{white-space:normal}
}