/* Stashes, in the toolkit's look (stacks-jm-theme.css) and to the letter of
   docs/TOOLS-DESIGN-GUIDE.md: tokens only, sharp corners, Archivo Black for the
   headline only. The board is Waiver Wire's copy of Matchups' Overview; the
   squares are Strength of Schedule's. */

/* 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-stash{
  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)
}
/* The old bar, when Sections is off: with the other Fantasy tabs. */
.ows-stacks .stx-tabs .stx-tab:is([data-tab="stash"],[data-ltab="stash"]){order:7}

/* ---- controls: weeks, rostered cut, then (full list) position and search ---- */
#ows-stacks .stx-stash-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;margin:4px 0 10px}
#ows-stacks .stx-stash-ctl{display:flex;flex-direction:column;gap:6px;min-width:0}
#ows-stacks .stx-stash-ctl .stx-label{margin:0}
#ows-stacks .stx-stash-ctl .stx-chips{margin:0;align-items:center}
#ows-stacks .stx-stash-ctl[hidden],#ows-stacks p.stx-stash-key[hidden]{display:none!important}
#ows-stacks .stx-stash-find{flex:1 1 220px;max-width:320px}
body #ows-stacks .stx-stash .stx-search input{font-size:15px;padding:8px 11px}
#ows-stacks .stx-stash-layout{margin:0 0 12px}
#ows-stacks p.stx-stash-basis{margin:0 0 12px;font:500 13px/1.4 var(--sans);color:var(--muted)}

/* ---- the top-10 board: 2 + 2 + 2 (a list needs ~420px for a name, its team and a "1 game" note
        beside two numbers), 3 + 3 only on a very wide screen, 1 on a phone ---- */
#ows-stacks .stx-stash-ov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px;align-items:start;max-width:1080px}
#ows-stacks .stx-stash-ov-col{min-width:0}
@media (min-width:1700px){
  #ows-stacks .stx-stash-ov{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
}
@media (max-width:860px){
  #ows-stacks .stx-stash-ov{grid-template-columns:minmax(0,1fr)}
}
body #ows-stacks #stx-panel-stash table.stx-stash-ov-table{width:100%;margin:0;table-layout:fixed;border-collapse:collapse;font-size:13px}
#ows-stacks .stx-stash-ov-table col.c-rk{width:24px}
#ows-stacks .stx-stash-ov-table col.c-sq{width:118px}
#ows-stacks .stx-stash-ov-table col.c-w{width:66px}
#ows-stacks .stx-stash-ov-table col.c-av{width:76px}
#ows-stacks .stx-stash-ov-table col.c-m{width:62px}
/* A phone (the script draws .is-narrow, no Rostered column): each line takes two rows, the name
   (with his rostered share) on top, the squares and his work under it, Proj. down the right. */
