/* Salary Changes, in the toolkit's look (stacks-jm-theme.css) and to the letter
   of docs/TOOLS-DESIGN-GUIDE.md: tokens only (no colours or fonts typed in),
   sharp corners, Archivo Black for the headline only — the list headings are
   the guide's section sub-head, Archivo extra-bold 18px. Built from Bye Weeks'
   pieces (byes.css) so the two read as one family. */

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

/* ---- controls: position, site, window, then search (the guide's order) ---- */
#ows-stacks .stx-salchg-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;margin:4px 0 6px}
#ows-stacks .stx-salchg-ctl{display:flex;flex-direction:column;gap:6px}
#ows-stacks .stx-salchg-ctl .stx-label{margin:0}
#ows-stacks .stx-salchg-ctl .stx-chips{margin:0;align-items:center}
#ows-stacks .stx-salchg-find{flex:1 1 240px;max-width:360px}
body #ows-stacks .stx-salchg .stx-search input{font-size:15px;padding:8px 11px}

/* ---- a list ----------------------------------------------------------------- */
/* The theme pads every <section> 60px top and bottom; these are tight blocks. */
body #ows-stacks #stx-panel-salaries section.stx-salchg-block{margin:24px 0 0;padding:0}
#ows-stacks h4.stx-salchg-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:0 0 4px !important;padding:0 0 6px !important;border-bottom:2px solid var(--ink);
  font:800 18px/1.2 var(--sans) !important;letter-spacing:0;text-transform:none;color:var(--ink)
}
#ows-stacks h4.stx-salchg-h span{font:500 13px/1.3 var(--sans);letter-spacing:0;color:var(--jm-ink-3)}

body #ows-stacks #stx-panel-salaries table.stx-salchg-table{width:100%;max-width:none;margin:0;table-layout:auto}
body #ows-stacks #stx-panel-salaries .stx-salchg-table th{padding:6px 7px;white-space:nowrap;vertical-align:bottom;color:var(--ink)}
body #ows-stacks #stx-panel-salaries .stx-salchg-table td{padding:6px 7px;font-size:14px;line-height:1.3;vertical-align:middle}
body #ows-stacks #stx-panel-salaries .stx-salchg-n{width:1%;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-salaries .stx-salchg-name{font-weight:600;color:var(--ink)}
body #ows-stacks #stx-panel-salaries .stx-salchg-name small{margin-left:2px;font-weight:600;letter-spacing:.03em;white-space:nowrap}

/* A week's price, with a small mark when it moved from the week before. */
body #ows-stacks #stx-panel-salaries .stx-salchg-table td i{display:inline-block;width:1.1em;margin-left:2px;font-style:normal;font-size:9px;text-align:center;vertical-align:1px}
body #ows-stacks #stx-panel-salaries .stx-salchg-table td.is-up i{color:var(--orange-dark)}
body #ows-stacks #stx-panel-salaries .stx-salchg-table td.is-down i{color:var(--jm-ink-3)}
body #ows-stacks #stx-panel-salaries td.stx-salchg-none{color:var(--jm-ink-3)}
/* Priced, but he didn't play that week (injured or inactive): the price goes quiet, "DNP" under it. */
body #ows-stacks #stx-panel-salaries td.is-dnp{color:var(--jm-ink-3);font-weight:400}
body #ows-stacks #stx-panel-salaries td.is-dnp .stx-salchg-dnp{display:block;margin:1px 1.1em 0 0;font:700 9px/1 var(--sans);letter-spacing:.08em;color:var(--jm-ink-3)}
body #ows-stacks #stx-panel-salaries .stx-salchg-short{display:none}

/* The change: the one number each row answers, so it carries the weight. */
body #ows-stacks #stx-panel-salaries th.stx-salchg-chg{padding-left:16px}
body #ows-stacks #stx-panel-salaries td.stx-salchg-chg{padding-left:16px}
body #ows-stacks #stx-panel-salaries td.stx-salchg-chg b{font-weight:800;font-size:15px;color:var(--ink)}
body #ows-stacks #stx-panel-salaries td.stx-salchg-chg.is-up b{color:var(--orange-dark)}
body #ows-stacks #stx-panel-salaries td.stx-salchg-chg small{display:block;margin-top:1px;font-size:11px;font-weight:600;color:var(--jm-ink-3)}

