/* 6.11 owner: stone explorer — chips + one card with a visual per spec (replaces the 7 static tiles) */
.st-x{min-width:0;display:grid;gap:12px}
.se-tabs{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.se-tabs::-webkit-scrollbar{display:none}
.se-tabs button{flex:none;scroll-snap-align:center;display:grid;gap:1px;min-width:74px;padding:8px 14px 9px;border-radius:14px;border:1px solid var(--line);background:var(--ink2);color:var(--paper);font:inherit;text-align:center;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.se-tabs button span{font-size:11.5px;color:var(--mute)}
.se-tabs button b{font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap}
.se-tabs button[aria-selected="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.se-tabs button[aria-selected="true"] span{color:inherit;opacity:.7}
.se-panel{position:relative;padding:18px 18px 16px;border:1px solid var(--line);border-radius:18px;background:var(--ink2);cursor:pointer;-webkit-user-select:none;user-select:none}
.se-panel.in>*{animation:seIn .45s cubic-bezier(.2,.8,.2,1) both}
.se-panel.in>*:nth-child(2){animation-delay:.05s}.se-panel.in>*:nth-child(3){animation-delay:.1s}
@keyframes seIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.se-head{display:flex;align-items:baseline;gap:10px}
.se-big{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.01em}
.se-unit{font-size:14px;color:var(--mute);font-weight:600}
.se-txt{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--body)}
.se-viz{display:grid;gap:8px}
.se-viz:not(:empty){margin-top:14px}
.se-fine{margin:0;font-size:11.5px;color:var(--mute)}
.se-prog{display:flex;justify-content:center;gap:6px}
.se-prog i{width:6px;height:6px;border-radius:3px;background:var(--line);transition:width .3s,background .3s}
.se-prog i.on{width:18px;background:var(--paper)}
.se-held .se-prog{opacity:.6}
/* scales (colour / clarity) */
.se-scale{display:flex;gap:3px}
.se-scale span{display:grid;gap:3px;text-align:center;padding:7px 2px 6px;border-radius:9px;background:rgba(255,255,255,.05);color:var(--mute);min-width:0}
.se-scale span b{font-size:12.5px;color:var(--paper);opacity:.55;white-space:nowrap}
.se-scale span small{font-size:10.5px;line-height:1.25}
.se-scale span.on{background:var(--paper);color:var(--ink)}
.se-scale span.on b{color:var(--ink);opacity:1}
.se-grad{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,#fff 0%,#fffdf6 22%,#fbf1d2 48%,#f2dc9a 72%,#e8c768 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);direction:ltr}
[dir=rtl] .se-grad,.se-grad{transform:scaleX(-1)}
.se-grad i{position:absolute;left:4%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid #111;box-shadow:0 1px 5px rgba(0,0,0,.35)}
/* bars (hardness / fire) */
.se-bars{display:grid;gap:9px}
.se-bar{display:grid;grid-template-columns:62px 1fr 42px;align-items:center;gap:10px;font-size:13px;color:var(--mute)}
.se-bar i{height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.se-bar em{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--mute);transform-origin:right;animation:seGrow .9s cubic-bezier(.2,.8,.2,1) both}
.se-bar.us{color:var(--paper);font-weight:700}
.se-bar.us em{background:var(--paper)}
.se-bar b{font-size:13px;text-align:left}
@keyframes seGrow{from{transform:scaleX(0)}to{transform:none}}
/* sizes */
.se-sizes{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;min-height:72px}
.se-sizes span{display:grid;justify-items:center;gap:6px;color:var(--mute);font-size:12px}
.se-sizes svg{display:block;overflow:visible;color:var(--mute)}
.se-sizes svg .g{fill:rgba(255,255,255,.04);stroke:currentColor;stroke-width:1.6}
.se-sizes svg .s{fill:none;stroke:currentColor;stroke-width:.9;opacity:.6}
.se-sizes svg .t{fill:none;stroke:currentColor;stroke-width:1.2}
.se-sizes span.on{color:var(--paper);font-weight:700}
.se-sizes span.on svg{color:var(--paper);animation:sePop .5s cubic-bezier(.3,1.5,.5,1) both}
.se-sizes span.on svg .g{stroke-width:2.2;fill:rgba(255,255,255,.1)}
@keyframes sePop{from{transform:scale(.6)}to{transform:none}}
/* cut / cert */
.se-cut{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.se-arrow{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--paper);animation:seNudge 1.4s ease-in-out infinite}
@keyframes seNudge{50%{transform:translateY(-4px)}}
.se-cert{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px}
.se-cert b{font-size:20px;letter-spacing:.08em}
.se-cert span{font-size:12.5px;color:var(--mute)}
/* light theme inverts the page: keep the colour scale's real yellow */
html[data-theme=light] .se-grad{filter:invert(1) hue-rotate(180deg)}
@media (min-width:900px){.se-big{font-size:46px}}
@media (prefers-reduced-motion:reduce){.se-panel.in>*,.se-bar em,.se-sizes span.on svg,.se-arrow{animation:none}}
@media (max-width:899px){.pd-stone-sec .st-fig{padding:14px 12px 12px;gap:4px}.pd-stone-sec .st-fig svg{width:min(118px,34vw)}.pd-stone-sec .st-grid{gap:12px}}

.se-panel.se-plain{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.se-panel.se-plain .se-head{flex-direction:column;align-items:center;gap:6px}
.se-panel.se-plain .se-txt{max-width:34ch}