/* the gear and skills guide, on top of hm.css */
.gsec{padding-top:110px}
.pickrow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px}

/* three lines side by side */
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.lc{border:1px solid var(--line);border-radius:var(--r3);background:var(--bg2);overflow:hidden}
.lc .fig{display:block;background:radial-gradient(ellipse 50% 45% at 50% 80%,rgba(255,138,61,.12),transparent 70%);border-bottom:1px solid var(--line)}
.lc canvas{width:100%;height:auto;aspect-ratio:380/230}
.lc .body{padding:18px 20px 20px}
.lc h3{font:400 36px/1 var(--disp)}.lc .role{color:var(--dim);font-size:15.5px;margin-top:4px}
.lc .pcs{display:grid;gap:8px;margin-top:16px}
.lc .pc{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}.lc .pc img{width:30px;height:30px}
.lc .pc b{display:block;font-weight:600;font-size:15px}.lc .pc small{display:block;color:var(--faint);font-size:13.5px;line-height:1.35}
.lc .rows{margin-top:16px;border-top:1px solid var(--line)}
.lc .rows div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}.lc .rows span{color:var(--faint);white-space:nowrap}.lc .rows b{font-weight:500;text-align:right}

/* the full-set comparison: one row per stat, one bar per line */
.compare{margin-top:16px;border:1px solid var(--line);border-radius:var(--r3);padding:22px 24px;background:var(--bg2)}
.compare h4{font:400 28px/1 var(--disp);margin-bottom:14px}
.cmp{display:grid;grid-template-columns:140px repeat(3,1fr);gap:8px 16px;align-items:center}
.cmp .hd{font:12.5px var(--mono);color:var(--faint)}
.cmp .st{font-size:15px;color:var(--dim)}
.bar{position:relative;height:22px;background:var(--panel);border-radius:var(--r1);overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accd),var(--acc));border-radius:var(--r1)}
.bar em{position:absolute;right:8px;top:0;line-height:22px;font:12px var(--mono);font-style:normal;color:var(--ink)}
.bar.zero em{color:var(--faint)}

