/* Checking the Boxes, in the toolkit's look (stacks-jm-theme.css) and to the letter of
   docs/TOOLS-DESIGN-GUIDE.md: tokens only, sharp corners, orange and shades of orange only.
   The board is Matchups' Overview; each player's five boxes are small squares. */

/* The card every tool sits in (stacks-jm-theme.css lists its panels by id; this one isn't there). */
body.stx-look-jm #ows-stacks #stx-panel-ctb{
  margin-top:0;padding:4px 30px 26px;
  border:1px solid var(--line);border-top:0;border-radius:0 0 2px 2px;
  background:var(--jm-card-bg);box-shadow:0 18px 50px -18px rgba(22,19,15,.35)
}
#ows-stacks .stx-ctb-research{margin:6px 0 0;font:500 12.5px/1.4 var(--sans);color:var(--jm-ink-3,var(--muted))}

/* ---- controls: site, then which games ---- */
#ows-stacks .stx-ctb-controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:4px 0 12px}
#ows-stacks .stx-ctb-slates .stx-subtab small{margin-left:3px;font-size:11px;opacity:.75}
#ows-stacks p.stx-ctb-basis{margin:0 0 6px;font:500 13px/1.4 var(--sans);color:var(--muted)}
#ows-stacks p.stx-ctb-key{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 14px;font:500 12.5px/1.4 var(--sans);color:var(--muted)}
#ows-stacks p.stx-ctb-key span{display:inline-flex;align-items:center;gap:6px}

/* ---- a box: filled = checked, half-filled = half, empty = not; dashed = no number yet ---- */
#ows-stacks .stx-ctb-sqs{display:inline-flex;gap:3px;vertical-align:middle}
#ows-stacks .stx-ctb-sq{display:inline-block;width:11px;height:11px;border:1.5px solid var(--orange);border-radius:1px;box-sizing:border-box;font-style:normal}
#ows-stacks .stx-ctb-sq.is-full{background:var(--orange)}
/* 1½ (elite volume): the dark orange, so it reads as "more than full" without a new colour. */
#ows-stacks .stx-ctb-sq.is-elite{background:var(--orange-dark);border-color:var(--orange-dark)}
#ows-stacks .stx-ctb-sq.is-half{background:linear-gradient(90deg,var(--orange) 50%,transparent 50%)}
#ows-stacks .stx-ctb-sq.is-none{border-color:rgba(23,21,18,.22)}
#ows-stacks .stx-ctb-sq.is-blank{border-color:rgba(23,21,18,.22);border-style:dashed}
/* Ownership for readers without the paid numbers: hatched grey, never counted. */
#ows-stacks .stx-ctb-sq.is-lock{border-color:rgba(23,21,18,.3);background:repeating-linear-gradient(45deg,rgba(23,21,18,.28) 0 1.5px,transparent 1.5px 3.5px)}

/* ---- the top-10 board: 4 across, 2 below 1100px, 1 on a phone ---- */
#ows-stacks .stx-ctb-ov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;align-items:start}
#ows-stacks .stx-ctb-ov-col{min-width:0}
body #ows-stacks #stx-panel-ctb table.stx-ctb-ov-table{width:100%;margin:0;table-layout:fixed;border-collapse:collapse;font-size:13px}
#ows-stacks .stx-ctb-ov-table col.c-game{width:47px}
#ows-stacks .stx-ctb-ov-table col.c-sq{width:66px}
#ows-stacks .stx-ctb-ov-table col.c-sc{width:34px}
/* On the board the squares are a touch smaller, so a name keeps its room four across. */
#ows-stacks .stx-ctb-ov-table .stx-ctb-sqs{gap:2px}
#ows-stacks .stx-ctb-ov-table .stx-ctb-sq{width:10px;height:10px}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table th,body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table td{padding:6px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border-bottom:1px solid var(--line)}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table thead th{font-size:10.5px;letter-spacing:.04em;color:var(--jm-ink-3,var(--muted));border-bottom:2px solid var(--ink)}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table thead th:first-child{font-size:12px;color:var(--ink)}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table thead th:last-child{text-align:center}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table td.stx-ctb-ov-name b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
#ows-stacks .stx-ctb-ov-g{color:var(--muted);font-size:12px}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table td.stx-ctb-ov-sc{text-align:center;padding-left:0;padding-right:0;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-ctb .stx-ctb-ov-table td.stx-ctb-ov-sc b{font-size:14px;color:var(--ink)}
#ows-stacks .stx-ctb-none{color:var(--muted);font-style:italic}
body #ows-stacks .stx-ctb button.stx-ctb-all,body #ows-stacks .stx-ctb button.stx-ctb-back{all:unset;cursor:pointer;display:inline-block;margin:8px 0 0 3px;font:700 13px/1.2 var(--sans);color:var(--orange-dark);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
body #ows-stacks .stx-ctb button.stx-ctb-qbs{margin-top:18px}
@media (max-width:1100px){
  #ows-stacks .stx-ctb-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  #ows-stacks .stx-ctb-ov{grid-template-columns:minmax(0,1fr)}
}

