/* Passing Games: Checking the Boxes' look (ctb.css + ows-boxes.css, loaded first) for a team's passing game.
   Only what ctb.css scopes to its own panels, and the few pieces this tool adds. Tokens only, sharp corners,
   orange and shades of orange only (docs/TOOLS-DESIGN-GUIDE.md). */

/* The card every tool sits in (ctb.css lists its panels by id). */
body.stx-look-jm #ows-stacks #stx-panel-passing{
  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)
}

/* ---- Overview: Mike's three ranked lists, 3 across, 2 below 1100px, 1 on a phone ---- */
#ows-stacks .stx-pg-ov{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){#ows-stacks .stx-pg-ov{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#ows-stacks .stx-pg-ov{grid-template-columns:minmax(0,1fr)}}
#ows-stacks p.stx-pg-cap{margin:0 0 6px;min-height:2.7em;font:500 12px/1.35 var(--sans);color:var(--muted)}
#ows-stacks p.stx-pg-cap b{display:block;font:800 15px/1.25 var(--sans);color:var(--ink)}
@media (max-width:600px){#ows-stacks p.stx-pg-cap{min-height:0}}
body #ows-stacks #stx-panel-passing table.stx-ctb-ov-table{width:100%;margin:0;table-layout:fixed;border-collapse:collapse;font-size:13px}
#ows-stacks .stx-pg-ov-table col.c-game{width:52px}
body #ows-stacks #stx-panel-passing .stx-ctb-ov-table th,body #ows-stacks #stx-panel-passing .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-passing .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-passing .stx-ctb-ov-table thead th:last-child{text-align:center}
body #ows-stacks #stx-panel-passing .stx-ctb-ov-table td.stx-ctb-ov-name b{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
#ows-stacks .stx-pg-qb{font-size:12.5px;color:var(--muted)}
#ows-stacks .stx-pg-ov-table col.c-each{width:112px}
#ows-stacks .stx-pg-ov-table col.c-sc{width:40px}
body #ows-stacks #stx-panel-passing .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-passing .stx-ctb-ov-table td.stx-ctb-ov-sc b{font-size:14px;color:var(--ink)}
#ows-stacks td.stx-pg-per b{font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--ink)}
#ows-stacks td.stx-pg-each{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- A list's row opens in place (Mike 10-28): + toggle, peach while open, the five boxes under it ---- */
#ows-stacks tr.stx-pg-exprow{cursor:pointer}
#ows-stacks tr.stx-pg-exprow.is-open td{background:var(--hit)}
body #ows-stacks .stx-pg button.stx-pg-exp{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;border:1.5px solid var(--ink);border-radius:4px;font:800 13px/1 var(--sans);color:var(--ink);vertical-align:-3px;cursor:pointer}
body #ows-stacks .stx-pg button.stx-pg-exp[aria-expanded="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
body #ows-stacks .stx-pg button.stx-pg-exp:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
body #ows-stacks #stx-panel-passing .stx-ctb-ov-table tr.stx-pg-detail td{padding:8px 0 12px;white-space:normal;overflow:visible;text-overflow:clip}
#ows-stacks p.stx-pg-dwho{margin:0 0 6px;font:600 12.5px/1.35 var(--sans);color:var(--ink)}
#ows-stacks p.stx-pg-dwho .stx-pg-nm{font-weight:700}
#ows-stacks .stx-pg-cells.stx-pg-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
#ows-stacks .stx-pg-cells.stx-pg-mini > :nth-child(3){grid-column:1 / -1}

/* ---- Full list: the team and its three players, then the five boxes ---- */
#ows-stacks .stx-pg-vs{font-weight:600;font-size:13px;color:var(--muted)}
#ows-stacks .stx-pg-names .stx-pg-nm{display:inline;font-size:12.5px;font-weight:600;color:var(--ink)}
#ows-stacks .stx-pg-names .stx-ctb-plus{display:inline}
#ows-stacks .stx-pg-cell .stx-ctb-tog{display:block;margin-top:4px}
#ows-stacks .stx-pg-cell .stx-ctb-tog > i{font:600 11.5px/1.3 var(--sans);color:var(--ink)}
#ows-stacks .stx-pg-cell .stx-ctb-tog > b{display:block;font-size:12.5px;font-weight:800;color:var(--ink)}
#ows-stacks .stx-pg-two .stx-pg-nm{display:inline;font-size:inherit;font-weight:inherit}
#ows-stacks .stx-pg-two .stx-ctb-plus{display:inline}
/* Each pass catcher's target share beside his name; Mike's call under the box. */
#ows-stacks .stx-pg-two i.stx-pg-ts{font-style:normal;font-weight:600;font-size:12px;color:var(--muted)}
#ows-stacks small.stx-pg-call{margin-top:5px;padding-left:6px;border-left:2px solid var(--orange)}
/* "Pass funnel": a tag (a small uppercase label in a 1px box), orange text, no fill. */
#ows-stacks .stx-pg-tag{display:inline-block;margin-top:4px;padding:0 5px;border:1px solid var(--orange);border-radius:2px;font:800 9.5px/1.6 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark)}

/* Phone: Game | Matchup, then Stack certainty across, then Salary | Volume. */
@media (max-width:700px){
  body.stx-look-jm #ows-stacks #stx-panel-passing{padding:4px 12px 20px}
  #ows-stacks .stx-pg-row .stx-pg-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  #ows-stacks .stx-pg-row .stx-pg-cells > :nth-child(3){grid-column:1 / -1}
  #ows-stacks .stx-pg-cell .stx-ctb-stack{padding-right:16px}
  #ows-stacks .stx-pg-names{display:block}
}