/* enchanting */
.anvil{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:40px}
.table{border:1px solid var(--line);border-radius:var(--r3);background:#0b0c0f;overflow:hidden;display:flex;flex-direction:column}
.table canvas{width:100%;height:auto}
.pieces{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.pieces button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-left:1px solid var(--line);font-size:14.5px;color:var(--dim);text-align:left}
.pieces button:first-child{border-left:0}.pieces button img{width:28px;height:28px}.pieces button.on{background:var(--panel2);color:var(--ink);box-shadow:inset 0 -3px 0 var(--acc)}
.eside{border:1px solid var(--line);border-radius:var(--r3);background:var(--bg2);padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.enow h3{font:400 38px/1 var(--disp)}.enow p{color:var(--dim);font-size:15.5px;margin-top:6px}
.eside .t td,.eside .t th{padding:8px 10px;font-size:14.5px}
.eside .t tr.done td{color:var(--acc2)}.eside .t tr.now td{color:var(--ink);background:rgba(255,255,255,.035)}
.elog{font-size:16.5px;min-height:52px}.elog .ok{color:var(--acc2)}.elog .bad{color:var(--bad)}
.ebtns{display:flex;gap:10px;margin-top:auto}.ebtns .btn.on{border-color:var(--acc);color:var(--acc)}

/* stats as a definition list */
.statlist{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px}
.statlist div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.statlist h3{font:400 30px/1 var(--disp);color:var(--acc)}.statlist p{color:var(--dim);font-size:16px}

.wt{margin-top:36px}.wt tfoot td{color:var(--faint);font:13px var(--mono);padding-top:14px;border-bottom:0}

/* skills */
.skills{display:grid;grid-template-columns:1.2fr 1fr;gap:16px;margin-top:16px}
.sstage{border:1px solid var(--line);border-radius:var(--r3);background:radial-gradient(ellipse 60% 40% at 50% 85%,rgba(255,138,61,.1),transparent 70%),var(--bg2);overflow:hidden}
.sstage canvas{width:100%;height:auto}
.sstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.sstats div{padding:12px 16px;border-left:1px solid var(--line)}.sstats div:nth-child(4n+1){border-left:0}.sstats div:nth-child(n+5){border-top:1px solid var(--line)}
.sstats span{display:block;font:12px var(--mono);color:var(--faint)}.sstats b{font-weight:500;font-size:15px}
.slist{display:grid;gap:10px;align-content:start}
.slist button{display:grid;grid-template-columns:48px 1fr;gap:14px;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r3);background:var(--bg2);transition:border-color .15s}
.slist button:hover{border-color:var(--line2)}.slist button.on{border-color:var(--acc);background:var(--panel)}
.slist img{width:48px;height:48px}.slist b{font:400 28px/1 var(--disp)}.slist small{display:block;font:12px var(--mono);color:var(--faint);margin-top:4px}.slist p{color:var(--dim);font-size:15px;margin-top:6px}

@media (max-width:1100px){.lines,.anvil,.skills,.statlist{grid-template-columns:1fr}.cmp{grid-template-columns:110px repeat(3,1fr)}.pieces{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.statlist div{grid-template-columns:1fr;gap:6px}.cmp{grid-template-columns:80px repeat(3,1fr);gap:6px 8px}.bar em{font-size:10px;right:4px}}
.anvil{align-items:start}.eside .t td{white-space:nowrap}.eside .t th{white-space:nowrap}
.sstage{display:flex;flex-direction:column}.sstage .sc{position:relative;flex:1;min-height:300px}.sstage .sc canvas{position:absolute;inset:0;width:100%;height:100%}
/* fixed sizes: switching class, metal, piece or skill never moves the page */
.anvil{height:600px;align-items:stretch}
.table{height:600px}.table canvas{flex:1;min-height:0;height:auto;object-fit:contain}
.pieces button{height:62px;overflow:hidden}.pieces button span{display:block;overflow:hidden;text-overflow:ellipsis}
.eside{height:600px;overflow:hidden}.enow h3{white-space:nowrap}.enow p{height:48px;overflow:hidden}
.elog{height:52px;min-height:0;overflow:hidden}
.lines{grid-auto-rows:640px}.lc{display:flex;flex-direction:column}.lc .body{flex:1;display:flex;flex-direction:column}
.lc .pcs{height:176px;align-content:start}.lc .pc{height:52px;align-items:start}.lc .pc small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc .rows{margin-top:auto}
.compare{height:330px}
.skills{height:540px}.sstage{height:540px}.slist{grid-template-rows:repeat(4,1fr);height:540px}.slist button{height:100%;overflow:hidden;align-items:start}
@media (max-width:1100px){.anvil,.table,.eside,.skills,.sstage,.slist{height:auto}.lines{grid-auto-rows:auto}.compare{height:auto}.slist{grid-template-rows:none}}
.sstats div{height:68px;overflow:hidden}.sstats b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lines{grid-auto-rows:auto}.lc{height:auto}
.lc .fs{font:12.5px var(--mono);color:var(--faint);font-weight:400;margin-top:14px}
.lc .bars{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;align-items:center;margin-top:8px;min-height:192px;align-content:start}
.lc .bars span{font-size:14px;color:var(--dim)}
.lc .rows{margin-top:14px}.lc .rows div{align-items:baseline}
.lc .bars{grid-template-columns:96px 1fr 56px}.lc .bars .bar{height:14px}
.lc .bars em{font:13px var(--mono);font-style:normal;color:var(--ink);text-align:right}.lc .bars em.zero{color:var(--faint)}
.lines{grid-auto-rows:850px}
.lines{grid-auto-rows:auto}.lc .rows div:last-child{border-bottom:0;padding-bottom:0}.lc .body{padding-bottom:18px}
.lc .bars{min-height:196px}