/* ---- the full list: who | five boxes, each with its number | the count ---- */
#ows-stacks .stx-ctb-fullbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 12px}
body #ows-stacks .stx-ctb button.stx-ctb-back{margin:0}
#ows-stacks .stx-ctb-fullbar .stx-chips{margin:0}
#ows-stacks .stx-ctb-list{max-width:1100px}
#ows-stacks .stx-ctb-row{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr) 52px;gap:10px;align-items:stretch;padding:8px 0;border-bottom:1px solid var(--line)}
#ows-stacks .stx-ctb-head{padding:0 0 6px;border-bottom:2px solid var(--ink);font:700 10.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--jm-ink-3,var(--muted))}
#ows-stacks .stx-ctb-head .stx-ctb-who{color:var(--ink);font-size:12px}
#ows-stacks .stx-ctb-head .stx-ctb-cell{background:none;border:0;padding:0 6px}
#ows-stacks .stx-ctb-head .stx-ctb-sc{background:none;justify-content:center}
#ows-stacks .stx-ctb-who{min-width:0}
#ows-stacks .stx-ctb-who b{display:block;font-size:15px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
#ows-stacks .stx-ctb-who small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--sans);color:var(--muted)}
#ows-stacks .stx-ctb-cells{display:grid;grid-template-columns:repeat(var(--ctb-n,5),minmax(0,1fr));gap:4px;min-width:0}
#ows-stacks .stx-ctb-cell{min-width:0;padding:6px 7px;border:1px solid var(--line);border-radius:2px;background:#fffdfb}
#ows-stacks .stx-ctb-cell b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ows-stacks .stx-ctb-cell small{display:block;margin-top:2px;font:400 11.5px/1.3 var(--sans);color:rgba(23,21,18,.72)}
#ows-stacks .stx-ctb-cell small em{font-style:normal;font-weight:700;color:var(--ink)}
#ows-stacks .stx-ctb-cell small a{color:var(--orange-dark)}
#ows-stacks .stx-ctb-cell.is-full{background:rgba(255,122,0,.42);border-color:rgba(255,122,0,.5)}
/* R3: a mark in each box's corner (✓ / ½ / 1½ / empty ring), one short "Half:" / "No:" reason, sortable headings. */
#ows-stacks .stx-ctb-cell{position:relative}
#ows-stacks .stx-ctb-mark{position:absolute;top:5px;right:6px;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;border-radius:9px;background:var(--orange);color:#fff;font:800 11px/18px var(--sans);text-align:center}
#ows-stacks .stx-ctb-cell.is-elite .stx-ctb-mark{background:var(--orange-dark)}
#ows-stacks .stx-ctb-cell.is-half .stx-ctb-mark{background:#fff;color:var(--orange-dark);box-shadow:inset 0 0 0 1.5px var(--orange)}
#ows-stacks .stx-ctb-mark.is-empty{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(23,21,18,.25)}
#ows-stacks .stx-ctb-cell .stx-ctb-stack{padding-right:22px}
#ows-stacks small.stx-ctb-why{display:block;margin-top:4px;font:600 11.5px/1.3 var(--sans);color:var(--ink)}
/* Combined figures (Aaron 10-23): names, the two shares, then "Together: 62% (check 50%+ · half 42%+)". */
#ows-stacks .stx-ctb-cell b.stx-ctb-names{display:block;font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;padding-right:22px}
/* Each named pass catcher on his own line with this week's practice marks and game status (Aaron 10-23):
   News's F / L / DNP boxes, in the Injuries tool's own tints (news.css, approved there). */