/* Week chips can run to 18: tighter, like Bye Weeks' jump chips. */
body #ows-stacks .stx-salchg-weeks .stx-chip-btn{padding:5px 9px;font-size:12.5px}

/* A week's heading is a button: it sorts the list by that week's price. */
body #ows-stacks #stx-panel-salaries button.stx-salchg-wkbtn{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
body #ows-stacks #stx-panel-salaries button.stx-salchg-wkbtn:hover{color:var(--orange-dark)}
body #ows-stacks #stx-panel-salaries th.is-sort{color:var(--orange-dark);box-shadow:inset 0 -2px 0 var(--orange)}
body #ows-stacks #stx-panel-salaries td.is-sort{font-weight:800}

/* The player's name opens his Player Card (player-card.css underlines it);
   the rest of the row, arrow included, opens his points and value. */
body #ows-stacks #stx-panel-salaries .stx-salchg-pbtn{font:600 14px/1.3 var(--sans);color:var(--ink)}
body #ows-stacks #stx-panel-salaries .stx-salchg-pbtn.stx-pc-name:hover{color:var(--orange-dark)}
body #ows-stacks #stx-panel-salaries tr.stx-salchg-row{cursor:pointer}
body #ows-stacks #stx-panel-salaries tr.stx-salchg-row:hover td{background:color-mix(in srgb,var(--hit) 55%,transparent)}
/* The arrow turns down when open. A real button, so the keyboard reaches it. */
body #ows-stacks #stx-panel-salaries button.stx-salchg-caret{all:unset;cursor:pointer;display:inline-block;margin-left:2px;padding:0 4px;font-size:10px;line-height:1;color:var(--orange-dark)}
body #ows-stacks #stx-panel-salaries button.stx-salchg-caret:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
body #ows-stacks #stx-panel-salaries tr.stx-salchg-row.is-open td{background:var(--hit)}
body #ows-stacks #stx-panel-salaries tr.stx-salchg-det th,
body #ows-stacks #stx-panel-salaries tr.stx-salchg-det td{background:var(--page);border-top:0}
body #ows-stacks #stx-panel-salaries tr.stx-salchg-det th{padding:5px 7px 5px 14px;text-align:left;font:700 11px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
body #ows-stacks #stx-panel-salaries tr.stx-salchg-det td{padding-top:5px;padding-bottom:5px;font-size:13px;color:var(--ink)}
/* A week that reached the site's value line (4x DraftKings, 3x FanDuel). */
body #ows-stacks #stx-panel-salaries tr.stx-salchg-det td.is-hit{background:var(--hit);font-weight:800}

/* Past nine weeks the prices go short so the whole season fits across. */
body #ows-stacks #stx-panel-salaries .is-compact .stx-salchg-full{display:none}
body #ows-stacks #stx-panel-salaries .is-compact .stx-salchg-short{display:inline}
body #ows-stacks #stx-panel-salaries .is-compact th,
body #ows-stacks #stx-panel-salaries .is-compact td{padding-left:2.5px;padding-right:2.5px;font-size:12px}
body #ows-stacks #stx-panel-salaries .is-compact th{letter-spacing:.03em}
body #ows-stacks #stx-panel-salaries .is-compact td i{width:.8em;margin-left:1px;font-size:8px}
body #ows-stacks #stx-panel-salaries .is-compact th.stx-salchg-chg,
body #ows-stacks #stx-panel-salaries .is-compact td.stx-salchg-chg{padding-left:8px}
body #ows-stacks #stx-panel-salaries .is-compact .stx-salchg-name small{display:block;margin:1px 0 0}

/* The view switch: Biggest moves (the opening view) | Every price. */
#ows-stacks .stx-salchg-views{margin:4px 0 14px}

/* Biggest moves: the top-10 board (Matchups' Overview, docs/TOOLS-DESIGN-GUIDE.md
   Part 2): four lists across, ten rows each, the change shaded orange by size. */