#ows-stacks .stx-stash-ov.is-narrow colgroup{display:none}
body #ows-stacks #stx-panel-stash .stx-stash-ov.is-narrow table.stx-stash-ov-table,
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table thead,
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table tbody{display:block;width:100%}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table tr{display:grid;grid-template-columns:24px minmax(0,1fr) 54px 54px;align-items:center}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table thead tr{border-bottom:2px solid var(--ink)}
body #ows-stacks #stx-panel-stash .stx-stash-ov.is-narrow .stx-stash-ov-table th,
body #ows-stacks #stx-panel-stash .stx-stash-ov.is-narrow .stx-stash-ov-table td{border-bottom:0}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table thead th:nth-child(1){grid-column:1 / 3;grid-row:1;justify-self:start}
/* The list's title takes the room on a phone (long titles like "Easiest schedule ahead"). */
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table thead th.stx-stash-ov-sqh{display:none}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table thead th:nth-child(3){grid-column:3}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table thead th:nth-child(4){grid-column:4}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table tbody tr{grid-template-areas:"rk name name m" "rk sq w m";border-bottom:1px solid var(--line)}
#ows-stacks .stx-stash-ov.is-narrow td.stx-stash-ov-rk{grid-area:rk;align-self:stretch;display:flex;align-items:center;justify-content:flex-end}
#ows-stacks .stx-stash-ov.is-narrow td.stx-stash-ov-name{grid-area:name;padding-bottom:2px}
#ows-stacks .stx-stash-ov.is-narrow td.stx-stash-ov-sq{grid-area:sq;padding-top:2px}
#ows-stacks .stx-stash-ov.is-narrow td.stx-stash-ov-w{grid-area:w}
body #ows-stacks #stx-panel-stash .stx-stash-ov.is-narrow td.stx-stash-ov-m{grid-area:m;align-self:stretch;display:flex;align-items:center;justify-content:flex-end}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table tbody tr.stx-stash-ov-more{display:block}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table tbody tr.stx-stash-ov-more td{display:block}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-ov-table td.stx-stash-ov-none{grid-column:1 / -1}
#ows-stacks .stx-stash-ov.is-narrow .stx-stash-mini{max-width:200px}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table th,body #ows-stacks #stx-panel-stash .stx-stash-ov-table td{padding:6px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;border-bottom:1px solid var(--line)}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th{white-space:normal;overflow:visible;word-break:keep-all;line-height:1.15;vertical-align:bottom;font-size:10.5px;letter-spacing:.03em;color:var(--jm-ink-3);border-bottom:2px solid var(--ink)}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th:first-child{font-size:12px;color:var(--ink)}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th:nth-child(n+2){text-align:right}
#ows-stacks .stx-stash-ov-rk{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table td.stx-stash-ov-name b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
/* The team code beside the name, not under it (the theme makes td small a block). */
body #ows-stacks #stx-panel-stash .stx-stash-ov-table td.stx-stash-ov-name small{display:inline;font-size:11px;color:var(--muted);font-weight:600}
#ows-stacks .stx-stash-ov-name small span + span::before{content:" \00b7  "}
#ows-stacks .stx-stash-ov-f{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
/* The weeks' opponents, small: the schedule's rating at a glance (shade set inline, Matchups' colours). */
body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th.stx-stash-ov-sqh{text-align:center}
#ows-stacks .stx-stash-mini{display:flex;gap:3px}
#ows-stacks .stx-stash-mini i{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;height:22px;
  border:1px solid var(--line);border-radius:2px;font:700 9.5px/1 var(--sans);font-style:normal;letter-spacing:0;color:var(--ink);overflow:hidden}
#ows-stacks .stx-stash-mini i.is-bye{border-style:dashed;background:transparent;font-size:8.5px;color:var(--jm-ink-3)}
/* His work trend: the number, with a small arrow when it moved (up dark orange, down grey; no green). */
body #ows-stacks #stx-panel-stash .stx-stash-ov-table td.stx-stash-ov-w{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
#ows-stacks .stx-stash-ov-w i{font-style:normal;font-size:9px;margin-right:3px;vertical-align:1px}
#ows-stacks .stx-stash-ov-w i.is-up{color:var(--orange-dark)}
#ows-stacks .stx-stash-ov-w i.is-down{color:var(--jm-ink-3)}
/* Tap a row for its reasons: the row stays peach while open, the reasons sit under it. */
body #ows-stacks #stx-panel-stash .stx-stash-ov-table tr.stx-stash-ov-r{cursor:pointer}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table tr.stx-stash-ov-r.is-open td{background:var(--hit)}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table tr.stx-stash-ov-more td{padding:8px 8px 12px 28px;white-space:normal;overflow:visible;background:var(--hit)}
#ows-stacks .stx-stash-ov-more ul{margin:0;padding:0;list-style:none}
#ows-stacks .stx-stash-ov-more li{margin:0 0 3px;padding-left:12px;position:relative;font:400 13px/1.4 var(--sans);color:var(--muted)}
#ows-stacks .stx-stash-ov-more li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--line)}
#ows-stacks .stx-stash-ov-more li.is-up{color:var(--ink)}
#ows-stacks .stx-stash-ov-more li.is-up::before{background:var(--orange)}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table td.stx-stash-ov-m{text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-stash .stx-stash-ov-table td.stx-stash-ov-m b{font-size:14px;color:var(--ink)}
#ows-stacks .stx-stash-ov-none{color:var(--muted);font-style:italic}
/* The "?" beside each list's title: hover (or tap) for a quick note on what it is and how it's ranked. */
body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th.stx-stash-ov-title{position:relative;overflow:visible}
#ows-stacks .stx-stash-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:4px;vertical-align:1px;
  border:1px solid var(--jm-ink-3);border-radius:50%;font:700 10px/1 var(--sans);letter-spacing:0;color:var(--jm-ink-3);cursor:help;outline:0}
