/* Gear tiers in the menus (src/ui/tier-ui.js) and the EthrA store layout (src/ui/shop-ui.js).
   Reference: reference/ethra-video-study-2026-09-26/STUDY.md §11 and stills/ui-forge-*.jpg. */

/* ---------- tier accents: a coloured name and a small rank pip; the chrome stays white ---------- */
.tn{font-weight:900}
.tier-pip{display:inline-grid;place-items:center;flex:0 0 auto;min-width:20px;height:16px;padding:0 3px;margin-left:6px;vertical-align:1px;
 font:900 9px/1 var(--ui);font-style:normal;letter-spacing:.02em;color:#15130f;text-shadow:none;background:var(--tier,#c9955b);
 clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px);
 box-shadow:inset 0 -2px 0 var(--tier-dim,#7a5230)}
.tier-line{display:flex;align-items:center;gap:8px;margin:2px 0 4px;font:800 13px var(--ui);color:var(--ef-dim);text-shadow:var(--ef-shadow)}
.tier-line .tier-pip{margin-left:0}
.tier-line .tn{font-size:13px}
/* the equipment paper-doll slots wear a thin tier-coloured underline under the icon */
.eq-slot[data-grade]::after{content:'';position:absolute;left:8px;right:8px;bottom:3px;height:3px;background:var(--tier,transparent);pointer-events:none}

/* ---------- the store, after EthrA's Forge (stills/ui-forge-menu.jpg, ui-forge-buy-*.jpg) ----------
   No enclosing frame: the world is blurred and dimmed behind, a header band carries the shop's name
   large at the left and your gold at the right, and the panels float on the blur. */
#shop.sh{left:0;right:0;top:0;bottom:0;padding:0 max(30px,env(safe-area-inset-right)) 0 max(30px,env(safe-area-inset-left))!important}
#shop.sh::before{inset:0;border:0;border-image:none;background:rgba(16,19,26,.34);-webkit-backdrop-filter:blur(7px) brightness(.82);backdrop-filter:blur(7px) brightness(.82)}
#shop.sh .panel-head{--tab-h:76px;height:76px;min-height:76px;margin:0 calc(-1 * max(30px,env(safe-area-inset-left))) 16px!important;padding:0 max(30px,env(safe-area-inset-right)) 0 max(84px,calc(env(safe-area-inset-left) + 54px))!important;
 background:linear-gradient(180deg,rgba(14,16,20,.62),rgba(14,16,20,.42));box-shadow:0 1px 0 rgba(255,255,255,.06)}
