/* The check-box mark: one look for Checking the Boxes' boards and Start/Sit's "Checking the Boxes" section
   (Aaron, 2026-10-26: "that should showcase full check marks or half check marks. As a visual").
   Owned by the Checking the Boxes files; loaded on every /stacks/ page (tiny) so Start/Sit can use it
   while Checking the Boxes is switched off. Orange and shades of orange only; sharp corners; tokens only.

   <span class="ows-cb-row" role="img" aria-label="3½ of 4 boxes checked">
     <i class="ows-cb is-full" title="Volume: checked"></i>   a full check
     <i class="ows-cb is-half" title="Matchup: half"></i>     a half check (left half filled, half the check)
     <i class="ows-cb is-none" title="Game: not checked"></i> an empty box
     <i class="ows-cb is-full"></i><i class="ows-cb is-half is-extra"></i>   elite volume: a full box and an extra half
   </span>
   <b class="ows-cb-total">3½ <small>of 4</small></b>
   Also: is-blank (no number yet, dashed), is-lock (ownership locked, hatched); sizes is-sm (11px), is-xs (10px).

   The hover note on a "Checking the Boxes" heading (hover on a computer, tap on a phone; no script):
   <h3 class="ows-cb-tipwrap">Checking the Boxes <details class="ows-cb-tip"><summary aria-label="What is this?">?</summary><span>…</span></details></h3>
   The note opens under the heading across its width (.ows-cb-tipwrap is its anchor). */
#ows-stacks .ows-cb-row{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;white-space:nowrap;line-height:1}
#ows-stacks .ows-cb{position:relative;display:inline-block;flex:none;width:15px;height:15px;margin:0;box-sizing:border-box;border:1.5px solid var(--orange);border-radius:0;background:transparent;font-style:normal;vertical-align:middle}
#ows-stacks .ows-cb.is-sm{width:11px;height:11px;border-width:1.25px}
#ows-stacks .ows-cb.is-xs{width:10px;height:10px;border-width:1.25px;vertical-align:-1px}
#ows-stacks .ows-cb.is-full{background:var(--orange)}
#ows-stacks .ows-cb.is-half{background:linear-gradient(90deg,var(--orange) 50%,transparent 50%)}
/* The check itself, white on the orange. A half box shows only the half of the check on its filled half
   (an orange second half made it look full at board size). */
#ows-stacks .ows-cb.is-full::after,#ows-stacks .ows-cb.is-half::after{
  content:"";position:absolute;inset:-1.5px;background:var(--page);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.8' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.8' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='square'/%3E%3C/svg%3E") center/100% 100% no-repeat
}
#ows-stacks .ows-cb.is-half::after{background:linear-gradient(90deg,var(--page) 50%,transparent 50%)}
/* Elite volume's extra half sits a hair apart, so "full + half" reads as one box and a bit more. */
#ows-stacks .ows-cb.is-extra{margin-left:-1px}
#ows-stacks .ows-cb.is-none{border-color:color-mix(in srgb,var(--ink) 28%,transparent)}
#ows-stacks .ows-cb.is-blank{border-color:color-mix(in srgb,var(--ink) 28%,transparent);border-style:dashed}
#ows-stacks .ows-cb.is-lock{border-color:color-mix(in srgb,var(--ink) 32%,transparent);background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 28%,transparent) 0 1.5px,transparent 1.5px 3.5px)}
#ows-stacks .ows-cb-total{display:inline-block;font:800 15px/1.1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#ows-stacks .ows-cb-total small{display:inline;margin:0;font:600 .72em/1 var(--sans);color:var(--muted)}

/* The hover note */
#ows-stacks .ows-cb-tipwrap{position:relative}
#ows-stacks details.ows-cb-tip{display:inline-block;margin:0 0 0 6px;vertical-align:middle}
#ows-stacks details.ows-cb-tip > summary{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;box-sizing:border-box;border:1.5px solid var(--ink);border-radius:0;background:var(--page);font:800 12px/1 var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;cursor:pointer;list-style:none}
#ows-stacks details.ows-cb-tip > summary::-webkit-details-marker{display:none}
#ows-stacks details.ows-cb-tip > summary::marker{content:""}
#ows-stacks details.ows-cb-tip[open] > summary,#ows-stacks details.ows-cb-tip > summary:hover{background:var(--orange);border-color:var(--orange);color:var(--page)}
#ows-stacks details.ows-cb-tip > span{display:none;position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-width:420px;padding:10px 12px;box-sizing:border-box;background:var(--ink);color:var(--page);font:500 13.5px/1.45 var(--sans);letter-spacing:0;text-transform:none;text-align:left;white-space:normal}
#ows-stacks details.ows-cb-tip[open] > span{display:block}
@media (hover:hover){
  #ows-stacks details.ows-cb-tip:hover > span{display:block}
}