/* Keybase Steel — grade equivalents finder + weight calculator (same tokens as style.css) */

/* ---------- quick tries under the grade search ---------- */
.g-try{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font-size:12.5px;color:#6b7686}
.g-try span{margin-inline-end:4px}
.g-try button{font:500 12px/1 var(--mono);direction:ltr;padding:7px 11px;border-radius:999px;border:1px dashed rgba(179,46,32,.35);background:transparent;color:var(--ember-lo);transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
.g-try button:hover{background:#FFEAD6;border-style:solid;border-color:var(--molten);transform:translateY(-1px)}

/* ---------- grade card ---------- */
.gcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);margin:-22px 0 48px;padding:clamp(22px,3vw,38px);background:#fff;border:1px solid var(--line-d);border-radius:6px;box-shadow:0 40px 80px -50px rgba(10,12,16,.45)}
.gcard::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;border-radius:6px 6px 0 0;background:linear-gradient(90deg,var(--ember),var(--molten),var(--hot))}
.gcard.pop{animation:gcPop .55s var(--ease)}
@keyframes gcPop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gc-x{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-d);background:#fff;color:#6b7686;transition:color .25s,border-color .25s}
.gc-x:hover{color:var(--ember-lo);border-color:var(--ember)}
.gc-x svg{width:16px;height:16px}
.gc-id{display:grid;gap:4px;padding-inline-end:40px}
.gc-fam{font-size:13px;font-weight:700;color:var(--ember-lo)}
.gc-code{font:850 clamp(40px,5vw,60px)/1.05 var(--lat);letter-spacing:-.03em;background:linear-gradient(100deg,var(--ember-lo),var(--ember) 40%,var(--molten));-webkit-background-clip:text;background-clip:text;color:transparent;justify-self:start}
.gc-name{font:600 16px/1.4 var(--mono);color:var(--ink);justify-self:start}
.gc-eq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}
.gc-eq div{padding:12px 14px;border:1px solid var(--line-d);border-radius:6px;background:var(--paper);transition:background-color .3s,border-color .3s}
.gc-eq div.hit{background:#FFEAD6;border-color:var(--molten)}
.gc-eq dt{font-size:12px;color:#6b7686;line-height:1.5}
.gc-eq dd{margin:2px 0 0;font:650 17px/1.3 var(--mono);color:var(--ink);text-align:start}
.gc-meta{margin-top:14px;font-size:13px;color:#5A6675;line-height:1.8}
.gc-meta b{font-weight:600;color:var(--ink)}
.gc-meta b.hit{background:#FFEAD6;border-radius:4px;padding-inline:4px}
.gc-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gc-add{border-color:var(--line-d);background:#fff;color:var(--ink)}
.gc-add:hover{border-color:var(--ink)}
.gc-add.on{background:var(--ink);border-color:var(--ink);color:#fff}
.gc-b h4{font-size:14px;font-weight:800;margin-bottom:12px}
.gc-b h4:not(:first-child){margin-top:24px}
.gc-comp{display:grid;gap:9px}
.gc-el{display:grid;grid-template-columns:34px minmax(0,1fr) 92px;align-items:center;gap:12px;font-size:13px}
.gc-el b{font:700 13px/1 var(--mono);color:var(--ink)}
.gc-el span{font:500 12.5px/1 var(--mono);color:#5A6675;text-align:end}
.gc-trk{position:relative;height:8px;border-radius:99px;background:#E8EBEF;overflow:hidden}
.gc-trk i{position:absolute;inset-block:0;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--molten))}
.gc-trk i.max{background:repeating-linear-gradient(45deg,rgba(245,138,46,.75) 0 4px,rgba(245,138,46,.35) 4px 8px)}
.gc-sheet{font-size:14px;color:#5A6675}
.gc-uses{display:flex;flex-wrap:wrap;gap:7px}
.gc-uses span{padding:7px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line-d);font-size:13px;line-height:1.3}
.gc-more{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:22px;font-size:13px;color:#6b7686}
.gc-more button{font:500 12px/1 var(--mono);padding:7px 11px;border-radius:999px;border:1px solid var(--line-d);background:#fff;color:var(--ink);transition:border-color .25s,color .25s}
.gc-more button:hover{border-color:var(--ember);color:var(--ember-lo)}
.gc-note{margin-top:18px;font-size:12px;line-height:1.8;color:#7a8595}
@media (max-width:900px){
  .g-try{justify-content:flex-start}
  .gcard{grid-template-columns:minmax(0,1fr);margin-top:-26px}
}
@media (max-width:420px){.gc-el{grid-template-columns:30px minmax(0,1fr) 82px;gap:8px}.gc-act .btn{flex:1 1 100%}}

/* ---------- weight calculator ---------- */
.wcalc{background:var(--ink-1);overflow:hidden}
.wcalc::before{content:"";position:absolute;inset:auto -10% -40% auto;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(224,65,44,.16),rgba(245,138,46,.05) 55%,transparent);pointer-events:none}
html[dir="rtl"] .wcalc::before{inset:auto auto -40% -10%}
.wc{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-top:clamp(44px,6vh,70px);border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.025);overflow:hidden}
.wc-in-panel{padding:clamp(22px,3vw,40px)}
.wc-lab{font-size:13px;color:var(--smoke);margin-bottom:12px}
.wc-shapes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.wc-shapes button{display:grid;justify-items:center;gap:8px;padding:14px 6px 12px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--mist);font-size:12.5px;font-weight:650;line-height:1.3;transition:border-color .3s,background-color .3s,color .3s}
.wc-shapes button:hover{border-color:var(--line-2);color:#fff}
.wc-shapes button.on{border-color:var(--molten);background:rgba(245,138,46,.08);color:#fff}
.wc-shapes svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6}
.wc-shapes button.on svg{stroke:var(--molten)}
.wc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;margin-top:22px}
.wc-f{display:grid;min-width:0}
.wc-f.full{grid-column:1/-1}
.wc-f>span:first-child{font-size:13px;color:var(--smoke);margin-top:14px}
.wc-in{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line-2);transition:border-color .3s}
.wc-f:focus-within .wc-in{border-bottom-color:var(--molten)}
.wc-f.bad .wc-in{border-bottom-color:var(--ember)}
.wc-in input,.wc-in select{flex:1;width:0;min-width:0;height:48px;padding:0;border:0;background:transparent;color:var(--white);font:700 20px/1 var(--lat);outline:none;font-variant-numeric:tabular-nums}
.wc-in select{font:600 15px/1 var(--fa);cursor:pointer;appearance:none;-webkit-appearance:none}
.wc-in select option{background:var(--ink-2);color:var(--white)}
.wc-in em{font-style:normal;font-size:13px;color:var(--smoke);flex:none}
html[lang="en"] .wc-in select,html[lang="tr"] .wc-in select{font-family:var(--lat)}
.wc-hint{margin-top:20px;font-size:12.5px;color:var(--smoke)}
.wc-out{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3vw,40px);border-inline-start:1px solid var(--line);background:linear-gradient(160deg,rgba(245,138,46,.07),rgba(224,65,44,.02) 45%,transparent)}
.wc-fig{width:100%;max-width:260px;height:auto;align-self:center}
.wc-fig .dm{stroke:var(--smoke);stroke-width:1;stroke-dasharray:3 3}
.wc-fig .dt{fill:var(--mist);font:600 12px var(--mono);text-anchor:middle}
.wc-total{display:grid;gap:4px}
.wc-total small{font-size:13px;color:var(--smoke)}
.wc-total b{font:850 clamp(38px,4.6vw,58px)/1.1 var(--lat);letter-spacing:-.02em;background:linear-gradient(100deg,var(--hot),var(--molten) 45%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.wc-total b span{font-size:.42em;font-weight:700;letter-spacing:0}
html[lang="fa"] .wc-total b,html[lang="ar"] .wc-total b{font-family:var(--fa)}
.wc-size{font-size:12.5px;color:var(--smoke);justify-self:start}
.wc-rows{display:grid;margin:0}
.wc-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-block:11px;border-bottom:1px solid var(--line)}
.wc-rows div:last-child{border:0}
.wc-rows dt{font-size:13.5px;color:var(--mist)}
.wc-rows dd{margin:0;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.wc-rows dd small,.wc-rows dd span{font-size:12px;font-weight:500;color:var(--smoke)}
.wc-out .btn{width:100%;margin-top:auto}
/* ---------- live 3D model (calc3d.js) ---------- */
.wc-3d{position:relative;width:100%;height:250px;border-radius:8px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,rgba(245,138,46,.12),transparent 62%)}
.wc-3d .wc-fig{display:block;width:100%;max-width:260px;height:100%;margin:0 auto}
.wc-3d.gl .wc-fig{display:none}
.wc3d-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.wc3d-cv.drag{cursor:grabbing}
.wc3d-ui{position:absolute;inset:0;pointer-events:none}
.wc-3d:not(.gl) .wc3d-ui{display:none}
.wc3d-qty{position:absolute;top:10px;inset-inline-start:10px;padding:4px 11px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--mist)}
.wc3d-qty:empty{display:none}
.wc3d-hint{position:absolute;bottom:16px;inset-inline-start:12px;font-size:11.5px;color:var(--smoke)}
@media (max-width:640px){.wc-3d{height:220px}}

@media (max-width:980px){
  .wc{grid-template-columns:minmax(0,1fr)}
  .wc-out{border-inline-start:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .wc-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wc-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .wc-out .btn{height:auto;min-height:52px;white-space:normal;padding-block:12px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){.gcard.pop{animation:none}}