#ows-stacks #stx-ctb{--ctb-dnp-bg:#f7d4d0;--ctb-dnp:#b3261e;--ctb-lp-bg:#fbf0c9;--ctb-lp:#8a6700;--ctb-fp-bg:#dcefe2;--ctb-fp:#237a4a}
#ows-stacks .stx-ctb-nm{display:block}
#ows-stacks .stx-ctb-plus{display:block;font-weight:600;color:var(--muted);line-height:1.1}
#ows-stacks .stx-ctb-prac{display:inline-flex;gap:3px;margin-left:6px;vertical-align:1px}
#ows-stacks .stx-ctb-prac i{display:inline-block;min-width:18px;padding:0 4px;border-radius:3px;border:1px solid currentColor;font:800 10.5px/15px var(--sans);font-style:normal;letter-spacing:.03em;text-align:center}
#ows-stacks .stx-ctb-prac i.is-dnp{background:var(--ctb-dnp-bg);color:var(--ctb-dnp)}
#ows-stacks .stx-ctb-prac i.is-lp{background:var(--ctb-lp-bg);color:var(--ctb-lp)}
#ows-stacks .stx-ctb-prac i.is-fp{background:var(--ctb-fp-bg);color:var(--ctb-fp)}
#ows-stacks .stx-ctb-st{display:inline-block;margin-left:5px;padding:0 4px;border-radius:2px;font:800 9.5px/1.5 var(--sans);letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
#ows-stacks .stx-ctb-st.is-out{background:var(--orange-dark);color:#fff}
#ows-stacks .stx-ctb-st.is-doubtful{border:1px solid var(--orange-dark);color:var(--orange-dark)}
#ows-stacks .stx-ctb-st.is-questionable{background:var(--hit);border:1px solid rgba(255,122,0,.45);color:var(--orange-dark)}
@media (max-width:700px){
  /* Quarterbacks on a phone: the Stack box takes the full width (names and marks need it), the other four share the row under it. */
  #ows-stacks .stx-ctb-cells.is-qb{grid-template-columns:repeat(4,minmax(0,1fr))}
  #ows-stacks .stx-ctb-cells.is-qb > :first-child{grid-column:1 / -1}
  #ows-stacks .stx-ctb-cell b.stx-ctb-names{font-size:12.5px;padding-right:20px}
  #ows-stacks .stx-ctb-plus{display:none}
}
#ows-stacks .stx-ctb-line{display:block;margin-top:2px;font:500 12px/1.3 var(--sans);color:rgba(23,21,18,.8)}
#ows-stacks .stx-ctb-tog b{display:inline;font-size:12.5px;font-weight:800;color:var(--ink)}
#ows-stacks .stx-ctb-tog i{font-style:normal;font-weight:500;color:rgba(23,21,18,.72)}
#ows-stacks small.stx-ctb-note{display:block;margin-top:3px;font:500 11.5px/1.3 var(--sans);color:rgba(23,21,18,.72)}
#ows-stacks small.stx-ctb-note em{font-style:normal;font-weight:700;color:var(--ink)}
body #ows-stacks .stx-ctb button.stx-ctb-sort{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;padding:2px 6px;font:700 10.5px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--jm-ink-3,var(--muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #ows-stacks .stx-ctb button.stx-ctb-sort:hover{color:var(--ink)}
body #ows-stacks .stx-ctb button.stx-ctb-sort.is-on{color:var(--orange-dark)}
body #ows-stacks .stx-ctb button.stx-ctb-sort:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
#ows-stacks .stx-ctb-sort .s{display:none}
#ows-stacks .stx-ctb-head .stx-ctb-sc button.stx-ctb-sort{text-align:center;padding:2px 0}
#ows-stacks small.stx-ctb-sorthint{display:block;margin-top:2px;font:500 11px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
#ows-stacks .stx-ctb-cell.is-elite{background:rgba(255,122,0,.62);border-color:var(--orange-dark);box-shadow:inset 0 0 0 1px var(--orange-dark)}
#ows-stacks .stx-ctb-cell.is-half{background:rgba(255,122,0,.16);border-color:rgba(255,122,0,.3)}
#ows-stacks .stx-ctb-cell.is-none{background:rgba(23,21,18,.04)}
#ows-stacks .stx-ctb-cell.is-lock{background:rgba(23,21,18,.04);border-style:dashed}
#ows-stacks .stx-ctb-sc{display:flex;align-items:center;justify-content:center;padding:0;border-radius:2px}
/* Two numbers stacked in one box (carries over targets, targets over share), so a column scans straight down. */
#ows-stacks .stx-ctb-stack{display:block}
#ows-stacks .stx-ctb-kv{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
#ows-stacks .stx-ctb-kv b{display:inline;font-size:14.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#ows-stacks .stx-ctb-kv i{font-style:normal;font-size:11.5px;color:rgba(23,21,18,.72)}
#ows-stacks .stx-ctb-order{margin-top:-8px}
#ows-stacks .stx-ctb-sc b{font-size:18px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
#ows-stacks select.stx-ctb-mike{display:block;width:100%;margin-top:5px;padding:2px 4px;font:600 11.5px/1.2 var(--sans);border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink)}
/* Staff adjustment: the reason under the name; staff get a small control. */
#ows-stacks p.stx-ctb-adj{margin:4px 0 0;padding-left:7px;border-left:2px solid var(--orange);font:500 12px/1.35 var(--sans);color:var(--ink)}
#ows-stacks p.stx-ctb-adj span{color:var(--muted)}
#ows-stacks p.stx-ctb-adj.is-old{border-left-color:rgba(23,21,18,.25);color:var(--muted);font-style:italic}
#ows-stacks .stx-ctb-adjctl{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#ows-stacks .stx-ctb-adjctl select,#ows-stacks .stx-ctb-adjctl input{padding:2px 4px;font:500 12px/1.2 var(--sans);border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink)}
#ows-stacks .stx-ctb-adjctl input{flex:1 1 90px;min-width:0}
body #ows-stacks .stx-ctb .stx-ctb-adjctl button{all:unset;cursor:pointer;padding:2px 8px;border:1.5px solid var(--ink);border-radius:4px;font:700 12px/1.2 var(--sans);color:var(--ink)}
body #ows-stacks .stx-ctb .stx-ctb-adjctl button:hover{background:var(--hit)}
#ows-stacks .stx-ctb-empty{margin:20px 0 0;color:var(--muted);font-size:15px}
#ows-stacks .stx-ctb-out{margin:14px 0 0;max-width:90ch;font-size:13px;line-height:1.45;color:var(--muted)}
#ows-stacks .stx-ctb-out b{color:var(--ink)}
/* The one fold sits under the headline, above the controls (HW2). */
#ows-stacks .stx-ctb-how{margin:0 0 14px}
#ows-stacks .stx-ctb-how li,#ows-stacks .stx-ctb-how p{max-width:86ch;font-size:14px;line-height:1.5}
#ows-stacks .stx-ctb-how p{margin:0 0 8px}