#ows-stacks .stx-stash-tip:hover,#ows-stacks .stx-stash-tip:focus,#ows-stacks .stx-stash-tip.is-on{border-color:var(--orange-dark);color:var(--orange-dark)}
#ows-stacks .stx-stash-tip::after{content:attr(data-tip);position:absolute;left:-6px;top:calc(100% + 8px);z-index:20;width:min(230px,70vw);padding:9px 11px;
  background:var(--ink);color:#fff;border-radius:2px;box-shadow:0 10px 24px -10px rgba(22,19,15,.5);
  font:500 12.5px/1.45 var(--sans);letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
/* Hover on a mouse; a tap toggles .is-on (stash.js), since a phone doesn't hover. */
@media (hover:hover){#ows-stacks .stx-stash-tip:hover::after{opacity:1;visibility:visible}}
#ows-stacks .stx-stash-tip:focus-visible::after,#ows-stacks .stx-stash-tip.is-on::after{opacity:1;visibility:visible}
body #ows-stacks .stx-stash button.stx-stash-ov-all{all:unset;cursor:pointer;display:inline-block;margin:8px 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}
#ows-stacks .stx-stash-ov-name .owr-chk{vertical-align:middle;margin-right:3px}

/* ---- the full list: Player | Pts a week | the weeks' opponents | what stands out ---- */
body #ows-stacks #stx-panel-stash table.stx-stash-table{width:100%;max-width:1080px;margin:0;table-layout:fixed;border-collapse:collapse}
body #ows-stacks #stx-panel-stash .stx-stash-table th{padding:0 8px 6px;white-space:nowrap;vertical-align:bottom;color:var(--ink);border-bottom:2px solid var(--ink)}
body #ows-stacks #stx-panel-stash .stx-stash-table th:nth-child(1){width:24%}
body #ows-stacks #stx-panel-stash .stx-stash-table th:nth-child(2){width:11%}
body #ows-stacks #stx-panel-stash .stx-stash-table th:nth-child(3){width:21%}
body #ows-stacks #stx-panel-stash .stx-stash-table td{padding:9px 8px;font-size:14px;line-height:1.3;vertical-align:top;border-bottom:1px solid var(--line)}
#ows-stacks .stx-stash-name{font-weight:700;font-size:15px;color:var(--ink)}
#ows-stacks .stx-stash-player small,#ows-stacks .stx-stash-pts small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--sans);color:var(--muted)}
#ows-stacks .stx-stash-pts b{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* My Research's tick in a left gutter, so the name and its line start at one edge. */
body #ows-stacks #stx-panel-stash .stx-stash-table td.stx-stash-player{position:relative;padding-left:36px}
body #ows-stacks #stx-panel-stash .stx-stash-table td.stx-stash-player .owr-chk{position:absolute;left:8px;top:9px;float:none;margin:0}
/* The facts: one short line each; a rising number in dark orange (no green: Aaron, 2026-10-20). */
#ows-stacks .stx-stash-why ul{margin:0;padding:0;list-style:none}
#ows-stacks .stx-stash-why li{margin:0 0 3px;padding-left:12px;position:relative;font:400 13.5px/1.4 var(--sans);color:var(--muted)}
#ows-stacks .stx-stash-why li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--line)}
#ows-stacks .stx-stash-why li.is-up{color:var(--ink)}
#ows-stacks .stx-stash-why li.is-up::before{background:var(--orange)}

/* The weeks' opponents: Strength of Schedule's squares, small. The shade is set inline (Matchups' colours). */
#ows-stacks .stx-stash-next{display:flex;gap:4px}
#ows-stacks .stx-stash-sq{
  display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;max-width:62px;height:30px;
  border:1px solid var(--line);border-radius:2px;
  font:700 11px/1 var(--sans);font-style:normal;letter-spacing:.02em;color:var(--ink);white-space:nowrap
}
#ows-stacks .stx-stash-sq.is-bye{border-style:dashed;background:transparent;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--jm-ink-3)}
#ows-stacks p.stx-stash-key{display:flex;flex-wrap:wrap;gap:4px 16px;margin:-6px 0 12px;font:500 12.5px/1.4 var(--sans);color:var(--muted)}
#ows-stacks p.stx-stash-key span{display:inline-flex;align-items:center;gap:6px}
#ows-stacks .stx-stash-sw{display:inline-block;width:14px;height:14px;border:1px solid var(--line);border-radius:2px}
#ows-stacks .stx-stash-sw.is-soft{background:rgba(255,122,0,.5)}
#ows-stacks .stx-stash-sw.is-tough{background:rgba(23,21,18,.15)}