#shop.sh .eyebrow{display:none}
#shop.sh h2#shopTitle{min-height:0;padding:0;border:0;border-image:none;font:900 42px/1 var(--ui)!important;letter-spacing:.005em;text-shadow:0 3px 0 rgba(0,0,0,.45)}
#shop.sh .head-actions{position:relative;z-index:2}
#shop.sh .head-actions button{min-height:34px;font-size:14px}
/* gold sits in the header at the right, EthrA's "50 G" with the bag */
.sh-purse{position:absolute;top:0;right:max(140px,calc(env(safe-area-inset-right) + 110px));height:76px;margin:0;display:flex;align-items:center;gap:12px;z-index:1}
.sh-purse b{font:900 28px var(--ui)!important;color:#fff}
.sh-purse .ico{width:34px;height:34px}
.sh-purse .dim{font:800 12px var(--ui)!important;color:var(--ef-dim)}
.sh-wrap{grid-template-columns:minmax(200px,250px) minmax(300px,1fr) minmax(330px,1.12fr);grid-template-rows:auto minmax(0,1fr) auto auto;
 grid-template-areas:"tabs list det" "cats list det" "vend list det" "hint hint carry";gap:10px 26px}
.sh-tabs{align-self:start;gap:8px}
.sh-tabs .hg{font-size:12px}
button.sh-tab{min-width:0;flex:1 1 0;justify-content:center}
.sh-cats{padding-top:4px}
/* the list: EthrA's underline rule under every row, chest-icon count at the right */
.sh-list{padding:6px 12px 6px 38px}
button.sh-row{min-height:44px;border-bottom:2px solid rgba(247,244,236,.82)!important;margin-bottom:6px;font-size:16px}
button.sh-row .ico{width:26px;height:26px}
button.sh-row .ct{display:inline-flex;align-items:center;gap:4px;min-width:44px;font:900 14px var(--ui);color:#fff}
button.sh-row .ct .ico{width:18px;height:18px}
button.sh-row .pr{min-width:62px}
button.sh-row:hover,button.sh-row:focus{border-bottom-color:#fff!important}
/* details + stats on the right */
.sh-detcol{gap:0}
.sh-detcol .ef-box{flex:0 0 auto}
.sh-detcol .sh-stat-tab{margin-top:12px}
.sh-det .det-head b{font-size:21px}
.sh-det .det-meta .ico{width:18px;height:18px}
.sh-stats{padding:8px 14px 10px;overflow-y:auto;min-height:0;flex:0 1 auto!important}
.sh-stats[hidden],.sh-stat-tab[hidden]{display:none!important}
.sh-stats .sh-cmp{margin:0 0 4px}
.st-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.st-pair.st-head{margin:8px 0 2px;font:900 15px var(--ui);color:#fff;text-shadow:var(--ef-shadow)}
.st-cell{display:flex;align-items:center;gap:6px;min-height:28px;font:800 14px var(--ui);color:#fff;text-shadow:var(--ef-shadow);white-space:nowrap;min-width:0}
.st-cell .ico{width:18px;height:18px}
.st-cell .st-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.st-cell .st-v{min-width:30px;text-align:right;font-weight:900}
.st-cell .st-sep{color:var(--ef-dim)}
.st-cell .st-v.up{color:#6ff05a}.st-cell .st-v.down{color:#ff6d5c}
button.sh-cmpbtn{margin-left:auto;height:30px;padding:0 10px;border:4px solid;border-image:var(--ef-frame) 6 fill/4px stretch;background:none!important;font:800 12px var(--ui);color:var(--ef-dim);text-shadow:var(--ef-shadow);box-shadow:none!important;outline:none!important}
button.sh-cmpbtn[aria-pressed="true"]{color:#fff}
/* the trader: EthrA's flat grey speech box, tail down to the bust under it */
.sh-vendor{grid-area:vend;position:relative;left:auto;bottom:auto;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:none;margin:0 0 0 -4px}
.sh-say{position:relative;width:min(300px,100%);min-height:62px;padding:8px 12px;background:#9a9a98;border:2px solid #c9c8c4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
 font:800 15px/1.3 var(--ui);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);margin-bottom:14px}
.sh-say::after{content:'';position:absolute;left:84px;bottom:-14px;border:7px solid transparent;border-top:8px solid #c9c8c4;border-left:0}
.sh-say.pop{animation:shsay .22s steps(3)}
@keyframes shsay{from{transform:translateY(4px);opacity:.3}}
.sh-vendor canvas{width:80px;height:80px;margin-left:24px}
/* carry meter, bottom right: load over a green-yellow-red bar, the limit beside it */
.sh-carry{grid-area:carry;align-self:center;justify-self:end;display:grid;grid-template-columns:auto 36px;grid-template-rows:auto auto;column-gap:10px;width:min(300px,100%);font:900 13px var(--ui);color:#fff;text-shadow:var(--ef-shadow)}
.sh-carry .n{grid-column:1;grid-row:1}
.sh-carry .bar{position:relative;grid-column:1;grid-row:2;height:5px;margin-top:3px;background:linear-gradient(90deg,#57c43d 0 58%,#e6c93a 58% 84%,#d8453a 84%);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.sh-carry .bar i{display:none}
.sh-carry .bar em{position:absolute;top:-4px;width:3px;height:13px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.sh-carry .max{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;font:900 10px/1.1 var(--ui);color:var(--ef-dim)}
.sh-carry .max b{font-size:13px;color:#fff}
@media(max-width:760px){
 #shop.sh{padding:0 12px!important}
 #shop.sh .panel-head{--tab-h:52px;height:52px;min-height:52px;margin:0 -12px 8px!important;padding:0 12px!important}
 #shop.sh h2#shopTitle{font-size:26px!important}
 .sh-purse{position:static;height:auto;order:0}
 .sh-wrap{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"tabs" "cats" "list" "det" "carry" "hint"}
 .sh-carry{justify-self:stretch;width:auto}
 .sh-vendor{display:none}
 .sh-purse b{font-size:18px!important}.sh-purse .ico{width:22px;height:22px}
 .st-cell{font-size:12px}.st-pair{gap:0 10px}
 button.sh-row{min-height:36px;font-size:14px}
}
@media(max-height:500px){
 #shop.sh .panel-head{--tab-h:44px;height:44px;min-height:44px;margin-bottom:6px!important}
 #shop.sh h2#shopTitle{font-size:24px!important}
 .sh-purse{height:44px}.sh-purse b{font-size:18px!important}.sh-purse .ico{width:22px;height:22px}
 .sh-wrap{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"tabs list det" "cats list det" "hint hint carry"}
 .sh-vendor{display:none}
 .sh-carry{width:min(220px,100%)}
 button.sh-row{min-height:30px;margin-bottom:2px;font-size:13px}
 .st-cell{min-height:20px;font-size:11px}.st-cell .ico{width:14px;height:14px}
 .sh-detcol .sh-stat-tab{margin-top:4px}
}
/* At 1080p and up EthrA's store type is big: scale the list and the stats to match. */
@media(min-width:1600px) and (min-height:900px){
 button.sh-row{min-height:54px;font-size:20px}button.sh-row .ico{width:32px;height:32px}
 button.sh-row .ct{font-size:17px}button.sh-row .pr{font-size:16px}
 .st-cell{min-height:34px;font-size:17px}.st-cell .ico{width:22px;height:22px}.st-pair.st-head{font-size:18px}
 .sh-det .det-head b{font-size:25px}.sh-det p{font-size:16px}
 .sh-cats .ef-btn{height:44px;width:200px;font-size:18px}.sh-cats .ef-btn.on{width:222px}
 .sh-say{font-size:18px;min-height:80px;width:min(380px,100%)}
 .ef-screen .eq-row{min-height:46px;font-size:18px}
}
.eq-row .tier-pip{margin-right:8px}
/* Small screens: the tier colour on the name is enough; give the name the pip's room. */
@media(max-height:500px),(max-width:760px){button.sh-row .tier-pip{display:none}button.sh-row .ct{min-width:34px}button.sh-row .ct .ico{display:none}}