/* ══════════════════════════════════════════════════════════════════
   BRILLIANCE — tokens, reset, HUD, dock, screens.
   One breakpoint at 620px, reduced motion honoured, safe-area insets
   in every fixed offset. No preprocessor, no imports.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --rose:#e11d48; --ice:#a5e7f0; --gold:#e8c96a; --leak:#f0724d; --ok:#7ee0a8;
  --fg:#f0e8ec; --dim:#a08c94; --card:rgba(22,12,17,.92); --line:rgba(225,29,72,.24);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#0a0509;color:var(--fg);font-family:var(--sans);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
@supports(height:100dvh){html,body{height:100dvh}}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--rose)}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vig{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 42%,transparent 50%,rgba(4,2,4,.88) 100%)}
#tags{position:absolute;inset:0;z-index:2;pointer-events:none;display:none;overflow:hidden}
body.play #tags{display:block}
.tag3{position:absolute;top:0;left:0;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:.5rem;letter-spacing:.14em;color:var(--dim);text-shadow:0 1px 6px #000}

#hud{position:absolute;inset:0;z-index:3;pointer-events:none;display:none}
body.play #hud{display:block}
#top{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:0;right:0;
  display:flex;gap:8px;justify-content:space-between;padding:0 10px;align-items:flex-start}
#brief{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 12px;max-width:min(268px,52vw)}
#brief .nm{font-size:.84rem;font-weight:650}
#brief .sp{font-size:.55rem;letter-spacing:.1em;color:var(--rose);margin-top:3px}
#brief .no{font-size:.66rem;line-height:1.5;color:var(--dim);margin-top:5px}
#score{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 12px;text-align:right}
#score .k{display:block;font-size:.44rem;letter-spacing:.17em;color:var(--dim)}
#score .v{display:block;font-size:1.05rem;font-weight:700;font-family:var(--mono)}

#meters{position:absolute;right:10px;top:calc(100px + env(safe-area-inset-top,0px));
  width:min(206px,44vw);background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px;pointer-events:auto}
#meters .hd{font-size:.44rem;letter-spacing:.17em;color:var(--dim);margin-bottom:8px}
.mt{margin-bottom:9px}
.mt .lb{display:flex;justify-content:space-between;font-size:.52rem;letter-spacing:.07em;margin-bottom:3px}
.mt .lb em{font-style:normal;font-family:var(--mono);font-weight:700}
.mt .bar{height:7px;border-radius:4px;background:rgba(160,140,148,.18);overflow:hidden}
.mt .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a3f52,var(--ice))}
.mt.leak .bar i{background:linear-gradient(90deg,#7a3a2a,var(--leak))}
.mt.fire .bar i{background:linear-gradient(90deg,#6a4f22,var(--gold))}
#grade{margin-top:10px;text-align:center;font-size:.62rem;letter-spacing:.16em;padding:7px;border-radius:8px;
  border:1px solid rgba(225,29,72,.2)}
#grade.ex{color:var(--ok);border-color:rgba(126,224,168,.4)}
#grade.vg{color:var(--ice)} #grade.pr{color:var(--leak);border-color:rgba(240,114,77,.4)}

#coach{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(226px + env(safe-area-inset-bottom,0px));width:min(430px,90vw);text-align:center;
  font-size:.7rem;line-height:1.65;color:var(--dim);text-shadow:0 1px 6px #000;opacity:0;transition:opacity .3s}
#coach.on{opacity:1} #coach b{color:var(--fg);font-weight:600}

#dock{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(470px,95vw);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;pointer-events:auto}
.knob{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.knob .lb{flex:0 0 96px;font-size:.46rem;letter-spacing:.13em;color:var(--dim);line-height:1.35}
.knob input{flex:1 1 auto;height:26px;accent-color:var(--rose);cursor:pointer}
.knob em{flex:0 0 58px;font-style:normal;font-family:var(--mono);font-size:.72rem;text-align:right}
.knob em.ok{color:var(--ok)}
#acts{display:flex;gap:8px;margin-top:3px}
#acts button{flex:1 1 0;min-height:52px;border-radius:10px;border:1px solid var(--line);
  background:rgba(225,29,72,.12);display:flex;flex-direction:column;justify-content:center;gap:2px}
#acts button .n{font-size:.72rem;letter-spacing:.11em;font-weight:650}
#acts button .c{font-size:.5rem;color:var(--dim)}
#btnRays{border-color:rgba(165,231,240,.4)!important;background:rgba(165,231,240,.1)!important}
#btnIdeal{border-color:rgba(232,201,106,.4)!important;background:rgba(232,201,106,.1)!important}
#btnPolish{border-color:rgba(126,224,168,.5)!important;background:rgba(126,224,168,.13)!important}
#btnPolish .n{color:#a8f0c8}

.screen{position:fixed;inset:0;z-index:10;display:none;background:rgba(7,4,7,.95);overflow-y:auto}
.screen.on{display:block}
.panel{max-width:560px;margin:0 auto;padding:max(28px,env(safe-area-inset-top,0px)) 22px 44px;text-align:center}
.panel h1{font-size:clamp(1.9rem,8.5vw,2.9rem);letter-spacing:.1em;line-height:1.05;font-weight:300}
.panel h1 b{color:var(--rose);font-weight:700}
.tagline{font-size:.55rem;letter-spacing:.24em;color:var(--rose);margin:12px 0 20px}
.panel p{font-size:.82rem;line-height:1.8;margin-bottom:14px;color:#ecdfe4}
.rules{text-align:left;margin:20px 0}
.rule{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;font-size:.76rem;line-height:1.6}
.rule i{flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;font-style:normal;
  font-size:.6rem;font-weight:700;background:rgba(225,29,72,.14);color:var(--rose);border:1px solid var(--line)}
.rule i.c{background:rgba(165,231,240,.14);color:var(--ice);border-color:rgba(165,231,240,.34)}
.rule b{color:#fff;font-weight:650}
.btn{display:block;width:100%;margin:14px 0 0;padding:15px;min-height:54px;border-radius:11px;
  border:1px solid var(--rose);background:rgba(225,29,72,.15);font-size:.78rem;letter-spacing:.17em}
.btn:hover{background:rgba(225,29,72,.26)}
.btn.ghost{border-color:rgba(225,29,72,.2);background:transparent;color:var(--dim)}
.keys{font-size:.62rem;line-height:2;color:var(--dim);margin-top:16px}
.keys b{color:var(--fg);font-weight:500}
.togs{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tog{padding:10px 14px;min-height:44px;line-height:22px;border-radius:9px;border:1px solid rgba(225,29,72,.2);
  font-size:.56rem;letter-spacing:.11em;color:var(--dim)}
.tog.on{color:var(--rose);border-color:rgba(225,29,72,.5)}
.site-link{display:inline-block;margin-top:18px;font-size:.62rem;letter-spacing:.14em;text-decoration:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;margin:16px 0}
.cards div{border:1px solid var(--line);border-radius:10px;padding:10px;background:rgba(22,12,17,.7)}
.cards .k{display:block;font-size:.45rem;letter-spacing:.16em;color:var(--dim)}
.cards .v{display:block;font-size:1.02rem;font-weight:700;margin-top:2px}
.verdict{font-size:1.45rem;letter-spacing:.05em;margin:8px 0 2px;color:var(--ok)}
.verdict.mid{color:var(--gold)} .verdict.low{color:var(--leak)}
.notes{text-align:left;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.note{display:flex;gap:10px;font-size:.74rem;line-height:1.6;margin-bottom:10px}
.note em{flex:0 0 78px;font-style:normal;font-family:var(--mono);font-size:.58rem;color:var(--dim);padding-top:2px}
.note s{text-decoration:none;color:#e4d6db} .note s b{color:#fff}
.read{border:1px solid var(--line);border-radius:10px;background:rgba(22,12,17,.6);
  padding:12px 14px;margin-top:16px;text-align:left;font-size:.72rem;line-height:1.85;color:var(--dim)}
.read b{display:block;font-size:.48rem;letter-spacing:.2em;color:var(--rose);margin-bottom:6px;font-weight:400}
.read a{display:inline-block;margin-right:12px}
@media (max-width:620px){
  #meters{width:min(160px,42vw);top:calc(96px + env(safe-area-inset-top,0px));padding:8px}
  #coach{bottom:calc(240px + env(safe-area-inset-bottom,0px))}
  #acts button .c{display:none}
  .knob .lb{flex:0 0 78px}
}
@media (prefers-reduced-motion: reduce){ #coach{transition:none} }

/* ══════════════════════════════════════════════════════════════════
   THE BENCH
   Desktop: two panels flanking the viewport, verdict beneath.
   Mobile: the stone pinned to the top, one panel at a time under it.
   The canvas is always the background; panels float over it.
   ══════════════════════════════════════════════════════════════════ */