#ows-stacks .stx-salchg-ov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;align-items:start;margin-top:10px}
#ows-stacks .stx-salchg-ov-col{min-width:0}
body #ows-stacks #stx-panel-salaries table.stx-salchg-ov-table{width:100%;margin:0;table-layout:fixed;font-size:13px}
#ows-stacks .stx-salchg-ov-table col.c-rk{width:23px}
#ows-stacks .stx-salchg-ov-table col.c-team{width:38px}
#ows-stacks .stx-salchg-ov-table col.c-m{width:68px}
/* My Research's save tick shares the name cell (as on Matchups); keep them on one line. */
#ows-stacks .stx-salchg-ov-name .owr-chk{vertical-align:middle;margin-right:3px}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-table th,
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-table td{padding:5px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-table thead th{font-size:10.5px;letter-spacing:.03em;color:var(--jm-ink-3)}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-table thead th:first-child{font-size:11.5px;color:var(--ink)}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-table thead th:last-child{text-align:right;letter-spacing:0;font-size:10px;padding-left:0}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-rk{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-name b{font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
body #ows-stacks #stx-panel-salaries .stx-salchg-ov-team{font-size:12px;color:var(--muted)}
body #ows-stacks #stx-panel-salaries td.stx-salchg-ov-m{text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-salaries td.stx-salchg-ov-m b{font-size:13.5px;font-weight:800;color:var(--ink)}
#ows-stacks .stx-salchg-ov-none{color:var(--muted);font-style:italic}
body #ows-stacks button.stx-salchg-ov-all{all:unset;cursor:pointer;display:inline-block;margin:7px 0 0 4px;font:700 13px/1.2 var(--sans);color:var(--orange-dark);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
@media (max-width:1100px){
  #ows-stacks .stx-salchg-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  #ows-stacks .stx-salchg-ov{grid-template-columns:minmax(0,1fr)}
}

body #ows-stacks button.stx-salchg-more{all:unset;cursor:pointer;display:inline-block;margin:10px 0 0 7px;font:700 13px/1.2 var(--sans);color:var(--orange-dark);text-decoration:underline;text-underline-offset:2px}
#ows-stacks .stx-salchg-empty{margin:14px 0 0;color:var(--muted);font-size:15px}
#ows-stacks .stx-salchg-how{margin:0 0 14px}
#ows-stacks .stx-salchg-how p{max-width:80ch;font-size:14px;line-height:1.5}

/* Narrower screens keep the newest weeks and the sorted week (salary-changes.js
   marks the rest .hl / .hm / .hs: 12, 8 and 4 weeks). Change still covers the
   whole season. */
@media (max-width:1360px){
  body #ows-stacks #stx-panel-salaries .stx-salchg-table .hl{display:none}
}
@media (max-width:1100px){
  body #ows-stacks #stx-panel-salaries .stx-salchg-table .hm{display:none}
}
/* Phone: four weeks, in short prices, so nothing scrolls sideways. */
@media (max-width:640px){
  body.stx-look-jm #ows-stacks #stx-panel-salaries{padding:4px 12px 20px}
  #ows-stacks .stx-salchg-controls{gap:12px}
  #ows-stacks .stx-salchg-ctl{width:100%}
  #ows-stacks .stx-salchg-find{max-width:none}
  body #ows-stacks #stx-panel-salaries .stx-salchg-table .hs{display:none}
  body #ows-stacks #stx-panel-salaries .stx-salchg-pbtn{font-size:12.5px}
  body #ows-stacks #stx-panel-salaries tr.stx-salchg-det th{padding-left:6px;font-size:9.5px;letter-spacing:.04em}
  body #ows-stacks #stx-panel-salaries tr.stx-salchg-det td{font-size:12px}
  body #ows-stacks #stx-panel-salaries .stx-salchg-full{display:none}
  body #ows-stacks #stx-panel-salaries .stx-salchg-short{display:inline}
  body #ows-stacks #stx-panel-salaries .stx-salchg-table th,
  body #ows-stacks #stx-panel-salaries .stx-salchg-table td{padding:6px 2px;font-size:12.5px}
  body #ows-stacks #stx-panel-salaries .stx-salchg-table th{font-size:10.5px;letter-spacing:.03em}
  body #ows-stacks #stx-panel-salaries .stx-salchg-name small{display:block;margin:1px 0 0}
  body #ows-stacks #stx-panel-salaries th.stx-salchg-chg,
  body #ows-stacks #stx-panel-salaries td.stx-salchg-chg{padding-left:6px}
  body #ows-stacks #stx-panel-salaries td.stx-salchg-chg b{font-size:13px}
  /* "No change" may wrap, or it widens the column past the card. */
  body #ows-stacks #stx-panel-salaries td.stx-salchg-chg{white-space:normal}
  body #ows-stacks #stx-panel-salaries .stx-salchg-table td i{width:.9em;margin-left:1px;font-size:8px}
}