/* Secondary: outline only, ink border, no fill. */
body #ows-stacks .stx-stash button.stx-stash-more{
  display:inline-block;margin:14px 0 0;padding:8px 14px;cursor:pointer;
  border:1.5px solid var(--ink);border-radius:4px;background:transparent;
  font:700 14px/1.2 var(--sans);color:var(--ink)
}
body #ows-stacks .stx-stash button.stx-stash-more:hover{background:var(--hit)}
#ows-stacks .stx-stash-empty{margin:20px 0 0;color:var(--muted);font-size:15px}
#ows-stacks .stx-stash-how{margin:2px 0 14px}
#ows-stacks .stx-stash-notes li{max-width:86ch;font-size:14px;line-height:1.5}

/* ---- phone: each player stacks (name, then points and opponents side by side, then the facts) ---- */
@media (max-width:600px){
  body.stx-look-jm #ows-stacks #stx-panel-stash{padding:4px 12px 20px}
  #ows-stacks .stx-stash-controls{gap:12px}
  #ows-stacks .stx-stash-ctl{width:100%}
  #ows-stacks .stx-stash-find{max-width:none}
  #ows-stacks .stx-stash-ctl .stx-chips{flex-wrap:wrap}
  body #ows-stacks #stx-panel-stash table.stx-stash-table,
  body #ows-stacks #stx-panel-stash table.stx-stash-table tbody{display:block;width:100%}
  body #ows-stacks #stx-panel-stash table.stx-stash-table thead{display:none}
  body #ows-stacks #stx-panel-stash table.stx-stash-table tbody tr{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:6px;padding:10px 2px;border-bottom:1px solid var(--line)}
  body #ows-stacks #stx-panel-stash table.stx-stash-table tbody td{display:block;padding:0;border:0;background:transparent}
  body #ows-stacks #stx-panel-stash table.stx-stash-table td.stx-stash-player,
  body #ows-stacks #stx-panel-stash table.stx-stash-table td.stx-stash-why{grid-column:1 / -1}
  body #ows-stacks #stx-panel-stash table.stx-stash-table td.stx-stash-player{position:relative;padding-left:28px}
  body #ows-stacks #stx-panel-stash table.stx-stash-table td.stx-stash-player .owr-chk{left:0;top:0}
  body #ows-stacks #stx-panel-stash table.stx-stash-table td.stx-stash-player small{padding-left:0;margin-left:0}
  body #ows-stacks #stx-panel-stash table.stx-stash-table td[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;font:700 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
  #ows-stacks .stx-stash-sq{height:26px;max-width:none}
  #ows-stacks .stx-stash-name{font-size:14px;overflow-wrap:anywhere}
  #ows-stacks .stx-stash-why li{font-size:13px}
  /* Headings may wrap to two lines (never inside a word). */
  body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th{font-size:9.5px;letter-spacing:0;white-space:normal;overflow:visible;overflow-wrap:normal;word-break:keep-all;line-height:1.15;vertical-align:bottom}
  body #ows-stacks #stx-panel-stash .stx-stash-ov-table thead th:first-child{font-size:12px}
  body #ows-stacks #stx-panel-stash .stx-stash-ov-table td{padding:6px 3px}
  body #ows-stacks #stx-panel-stash .stx-stash-ov-table tr.stx-stash-ov-more td{padding:8px 6px 12px 22px}
  #ows-stacks .stx-stash-mini{gap:2px}
  #ows-stacks .stx-stash-mini i{font-size:8.5px;height:20px}
}