#topbar{position:absolute;top:0;left:0;right:0;z-index:6;display:none;align-items:center;gap:10px;
  padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
  background:linear-gradient(180deg,rgba(10,5,9,.94),rgba(10,5,9,0))}
body.bench #topbar,body.compare #topbar{display:flex}
#topbar .brand{font-size:.7rem;letter-spacing:.16em;font-weight:300}
#topbar .brand b{color:var(--rose);font-weight:700}
#topbar .spacer{flex:1 1 auto}
.shapepick select{background:rgba(22,12,17,.85);border:1px solid var(--line);border-radius:8px;
  color:var(--fg);font-family:var(--sans);font-size:.55rem;letter-spacing:.1em;padding:0 8px;
  min-height:44px;cursor:pointer}
.modes{display:flex;gap:2px;background:rgba(22,12,17,.8);border:1px solid var(--line);border-radius:9px;padding:2px}
.modes button{padding:7px 11px;min-height:44px;border-radius:7px;font-size:.5rem;letter-spacing:.13em;color:var(--dim)}
.modes button.on{background:rgba(225,29,72,.2);color:var(--fg)}
#topbar .tog{padding:7px 12px;min-height:44px}
/* Compare has no stone on the canvas, so there is nothing to trace through. */
body.compare #tog-rays{display:none}
.site-link.tiny{margin:0;font-size:.5rem}

