/* Cut Performance Wheel. One window on the always-black stage, like the other tools: the live stone on the left,
   the wheel and its score list on the right, stacked below 900px. Only the disclaimer band follows the Black/White
   theme. Red, green and blue appear only in the light map and its key (House Style: RGB only where light is shown);
   the wheel and its difference are drawn in white, grey and hatching: solid white where the stone reaches further
   than what it is compared with, hatching where it falls short. */

.wrap.page-hero.cw-hero{padding-top:28px;padding-bottom:26px}

/* ---------- the bench ---------- */
.cw-bench{padding:8px 0 40px}
.cw-bench .wrap{min-width:0}
.cw :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cw-bench :focus-visible{outline-color:#fff}

/* the stone's pair, Swap, and the comparison's pair */
.cw-controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px 14px;border-radius:var(--r-panel);padding:14px 16px;margin:0 0 16px}
.cw-controls>*{position:relative}                         /* above the glass highlight */
.cw-pair{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;border:0;margin:0;padding:0;min-width:0}
.cw-swap{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;min-width:42px;padding:0 12px;
  font:inherit;font-size:.8125rem;font-weight:560;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);cursor:pointer}
.cw-swap:hover{background:rgba(255,255,255,.18)}
.cw-swap:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.06)}
.cw-swap svg{transform:rotate(90deg);flex:none}
.cw-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cw-field label{font-size:.875rem;font-weight:560;color:#fff}
.cw-field select{font:inherit;font-size:.9375rem;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-chip);padding:9px 12px;min-height:42px;width:100%}
.cw-field select option,.cw-field select optgroup{color:#000;background:#fff}

.cw-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:28px;align-items:start}
.cw-grid>*{min-width:0}

/* ---------- the stone ---------- */
.cw-stage{position:relative;aspect-ratio:1;width:100%;background:#000;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-panel);overflow:hidden}
.cw-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cw-gl{cursor:grab;touch-action:none}
.cw-gl:active{cursor:grabbing}
.cw-gl:focus-visible{outline-offset:-4px;border-radius:var(--r-panel)}
.cw-lines{pointer-events:none}
/* the light map is the face-up view and holds still: nothing to drag */
.cw-stage[data-mode="map"] .cw-gl{pointer-events:none;cursor:default}
.cw-stage .seg{position:absolute;left:14px;top:14px;z-index:2;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.18)}
.cw-stage .seg .thumb{opacity:0}
.cw-stage .seg.ready .thumb{opacity:1}
.cw-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;margin:0;max-width:80%;text-align:center;
  font-size:.875rem;line-height:1.4;color:#C8C8C8;background:rgba(0,0,0,.72);padding:8px 14px;border-radius:var(--r-chip)}
