/* Hearts & Arrows Scope. One bench on the always-black stage, like the other tools: the two views (arrows face-up,
   hearts face-down) with their key and notes, and under them one wide settings panel, its groups in columns. From
   700px the whole bench fits the window (the views are sized to its height, --rest being everything else), so once
   it is in view nothing moves while you use it (owner, 2026-10-01: "the control panel isn't fixed"). Below 700px
   the views stay pinned at the top while the panel scrolls under them. Red and white appear only in the views and
   their key: they are the viewer's own colours. Only the disclaimer follows the theme. */

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

/* ---------- the bench ---------- */
.ha-bench{padding:8px 0 24px;overflow:visible}       /* .stage hides overflow, which would stop the views sticking */
.ha :focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ha-bench :focus-visible{outline-color:#fff}
.ha-grid{--rest:440px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ha-grid>*{min-width:0}

/* ---------- the views ---------- */
.ha-views{display:grid;gap:10px 16px;justify-content:center;
  grid-template-columns:repeat(2,min(calc((100% - 16px) / 2),max(200px,calc(100vh - var(--rest)))));
  grid-template-columns:repeat(2,min(calc((100% - 16px) / 2),max(200px,calc(100svh - var(--rest)))))}
.ha-view{margin:0;min-width:0}
.ha-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}
.ha-stage canvas,.ha-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.ha-poster{object-fit:contain}
.ha-drawn .ha-poster{visibility:hidden}
.ha-cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px 12px;flex-wrap:wrap;margin:8px 4px 0;font-size:.875rem;color:#A3A3A3}
.ha-cap b{color:#fff;font-weight:600}
.ha-sym{white-space:nowrap}
.ha-sym b{display:inline-block;min-width:3.6ch;text-align:right;transition:opacity .15s}
.ha-measuring .ha-sym b{opacity:.4}                     /* a figure still being measured for the new settings */
.ha-legend{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:2px 0 0;font-size:.8125rem;color:#fff}
.ha-legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ha-sw{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.ha-sw-w{background:#F6F6F6}
.ha-sw-r{background:#CD1C24}
.ha-sw-k{background:#0C0C0C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.ha-notes{margin:-2px auto 0;max-width:110ch;text-align:center}
.ha-notes p{margin:2px 0 0;font-size:.75rem;line-height:1.4;color:#A3A3A3}
.ha-noscript{color:#fff!important}

/* ---------- the panel (the Cut Grading Tool's fields and sliders) ---------- */
.ha-panel{--pmuted:rgba(255,255,255,.8);border-radius:var(--r-panel);padding:16px 20px;display:grid;gap:12px 32px;align-items:start;
  grid-template-columns:12.5rem minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"pick prop sym" "acts prop sym" "stat prop sym"}
.ha-pair{grid-area:pick}
.ha-panel>.ha-group:nth-of-type(1){grid-area:prop}
.ha-panel>.ha-group:nth-of-type(2){grid-area:sym}
.ha-acts{grid-area:acts}
.ha-status{grid-area:stat}
.ha-panel>*{position:relative;margin:0}                 /* above the glass highlight */
.ha-field{display:flex;flex-direction:column;gap:7px}
.ha-field label{font-size:.875rem;font-weight:560;color:#fff}
.ha-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%}
.ha-field select option,.ha-field select optgroup{color:#000;background:#fff}
.ha-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}   /* Cut and Gemstone */
.ha-group{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.ha-group legend{float:left;width:100%;padding:0 0 8px;margin:0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--pmuted)}
.ha-group legend+*{clear:both}
.ha-hint{font-size:.75rem;line-height:1.3;color:var(--pmuted);margin:0}
/* a slider is one row: label, minus, slider, plus, value; its hint under it (stacked again below 700px) */
.ha-range{display:grid;grid-template-columns:6.7rem 30px minmax(48px,1fr) 30px 3.3rem;column-gap:7px;row-gap:3px;align-items:center}
.ha-range .ha-step{width:30px;height:30px}
.ha-range-l,.ha-range-row{display:contents}
.ha-range-l label{grid-column:1;grid-row:1;font-size:.8125rem;line-height:1.2}
.ha-range-l output{grid-column:5;grid-row:1;font-size:.9375rem;font-weight:600;color:#fff;text-align:right;white-space:nowrap}
.ha-range .ha-hint{grid-column:1/-1}
.ha-range input[type=range]{width:100%;accent-color:#fff;margin:0;min-height:28px;background:none;cursor:pointer}
.ha-step{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:#fff;
  font:inherit;font-size:1.125rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s}
.ha-step:hover{background:rgba(255,255,255,.14)}
.ha-step:disabled{opacity:.3;cursor:default;background:none}
.ha-acts{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.ha-sm{padding:9px 16px;min-height:40px;font-size:.875rem}
.ha-status{font-size:.8125rem;color:var(--pmuted);margin:-4px 0 0;min-height:1.2em;overflow-wrap:anywhere}
.ha-status:empty{display:none}

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

/* ---------- breakpoints ---------- */
@media (min-width:1000px) and (max-width:1199.98px){
  .ha-grid{--rest:450px}
}
/* 700-1000px: Cut and Gemstone (and the buttons) on one row, then Proportions beside Symmetry */
@media (min-width:700px) and (max-width:999.98px){
  .ha-grid{--rest:530px}
  .ha-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;
    grid-template-areas:"pick pick" "prop sym" "acts sym" "stat sym"}
  .ha-pair{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}
/* below 700px: the views pinned on top, the panel under them in one column */
@media (max-width:699.98px){
  .ha-grid{gap:14px}
  .ha-range{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .ha-range-l{display:flex;align-items:baseline;gap:10px}
  .ha-range-l label{flex:1}
  .ha-range-row{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;gap:8px;align-items:center}
  .ha-range-l label{font-size:.875rem}
  .ha-range .ha-step{width:32px;height:32px}
  .ha-left{display:contents}                       /* the views stick within the whole bench, not just their column */
  .ha-views{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;position:sticky;top:0;z-index:3;background:#000;
    padding:8px 0;width:100%;box-shadow:0 10px 14px -10px #000}
  .ha-notes{margin-top:-8px}
  .ha-panel{grid-template-columns:1fr;gap:16px;grid-template-areas:"pick" "prop" "sym" "acts" "stat"}
  .ha-pair{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
  .ha-stage{border-radius:var(--r-inner)}
  .ha-cap{margin:6px 2px 0;font-size:.8125rem;flex-direction:column;gap:0}
  .ha-legend{gap:2px 12px;font-size:.75rem}
  .ha-sw{width:10px;height:10px}
}
@media (prefers-reduced-motion:reduce){
  .ha *,.ha *::before,.ha *::after{transition-duration:0s!important;animation-duration:0s!important}
}
@media (forced-colors:active){
  .ha-bench{forced-color-adjust:none}
}