#bench{position:absolute;inset:0;z-index:5;display:none;pointer-events:none}
body.bench #bench{display:block}
.bpanel{position:absolute;pointer-events:auto;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:11px;overflow-y:auto;overscroll-behavior:contain}
.bpanel.left{left:10px;top:56px;bottom:150px;width:min(310px,32vw)}
.bpanel.right{right:10px;top:56px;bottom:150px;width:min(300px,30vw)}
/* Desktop: a strip along the bottom edge of the viewport, out of the way
   of the stone. Mobile: a full-width carousel, one map per screen — a
   four-across strip on a phone is four things you cannot read. */
.bpanel.maps{left:calc(min(310px,32vw) + 20px);right:calc(min(300px,30vw) + 20px);
  top:56px;padding:8px;max-height:250px;overflow:hidden}
.mapstrip{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory}
/* A scrolling region has to be reachable by keyboard, or its content is
   simply unavailable to anyone not using a pointer. */
.mapstrip:focus-visible,.bpanel:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.mapcell{flex:0 0 auto;width:136px;scroll-snap-align:center}

.mapcell canvas{width:136px;height:136px;display:block;border-radius:8px;background:#0a0509;
  image-rendering:auto}
.mapcell figcaption{margin-top:4px}
.mapcell figcaption b{display:block;font-size:.46rem;letter-spacing:.16em;color:var(--rose);font-weight:400}
.mcap{display:none;font-size:.46rem;line-height:1.5;color:var(--dim)}
.mdesc{display:none;font-size:.46rem;line-height:1.55;color:var(--dim)}
.macts{display:flex;gap:4px;margin-top:4px}
.mbtn{flex:1 1 0;min-height:26px;border:1px solid var(--line);border-radius:6px;
  font-size:.42rem;letter-spacing:.08em;color:var(--dim)}