.cw-msg[hidden]{display:none}
/* without WebGL2 the stage only says why: no view toggle, no dragging hint */
.cw-nogl #cw-mode,.cw-nogl #cw-hint{display:none}
.cw-under{min-height:1.5em;margin:10px 2px 0;font-size:.8125rem;line-height:1.5;color:#A3A3A3;text-align:center}
.cw-under[hidden]{display:none}
.cw-key{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px}
.cw-key span{white-space:nowrap}
.cw-key .dot{margin-right:6px}
.cw-noscript{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;margin:0;
  text-align:center;font-size:.875rem;color:#A3A3A3}

/* ---------- the wheel ---------- */
.cw-fig{margin:0}
.cw-wheel{max-width:440px;margin:0 auto}
.cw-svg{display:block;width:100%;height:auto;overflow:visible}
.cw-ring{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1;stroke-dasharray:2 3}
.cw-ring-100{stroke:rgba(255,255,255,.34);stroke-dasharray:none}
.cw-spoke{stroke:rgba(255,255,255,.12);stroke-width:1}
.cw-tick{fill:#8C8C8C;font-size:10px;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#000;stroke-width:3px;stroke-linejoin:round}
.cw-ref{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round}
.cw-cut{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.cw-cut-alone{fill:rgba(255,255,255,.16)}
/* the difference: shared ground quiet, the lead solid white, the shortfall hatched */
.cw-shared{fill:rgba(255,255,255,.1)}
.cw-gain{fill:rgba(255,255,255,.72)}
.cw-loss{fill:url(#cw-hatch)}
.cw-hatch-l{stroke:rgba(255,255,255,.62);stroke-width:1.5}
.cw-delta{font-size:12px;font-weight:600;fill:#A3A3A3;font-variant-numeric:tabular-nums}
.cw-delta.cw-up{fill:#fff}
.cw-dot{fill:#fff;stroke:#000;stroke-width:1}
.cw-label{fill:#fff;font-size:13.5px;font-weight:500}
.cw-label-h{font-weight:650}
.cw-none{fill:#A3A3A3;font-size:14px;font-weight:500;paint-order:stroke;stroke:#000;stroke-width:4px}

.cw-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:6px 0 0;font-size:.8125rem;color:#fff}
.cw-legend span{display:inline-flex;align-items:center;gap:8px}
.cw-sw{display:inline-block;width:20px;height:11px;border-radius:3px;flex:none}
.cw-sw-cut{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px #fff}
.cw-sw-ref{height:0;border-radius:0;border-top:2px dashed rgba(255,255,255,.7)}
.cw-sw-gain{background:rgba(255,255,255,.72)}
.cw-sw-loss{background:repeating-linear-gradient(135deg,rgba(255,255,255,.62) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cw-legend-2{margin-top:4px;color:#A3A3A3}
.cw-unmeasured .cw-sw-cut{opacity:.35}
.cw-unmeasured .cw-legend-2{display:none}              /* nothing is drawn to tell apart */
.cw-note{margin:6px auto 0;max-width:52ch;text-align:center;font-size:.75rem;line-height:1.45;color:#A3A3A3}

/* ---------- the score list: the wheel's text alternative, with the difference as a bar ---------- */
.cw-sum{margin:18px auto 0;max-width:400px;font-size:.875rem;line-height:1.45;color:#fff;text-align:center}
.cw-cutnote{margin:4px auto 0;max-width:400px;font-size:.75rem;line-height:1.45;color:#A3A3A3;text-align:center}
.cw-cutnote[hidden]{display:none}
.cw-list{list-style:none;margin:12px auto 0;padding:0;max-width:400px;font-size:.9375rem}
.cw-list li{display:grid;grid-template-columns:minmax(0,1fr) 2.4em minmax(72px,132px) 2.8em;align-items:center;gap:10px;padding:3px 0}
.cw-list li.cw-sep{padding-bottom:9px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.cw-k{color:#fff}
.cw-v{font-weight:620;color:#fff;text-align:right}
.cw-nm{font-weight:400;color:#A3A3A3;font-size:.8125rem;grid-column:2 / 4;text-align:left}
.cw-row-nm .cw-bar{display:none}
.cw-d{color:#A3A3A3;font-size:.8125rem;text-align:right;white-space:nowrap}
.cw-up .cw-d{color:#fff;font-weight:600}
/* a centre line; the bar grows right when the stone is ahead (solid), left when behind (hatched), 50 points a side */
.cw-bar{position:relative;display:block;height:10px}
.cw-bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(255,255,255,.35)}
.cw-bar i{position:absolute;top:1px;bottom:1px;border-radius:2px}
.cw-up .cw-bar i{left:50%;background:rgba(255,255,255,.85)}
.cw-down .cw-bar i{right:50%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.62) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* ---------- below the bench: follows the theme ---------- */
.cw-after{padding-top:22px;padding-bottom:72px}
.cw-disclaimer{font-size:.8125rem;line-height:1.45;color:var(--muted);max-width:80ch}

/* ---------- breakpoints ---------- */
@media (max-width:899.98px){
  .cw-grid{grid-template-columns:1fr;gap:22px}
  .cw-stage{max-width:620px;margin:0 auto}
}
@media (max-width:1023.98px){
  .cw-controls{grid-template-columns:1fr}          /* each pair on its own row, Swap between them */
  .cw-swap{justify-self:center}
}
@media (max-width:720px){
  .cw-gl{touch-action:pan-y}                 /* a vertical swipe scrolls the page; sideways turns the stone */
}
@media (max-width:480px){
  .cw-controls{padding:12px 14px}
  .cw-pair{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}
  .cw-field select{font-size:.875rem;padding:9px 8px 9px 10px}
  .cw-list li{grid-template-columns:minmax(0,1fr) 2.2em minmax(56px,96px) 2.6em;gap:8px}
  .cw-stage .seg{left:10px;top:10px}
  .cw-label{font-size:15px}
  .cw-delta{font-size:14px}
  .cw-tick{font-size:12px}
}
@media (max-width:359.98px){
  .cw-pair{grid-template-columns:1fr}              /* the narrowest phones: one picker a row */
}
@media (prefers-reduced-motion:reduce){
  .cw *,.cw *::before,.cw *::after{transition-duration:0s!important;animation-duration:0s!important}
}
@media (forced-colors:active){
  .cw-bench{forced-color-adjust:none}
}