/* ---- phone: name and count on one line, the boxes on the next ---- */
/* ---- below 1200px: name and count on one line, the five boxes full width under them, so no number is cut off ---- */
@media (max-width:1200px){
  #ows-stacks .stx-ctb-row{grid-template-columns:minmax(0,1fr) 52px;row-gap:6px}
  #ows-stacks .stx-ctb-cells{grid-column:1 / -1;grid-row:2}
  #ows-stacks .stx-ctb-head .stx-ctb-sc{grid-row:1;grid-column:2}
  #ows-stacks .stx-ctb-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
  #ows-stacks .stx-ctb-who > *{flex:0 1 auto}
  #ows-stacks .stx-ctb-adjctl{flex:1 1 100%}
}
@media (max-width:700px){
  body.stx-look-jm #ows-stacks #stx-panel-ctb{padding:4px 12px 20px}
  #ows-stacks .stx-ctb-who{display:block}
  #ows-stacks .stx-ctb-row{grid-template-columns:minmax(0,1fr) 46px;row-gap:6px}
  #ows-stacks .stx-ctb-cells{grid-column:1 / -1;grid-row:2;gap:3px}
  /* The headings stay on a phone as the sort row, in their short names. */
  #ows-stacks .stx-ctb-head .stx-ctb-cells{display:grid}
  #ows-stacks .stx-ctb-sort .l{display:none}
  #ows-stacks .stx-ctb-sort .s{display:inline}
  body #ows-stacks .stx-ctb button.stx-ctb-sort{padding:4px 2px;font-size:9px;letter-spacing:0;text-align:center;border:1px solid var(--line);border-radius:4px}
  #ows-stacks .stx-ctb-head .stx-ctb-sc{grid-row:1;grid-column:2}
  #ows-stacks .stx-ctb-mark{top:3px;right:3px;min-width:15px;height:15px;font-size:9.5px;line-height:15px}
  #ows-stacks .stx-ctb-cell .stx-ctb-stack{padding-right:0}
  #ows-stacks .stx-ctb-cell::before{padding-right:20px;box-sizing:border-box}
  #ows-stacks small.stx-ctb-why{font-size:10px}
  #ows-stacks small.stx-ctb-note{font-size:10px}
  #ows-stacks .stx-ctb-cell{padding:5px 4px}
  #ows-stacks .stx-ctb-cell::before{content:attr(data-l);display:block;margin-bottom:2px;font:700 8.5px/1.1 var(--sans);letter-spacing:0;text-transform:uppercase;color:rgba(23,21,18,.6);white-space:nowrap;overflow:hidden}
  #ows-stacks .stx-ctb-cell b{font-size:12.5px;text-overflow:clip}
  #ows-stacks .stx-ctb-cell small{font-size:10.5px;overflow-wrap:break-word}
  #ows-stacks .stx-ctb-sc b{font-size:16px}
  #ows-stacks .stx-ctb-kv{white-space:normal;margin-bottom:2px}
  /* The stacked numbers carry their own labels; the longer line under them is for the wider screen. */
  #ows-stacks .stx-ctb-cell.is-stack > small{display:none}
  #ows-stacks .stx-ctb-adjctl input{flex-basis:100%}
  #ows-stacks .stx-ctb-kv b{font-size:12.5px}
  #ows-stacks .stx-ctb-kv i{display:block;font-size:9.5px;line-height:1.15}
}