.mtable{margin-top:5px;max-height:120px;overflow-y:auto}
.mtable table{width:100%;border-collapse:collapse;font-size:.42rem}
.mtable th,.mtable td{padding:2px;border-bottom:1px solid rgba(225,29,72,.1);color:var(--dim);text-align:right}
.mtable th:first-child,.mtable td:first-child{text-align:left}
.mnote{font-size:.4rem;line-height:1.5;color:var(--dim);margin-top:4px}
/* Hatching, so ASET's red/green pair is not the only signal. */
body.hatch .mapcell canvas{
  -webkit-mask-image:repeating-linear-gradient(45deg,#000 0 3px,rgba(0,0,0,.55) 3px 6px);
  mask-image:repeating-linear-gradient(45deg,#000 0 3px,rgba(0,0,0,.55) 3px 6px)}
.bhead{font-size:.44rem;letter-spacing:.18em;color:var(--dim);margin:12px 0 6px;font-weight:400}

/* ── a proportion row: the control is the chart ── */
.prow{margin-bottom:9px}
.prow[hidden]{display:none}
.phead{display:flex;align-items:baseline;gap:6px;margin-bottom:3px}
.pname{flex:1 1 auto;font-size:.56rem;letter-spacing:.06em;color:var(--dim);line-height:1.3}
.prow.is-simple .pname{font-size:.62rem;color:#cdbcc3}
.pfit{font-family:var(--mono);font-size:.6rem}
.pfit.in{color:var(--ok)} .pfit.edge{color:var(--gold)} .pfit.out{color:var(--leak)}
.pval{font-family:var(--mono);font-size:.66rem;min-width:52px;text-align:right}
.pnum{width:62px;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:6px;
  color:var(--fg);font-family:var(--mono);font-size:.64rem;padding:3px 5px;text-align:right}
.pnum[hidden]{display:none}
.ptrack{position:relative;height:26px;display:flex;align-items:center}
.pbands{position:absolute;left:0;right:0;top:9px;height:8px;border-radius:4px;
  background-color:rgba(160,140,148,.14);background-repeat:no-repeat;pointer-events:none}
.pslide{position:relative;width:100%;height:26px;cursor:pointer;background:none;
  -webkit-appearance:none;appearance:none}
/* The native track is opaque and would hide the tolerance shading behind
   it, which is the whole point of the control. Strip it and let the bands
   show through; the thumb is drawn by hand. */
.pslide::-webkit-slider-runnable-track{height:8px;background:transparent}
.pslide::-moz-range-track{height:8px;background:transparent}
.pslide::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--rose);border:2px solid #170c11;margin-top:-4px;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.pslide::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:2px solid #170c11;
  background:var(--rose);box-shadow:0 1px 4px rgba(0,0,0,.6)}
.ptell{font-size:.52rem;line-height:1.45;color:var(--dim)}
.ptell.edge{color:var(--gold)} .ptell.out{color:var(--leak)}

.bsel{display:flex;gap:8px;margin-top:8px}
.bsel label{flex:1 1 0;font-size:.46rem;letter-spacing:.13em;color:var(--dim)}
.bsel select{width:100%;margin-top:3px;background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:6px;color:var(--fg);font-family:var(--mono);font-size:.64rem;padding:5px;min-height:44px}
#bpresets{display:flex;flex-wrap:wrap;gap:5px}
.pbtn{border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-height:44px;
  font-size:.5rem;letter-spacing:.08em;color:var(--dim);background:rgba(225,29,72,.07)}
.pbtn:hover{color:var(--fg);border-color:rgba(225,29,72,.5)}

/* ── grade ── */
.bgcard{border:1px solid var(--line);border-radius:10px;padding:10px;background:rgba(10,5,9,.5)}
.bgtop{display:flex;align-items:center;gap:8px}
.bg-grade{font-size:1.5rem;font-weight:700;font-family:var(--mono)}
.bg-grade.g-EX{color:var(--ok)} .bg-grade.g-VG{color:var(--ice)}
.bg-grade.g-G{color:var(--gold)} .bg-grade.g-F,.bg-grade.g-P{color:var(--leak)}
.chip{font-size:.4rem;letter-spacing:.14em;color:var(--dim);border:1px solid var(--line);
  border-radius:5px;padding:3px 5px;line-height:1.2}
.bg-label{font-size:.56rem;line-height:1.5;color:#cdbcc3;margin-top:5px}
.bgrow{display:flex;justify-content:space-between;font-size:.52rem;letter-spacing:.06em;
  color:var(--dim);margin-top:6px}
.bgrow em{font-style:normal;font-family:var(--mono);color:var(--fg)}
.bg-windows{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
/* display:flex outranks the user agent's [hidden]{display:none}, so
   without this the round-only window badges stayed on screen for every
   fancy shape — the exact thing hiding them was meant to prevent. */
.bg-windows[hidden]{display:none}
.wbadge{font-size:.44rem;letter-spacing:.09em;border-radius:5px;padding:3px 5px;border:1px solid}
.wbadge.in{color:var(--ok);border-color:rgba(126,224,168,.45)}
.wbadge.out{color:var(--dim);border-color:rgba(160,140,148,.22)}
#bg-components table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.5rem}
#bg-components td{padding:3px 2px;border-bottom:1px solid rgba(225,29,72,.1);color:var(--dim)}
#bg-components td.g{font-family:var(--mono);color:var(--fg);width:34px}
#bg-components td.v{font-family:var(--mono);text-align:right}
#bg-components tr.lim td{color:var(--gold)}
#bg-components .prov{font-size:.42rem;line-height:1.6;color:var(--dim);margin-top:6px}
.bmetrics{display:grid;grid-template-columns:1fr;gap:2px}
.bmetrics div{display:flex;justify-content:space-between;font-size:.5rem;letter-spacing:.05em;color:var(--dim)}
.bmetrics em{font-style:normal;font-family:var(--mono);color:var(--fg)}
.bdis{font-size:.42rem;line-height:1.65;color:var(--dim);margin-top:10px;
  border-top:1px solid var(--line);padding-top:8px}

/* ── the light-path legend ──
   A transient coach line would not do here: the paths stay on screen for
   as long as you are working, so what the two colours mean has to stay
   with them. */
#raykey{position:absolute;left:50%;transform:translateX(-50%);display:none;gap:6px 16px;
  bottom:calc(118px + env(safe-area-inset-bottom,0px));align-items:center;flex-wrap:wrap;
  justify-content:center;padding:6px 12px;border-radius:9px;background:rgba(10,5,9,.74);
  border:1px solid var(--line);font-size:.5rem;letter-spacing:.09em;color:#cdbcc3;
  pointer-events:none;max-width:94vw}
body.bench.rays #raykey{display:flex}
#raykey i{display:inline-block;width:18px;height:2px;border-radius:2px;margin-right:6px;vertical-align:middle}
#raykey .k-ret{background:#9eebff;box-shadow:0 0 6px rgba(158,235,255,.85)}
#raykey .k-leak{background:#ff7047;box-shadow:0 0 6px rgba(255,112,71,.85)}
#raykey .dim{color:var(--dim)}

/* ── verdict, always visible in every mode ── */
#bverdict{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(560px,94vw);
  pointer-events:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.bv-text{font-size:.72rem;line-height:1.65;color:#cdbcc3}
.bv-text b{color:var(--fg)}
.bv-text.tone-good b{color:var(--ok)} .bv-text.tone-mid b{color:var(--gold)}
.bv-text.tone-low b{color:var(--leak)}
.bv-bars{display:flex;gap:14px;margin-top:8px}
.bv-bar{flex:1 1 0;display:flex;align-items:center;gap:6px;font-size:.46rem;letter-spacing:.09em;color:var(--dim)}
.bv-bar span{flex:0 0 auto}
.bv-bar .bar{flex:1 1 auto;height:6px;border-radius:3px;background:rgba(160,140,148,.18);overflow:hidden}
.bv-bar .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a3f52,var(--ice));transition:width .25s}
.bv-bar.leak .bar i{background:linear-gradient(90deg,#7a3a2a,var(--leak))}
.bv-bar em{font-style:normal;font-family:var(--mono);font-size:.6rem;color:var(--fg);min-width:34px;text-align:right}
.bq{position:absolute;right:12px;top:-16px;font-size:.4rem;letter-spacing:.14em;color:var(--dim)}

/* #bench is pointer-transparent so the stone can be dragged through the
   gaps between panels; anything interactive has to opt back in. */
#btabs{display:none;pointer-events:auto}

/* ── COMPARE ── */
#compare{position:absolute;inset:44px 0 0;z-index:5;display:none;overflow-y:auto;
  background:#0a0509;padding:10px}
body.compare #compare{display:block}
#cmp-bar{display:flex;gap:10px;align-items:center;margin-bottom:10px;
  border:1px solid var(--line);border-radius:11px;padding:9px 11px;background:var(--card)}
.cmp-summary{flex:1 1 auto;font-size:.68rem;line-height:1.6;color:#cdbcc3}
#cmp-cols{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cmpcol{flex:1 1 220px;max-width:340px;border:1px solid var(--line);border-radius:11px;
  padding:9px;background:var(--card)}
.cmphead{display:flex;justify-content:space-between;align-items:center;gap:6px}
.cmphead b{font-size:.6rem;letter-spacing:.08em}
.cmpx{min-width:32px;min-height:32px;color:var(--dim);border-radius:6px}
.cmpx:hover{color:var(--leak)}
.cmpmaps{display:flex;gap:6px;margin:7px 0}
.cmpmaps canvas{flex:1 1 0;width:0;height:auto;aspect-ratio:1;border-radius:7px;background:#0a0509}
.cmpgrade{font-family:var(--mono);font-size:1.05rem;font-weight:700}
.cmpgrade span{display:block;font-family:var(--sans);font-size:.48rem;font-weight:400;color:var(--dim);letter-spacing:.06em}
.cmpnums{margin-top:6px}
.cmpnums div{display:flex;justify-content:space-between;font-size:.5rem;color:var(--dim)}
.cmpnums em{font-style:normal;font-family:var(--mono);color:var(--fg)}
#cmp-table table{width:100%;border-collapse:collapse;font-size:.54rem}
#cmp-table th{text-align:left;font-size:.44rem;letter-spacing:.14em;color:var(--rose);
  font-weight:400;padding:5px 4px;border-bottom:1px solid var(--line)}
#cmp-table td{padding:4px;border-bottom:1px solid rgba(225,29,72,.08);color:var(--dim)}
#cmp-table td.v,#cmp-table td.d{font-family:var(--mono);color:var(--fg)}
#cmp-table td.m{color:var(--dim)}
#cmp-table tr.hd td{color:var(--rose);letter-spacing:.14em;font-size:.44rem;padding-top:12px}
#cmp-table tr.notable td{color:#e4d6db}
#cmp-table tr.notable td.m i{font-style:normal;color:var(--gold);font-weight:700}
.cmpnote{font-size:.46rem;color:var(--dim);margin-top:8px}

/* ── report entry ── */
.pbtn.wide{width:100%;margin-top:8px;justify-content:center}
.pbtn.go{border-color:rgba(126,224,168,.5);background:rgba(126,224,168,.12);color:#a8f0c8}
#report{position:fixed;inset:0;z-index:20;background:rgba(7,4,7,.9);
  display:grid;place-items:center;padding:16px;overflow-y:auto}
#report[hidden]{display:none}
.repbox{width:min(620px,96vw);max-height:92vh;overflow-y:auto;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:16px}
.rephead{display:flex;justify-content:space-between;align-items:center}
.rephead b{font-size:.6rem;letter-spacing:.2em;color:var(--rose);font-weight:400}
.rephead button{min-width:44px;min-height:44px;color:var(--dim)}
.rep-lead{font-size:.62rem;line-height:1.65;color:var(--dim);margin:8px 0 10px}
#rep-text{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:9px;
  color:var(--fg);font-family:var(--mono);font-size:.62rem;line-height:1.6;padding:10px;resize:vertical;
  -webkit-user-select:text;user-select:text}
.repacts{display:flex;gap:8px;margin-top:10px}
/* same trap as .bg-windows: display:flex outranks [hidden]{display:none},
   and the optimizer's exits are a row of .repacts — without this, ADD TO
   COMPARE and APPLY sit there through the whole search, offering to hand
   you a stone that has not been found yet. */
.repacts[hidden]{display:none}
.repacts .pbtn{flex:1 1 0;min-height:48px;justify-content:center;font-size:.56rem}
.rep-out{margin-top:12px}
.rep-h{font-size:.56rem;letter-spacing:.1em;color:var(--ok);margin-bottom:6px}
.rep-t{width:100%;border-collapse:collapse;font-size:.56rem}
.rep-t td{padding:3px 4px;border-bottom:1px solid rgba(225,29,72,.1);color:var(--dim)}
.rep-t td.v{font-family:var(--mono);color:var(--fg);text-align:right;width:92px}
.rep-t td.n{color:var(--gold);font-size:.48rem;width:150px}
.rep-err{font-size:.58rem;line-height:1.6;color:var(--leak);margin-top:8px}
.rep-warn{font-size:.55rem;line-height:1.6;color:var(--gold);margin-top:6px}
.rep-un{font-size:.53rem;line-height:1.6;color:var(--dim);margin-top:8px;
  border-top:1px solid var(--line);padding-top:8px}
.rep-un b{color:var(--ice);font-weight:400;letter-spacing:.08em}
.rep-un pre{font-family:var(--mono);font-size:.5rem;white-space:pre-wrap;margin-top:5px}
.reconcile{font-size:.55rem;line-height:1.6;margin-top:8px;padding:8px 10px;border-radius:8px;
  border:1px solid}
.reconcile[hidden]{display:none}
.reconcile.agree{color:var(--ok);border-color:rgba(126,224,168,.4)}
.reconcile.differ{color:var(--gold);border-color:rgba(232,201,106,.45)}

/* ── optimizer ── */
#optimize{position:fixed;inset:0;z-index:20;background:rgba(7,4,7,.9);
  display:grid;place-items:center;padding:16px;overflow-y:auto}
#optimize[hidden]{display:none}
.optrow{display:flex;align-items:center;gap:8px;font-size:.58rem;color:var(--dim);margin-top:10px}
.optrow select,.optrow input{background:rgba(0,0,0,.4);border:1px solid var(--line);border-radius:7px;
  color:var(--fg);font-size:.6rem;padding:8px;min-height:44px}
.optrow select{flex:1 1 auto}
.optrow input{width:96px;font-family:var(--mono);text-align:right}
.optprog{display:flex;gap:10px;align-items:center;margin-top:12px}
#opt-surface{width:240px;height:120px;border-radius:8px;background:#0a0509;image-rendering:pixelated}
.optbarwrap{flex:1 1 auto;font-size:.5rem;color:var(--dim)}
.optbar{height:7px;border-radius:4px;background:rgba(160,140,148,.18);overflow:hidden;margin-bottom:5px}
.optbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7a3f52,var(--ice));transition:width .2s}
.optbarwrap span{display:block;line-height:1.5}
.opt-h{font-size:.56rem;color:var(--ok);margin-bottom:4px}
.opt-grade{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--ok)}
.opt-metrics{font-size:.52rem;color:var(--dim);margin:3px 0 6px}
.opt-t{width:100%;border-collapse:collapse;font-size:.56rem}
.opt-t td{padding:3px 4px;border-bottom:1px solid rgba(225,29,72,.1);color:var(--dim)}
.opt-t td.v{font-family:var(--mono);color:var(--fg);text-align:right}
.opt-none{font-size:.58rem;color:var(--gold)}
@media (prefers-reduced-motion: reduce){ .optbar i{transition:none} }
@media (max-width:620px){
  #compare{inset:44px 0 0;padding:8px}
  .cmpcol{flex:1 1 100%;max-width:none}
  #cmp-table{overflow-x:auto}
  #cmp-table table{min-width:520px}
}

@media (prefers-reduced-motion: reduce){ .bv-bar .bar i{transition:none} }

/* ══════════════════════════════════════════════════════════════════
   CHISEL — the tool on the left, the stone on the right, the ways out
   along the bottom. Borrows the Bench's panel chrome wholesale: it is
   the same room with a different bench in it, and inventing a second
   set of panels would only give the two of them somewhere to drift.
   ══════════════════════════════════════════════════════════════════ */
#chisel{position:absolute;inset:0;z-index:5;display:none;pointer-events:none}
body.chisel #chisel{display:block}
body.chisel #topbar{display:flex}
/* The Bench's own actions have nothing to act on in here, and the shape
   picker does — it decides what you are cutting into. */
body.chisel #btn-compare,body.chisel #btn-share,body.chisel #btn-save,
body.chisel #tog-rays,body.chisel #tog-hatch,body.chisel #tog-detail,
body.chisel #btn-tochisel{display:none}
body.compare #btn-tochisel{display:none}

.bhead.first{margin-top:0}
.crow{display:flex;gap:6px;margin-top:8px}
.crow .pbtn{flex:1 1 0;justify-content:center;text-align:center}
.cfolds{display:flex;gap:4px;margin-top:6px}
.cfolds .pbtn{flex:1 1 0;min-width:0;padding:7px 2px;text-align:center}
.cfolds .pbtn.on{color:var(--fg);border-color:rgba(165,231,240,.55);background:rgba(165,231,240,.14)}
.cprev{margin-top:9px;font-size:.52rem;line-height:1.5;color:var(--ice);font-family:var(--mono)}
.cprev.miss{color:var(--leak)}
.pbtn.off{opacity:.45;cursor:not-allowed}
.chint{margin-top:10px;font-size:.44rem;line-height:1.7;color:var(--dim)}
.chint b{color:#cdbcc3;font-weight:600}
.cverdict{font-size:.62rem;line-height:1.65;color:#cdbcc3;margin-bottom:10px}
.cverdict.good{color:var(--ok)} .cverdict.mid{color:var(--gold)} .cverdict.low{color:var(--leak)}
.bmetrics .wide2{border-top:1px solid rgba(225,29,72,.14);margin-top:4px;padding-top:4px}
.cstroke{display:flex;align-items:center;gap:6px;font-size:.5rem;color:var(--dim);
  font-family:var(--mono);border-bottom:1px solid rgba(225,29,72,.1);padding:2px 0}
.cstroke span{flex:1 1 auto}
.cempty{font-size:.5rem;color:var(--dim)}
#cexport{position:absolute;left:50%;transform:translateX(-50%);pointer-events:auto;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:6px}
#cexport .tog{padding:8px 12px;min-height:44px}

/* ── mobile: the stone stays put, one panel at a time under it ── */
@media (max-width:860px){
  .bpanel.left{width:min(280px,42vw)}
  .bpanel.right{width:min(260px,38vw)}
}
@media (max-width:620px){
  body.bench #gl{inset:auto 0 auto 0;top:0;height:44vh}
  body.bench #vig{inset:auto 0 auto 0;top:0;height:44vh}
  /* Five actions plus the mode switcher will not fit across a phone, and
     letting them run off the edge silently loses the share and export
     buttons entirely. Wrap onto a second line over the stone instead. */
  #topbar{padding-bottom:4px;flex-wrap:wrap;row-gap:4px}
  #topbar .brand,#topbar .site-link{display:none}
  #topbar .spacer{display:none}
  #topbar .tog{padding:7px 9px;font-size:.5rem}
  .modes button{padding:8px 9px}
  .shapepick select{min-height:44px;font-size:.5rem}
  #bench{background:#0a0509;top:44vh;overflow:hidden}
  body.bench #bench{display:flex;flex-direction:column}
  #bverdict{position:static;transform:none;width:auto;margin:6px 8px 0;border-radius:10px;padding:9px 11px}
  /* The stone is a strip along the top on a phone, so the legend cannot
     float over it — it goes at the head of the column instead, directly
     under the paths it explains. */
  #raykey{position:static;transform:none;bottom:auto;order:0;margin:6px 8px 0}
  .bv-text{font-size:.66rem}
  .bq{display:none}
  /* Under the stone: the verdict first, because it is the answer, then the
     tabs within thumb reach, then whichever panel is open. */
  #bverdict{order:1}
  #btabs{order:2;display:flex;gap:4px;margin:8px 8px 0;flex:0 0 auto}
  .bpanel{order:3}
  #btabs button{flex:1 1 0;min-height:44px;border-radius:9px;border:1px solid var(--line);
    font-size:.5rem;letter-spacing:.13em;color:var(--dim);background:rgba(22,12,17,.7)}
  #btabs button.on{color:var(--fg);border-color:rgba(225,29,72,.5);background:rgba(225,29,72,.16)}
  .bpanel{position:static;display:none;margin:8px;flex:1 1 auto;min-height:0;width:auto!important}
  .bpanel.tab-on{display:block}
  .bpanel.maps.tab-on{display:block;max-height:none}
  .mapstrip{gap:12px}
  .mapcell{width:calc(100vw - 52px)}
  .mapcell canvas{width:100%;height:auto;aspect-ratio:1}
  .mcap,.mdesc{display:block}
  .mbtn{min-height:44px;font-size:.46rem}

  /* The Chisel has two panels and no maps, so it stacks rather than
     tabbing: a tool you cannot see while you are aiming it is worse than
     a scroll. The stone keeps the top of the screen, as on the Bench. */
  body.chisel #gl,body.chisel #vig{inset:auto 0 auto 0;top:0;height:42vh}
  #chisel{background:#0a0509;top:42vh;overflow-y:auto;overscroll-behavior:contain}
  body.chisel #chisel{display:block;pointer-events:auto}
  #chisel .bpanel{position:static;display:block;margin:8px;width:auto!important;
    max-height:none;overflow:visible}
  #cexport{position:static;transform:none;margin:8px;flex-wrap:wrap;justify-content:center}
  #cexport .tog{flex:1 1 auto;justify-content:center;text-align:center}
}