/* Strength of Schedule, 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. Controls and card are Bye Weeks' (byes.css);
   the week squares carry Matchups' orange-soft / grey-tough shading, set
   inline by sos.js. Only the shapes the system has no class for. */

/* The card every tool sits in (stacks-jm-theme.css lists its panels by id). */
body.stx-look-jm #ows-stacks #stx-panel-sos{
  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: next to RB Handcuffs. */
.ows-stacks .stx-tabs .stx-tab:is([data-tab="sos"],[data-ltab="sos"]){order:7}
/* .stx-table's two row colours (the theme types them in; it has no token). */
#ows-stacks #stx-panel-sos{--sos-row-a:#fffdfb;--sos-row-b:#f8f5f0}

/* ---- controls: position, then weeks, then search (the guide's order) ------- */
#ows-stacks .stx-sos-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;margin:4px 0 10px}
#ows-stacks .stx-sos-ctl{display:flex;flex-direction:column;gap:6px}
#ows-stacks .stx-sos-ctl .stx-label{margin:0}
#ows-stacks .stx-sos-ctl .stx-chips{margin:0;align-items:center}
#ows-stacks .stx-sos-find{flex:1 1 240px;max-width:340px}
body #ows-stacks .stx-sos .stx-search input{font-size:15px;padding:8px 11px}
body.stx-look-jm #ows-stacks .stx-sos-span button small{display:block;margin-top:1px;font:500 11px/1.2 var(--sans);color:var(--muted)}
body.stx-look-jm #ows-stacks .stx-sos-span button.is-active small{color:inherit;opacity:.9}
#ows-stacks .stx-sos-span .stx-sos-short{display:none}

/* ---- the key line ---------------------------------------------------------- */
#ows-stacks p.stx-sos-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin:0 0 12px;font:500 13px/1.4 var(--sans);color:var(--muted)}
#ows-stacks .stx-sos-key > span{display:inline-flex;align-items:center;gap:6px}
#ows-stacks .stx-sos-sw{display:inline-block;width:14px;height:14px;border:1px solid var(--line);border-radius:2px}
#ows-stacks .stx-sos-sw.is-soft{background:rgba(255,122,0,.5)}
#ows-stacks .stx-sos-sw.is-tough{background:rgba(23,21,18,.15)}
#ows-stacks .stx-sos-sw.is-po{height:4px;border:0;border-radius:0;background:var(--orange-dark)}
#ows-stacks .stx-sos-key .stx-sos-basis{color:var(--jm-ink-3)}

/* ---- one position: a row a team, its weeks in a strip ---------------------- */
#ows-stacks .stx-sos-list{border-top:2px solid var(--ink)}
#ows-stacks .stx-sos-row{
  display:grid;grid-template-columns:28px minmax(150px,230px) minmax(0,1fr) 84px;
  gap:0 12px;align-items:center;padding:8px 8px;border-bottom:1px solid var(--line)
}
#ows-stacks .stx-sos-row:nth-child(even){background:var(--sos-row-a)}
#ows-stacks .stx-sos-row:nth-child(odd){background:var(--sos-row-b)}
#ows-stacks .stx-sos-row:not(.stx-sos-head):hover,
#ows-stacks .stx-sos-row.is-focus{background:var(--hit)}
#ows-stacks .stx-sos-head{padding-top:7px;padding-bottom:7px;background:transparent !important;font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
#ows-stacks .stx-sos-head .stx-sos-avg{cursor:help}

#ows-stacks .stx-sos-rank{font:700 14px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
#ows-stacks .stx-sos-head .stx-sos-rank{font:inherit;color:inherit}
#ows-stacks .stx-sos-team{min-width:0}
#ows-stacks .stx-sos-team > b{display:block;font:700 15px/1.25 var(--sans);color:var(--ink)}
#ows-stacks .stx-sos-abbr{display:none}
#ows-stacks .stx-sos-who{display:block;margin-top:2px;font:500 12.5px/1.35 var(--sans);color:var(--muted)}
#ows-stacks .stx-sos-who i{font-style:normal;color:var(--jm-ink-3)}

#ows-stacks .stx-sos-strip{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
#ows-stacks .stx-sos-wk{text-align:center;font-variant-numeric:tabular-nums;padding-bottom:3px;border-bottom:2px solid transparent}
#ows-stacks .stx-sos-wk em{font-style:normal}
#ows-stacks .stx-sos-wk.is-po{color:var(--orange-dark);border-bottom-color:var(--orange-dark)}
body #ows-stacks .stx-sos button.stx-sos-sq{
  all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:1px;
  height:36px;min-width:0;border:1px solid var(--line);border-radius:2px;background:var(--page);
  font:700 12px/1 var(--sans);letter-spacing:.02em;color:var(--ink);cursor:pointer;overflow:hidden;white-space:nowrap
}
body #ows-stacks .stx-sos button.stx-sos-sq i{font:500 10.5px/1 var(--sans);font-style:normal;color:var(--muted)}
body #ows-stacks .stx-sos button.stx-sos-sq.is-bye{border-style:dashed;background:transparent;font:700 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--jm-ink-3)}
body #ows-stacks .stx-sos button.stx-sos-sq:hover,
body #ows-stacks .stx-sos button.stx-sos-sq:focus-visible{border-color:var(--ink)}
body #ows-stacks .stx-sos button.stx-sos-sq.is-tip{border:2px solid var(--ink)}

#ows-stacks .stx-sos-avg{text-align:right}
#ows-stacks .stx-sos-avg b{display:inline-block;min-width:52px;padding:4px 7px;border-radius:2px;font:700 15px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);text-align:center}
#ows-stacks .stx-sos-avg small{display:block;margin-top:3px;font:500 11.5px/1.2 var(--sans);color:var(--muted)}

/* The week you tapped, in words: the guide's quiet status line. */
#ows-stacks p.stx-sos-tip{
  grid-column:2 / -1;margin:8px 0 0;padding:6px 10px;
  border-left:2px solid var(--orange);background:rgba(255,122,0,.06);
  font:500 13.5px/1.4 var(--sans);color:var(--ink)
}

/* ---- All: four positions side by side, as ranks ---------------------------- */
body #ows-stacks #stx-panel-sos table.stx-sos-all{width:100%;max-width:760px;margin:0;table-layout:fixed;border-collapse:collapse}
body #ows-stacks #stx-panel-sos .stx-sos-all thead th{padding:0 4px 6px;vertical-align:bottom;border-bottom:2px solid var(--ink);text-align:center}
body #ows-stacks #stx-panel-sos .stx-sos-all thead th:first-child{width:34%;text-align:left}
body #ows-stacks .stx-sos button.stx-sos-sort{all:unset;cursor:pointer;font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
body #ows-stacks .stx-sos button.stx-sos-sort.is-on,
body #ows-stacks .stx-sos button.stx-sos-sort:hover{color:var(--ink)}
body #ows-stacks #stx-panel-sos .stx-sos-all tbody th{padding:6px 8px;font:700 14.5px/1.25 var(--sans);color:var(--ink);text-align:left;vertical-align:middle;letter-spacing:0;text-transform:none}
body #ows-stacks #stx-panel-sos .stx-sos-all tbody td{padding:4px;vertical-align:middle}
body #ows-stacks #stx-panel-sos .stx-sos-all tbody tr.is-focus > *{background:var(--hit)}
body #ows-stacks .stx-sos button.stx-sos-tile{
  all:unset;box-sizing:border-box;display:block;width:100%;padding:6px 4px;
  border:1px solid var(--line);border-radius:2px;text-align:center;cursor:pointer
}
body #ows-stacks .stx-sos button.stx-sos-tile:hover,
body #ows-stacks .stx-sos button.stx-sos-tile:focus-visible{border-color:var(--ink)}
#ows-stacks .stx-sos-tile b{display:block;font:700 15px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
#ows-stacks .stx-sos-tile small{display:block;margin-top:1px;font:500 11.5px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted)}

/* ---- Overview: the top-10 board (Matchups' Overview, vsdef.css) ------------- */
#ows-stacks .stx-sos-layout{margin:4px 0 12px}
/* The board has its own two windows and all four positions: only the search applies. */
#ows-stacks .stx-sos.is-ov .stx-sos-gridonly{display:none}
/* The theme sets the group heading's type (Archivo 800, 18px); only the spacing is ours. */
#ows-stacks h3.stx-sos-ov-h{margin:6px 0 8px}
#ows-stacks h3.stx-sos-ov-h small{display:inline-block;white-space:nowrap;margin-left:6px;font:500 12px/1.2 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--muted)}
#ows-stacks .stx-sos-ov + h3.stx-sos-ov-h{margin-top:26px}
#ows-stacks .stx-sos-ov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;align-items:start}
#ows-stacks .stx-sos-ov-col{min-width:0}
body #ows-stacks .stx-sos table.stx-sos-ov-table{width:100%;max-width:none;margin:0;table-layout:fixed;font-size:13px}
#ows-stacks .stx-sos-ov-table col.c-rk{width:23px}
#ows-stacks .stx-sos-ov-table col.c-tm{width:38px}
#ows-stacks .stx-sos-ov-table col.c-m{width:52px}
body #ows-stacks .stx-sos .stx-sos-ov-table th,body #ows-stacks .stx-sos .stx-sos-ov-table td{padding:5px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
body #ows-stacks .stx-sos .stx-sos-ov-table thead th{font-size:10.5px;letter-spacing:.03em}
body #ows-stacks .stx-sos .stx-sos-ov-table thead th:first-child{font-size:11.5px;color:var(--ink)}
body #ows-stacks .stx-sos .stx-sos-ov-table thead th:last-child{text-align:right;letter-spacing:0;font-size:10px;padding-left:0}
/* "Vs usual" is a hair wider than its column: let it run left into the room "Opponents" leaves. */
body #ows-stacks .stx-sos .stx-sos-ov-table thead th:last-child{overflow:visible;text-overflow:clip;direction:rtl}
#ows-stacks .stx-sos-ov-table tbody tr{cursor:pointer}
#ows-stacks .stx-sos-ov-rk{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks .stx-sos .stx-sos-ov-table td.stx-sos-ov-tm b{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
body #ows-stacks .stx-sos .stx-sos-ov-table td.stx-sos-ov-opp{font-size:11.5px;letter-spacing:-.02em;padding-left:1px;padding-right:1px;color:var(--muted);font-variant-numeric:tabular-nums}
#ows-stacks .stx-sos-ov-opp i{font-style:normal;color:var(--jm-ink-3)}
body #ows-stacks .stx-sos .stx-sos-ov-table td.stx-sos-ov-m{text-align:right}
body #ows-stacks .stx-sos .stx-sos-ov-table td.stx-sos-ov-m b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
#ows-stacks .stx-sos-ov-none{color:var(--muted);font-style:italic}
body #ows-stacks .stx-sos button.stx-sos-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}
/* Four opponents need ~125px: four across only where each list gets that (Matchups' game column is shorter). */
@media (max-width:1320px){
  #ows-stacks .stx-sos-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  #ows-stacks .stx-sos-ov{grid-template-columns:minmax(0,1fr)}
}

#ows-stacks .stx-sos-empty{margin:20px 0 0;color:var(--muted);font-size:15px}
/* Under the headline's one line, before the controls (HW2). */
#ows-stacks .stx-sos-how{margin:0 0 14px}
#ows-stacks .stx-sos-how p{max-width:80ch;font-size:14px;line-height:1.5}

/* Narrower card: the strip gets the room. */
@media (max-width:900px){
  #ows-stacks .stx-sos-row{grid-template-columns:24px minmax(120px,170px) minmax(0,1fr) 72px;gap:0 8px}
  #ows-stacks .stx-sos-wk em{display:none}
  body #ows-stacks .stx-sos button.stx-sos-sq{font-size:11px}
}
/* Phone: team and number on one line, its weeks full width under them. */
@media (max-width:600px){
  body.stx-look-jm #ows-stacks #stx-panel-sos{padding:4px 12px 20px}
  #ows-stacks .stx-sos-controls{gap:12px}
  #ows-stacks .stx-sos-ctl{width:100%}
  #ows-stacks .stx-sos-find{max-width:none}
  /* All four windows on one line at 375px: four equal parts, short names. */
  body.stx-look-jm #ows-stacks .stx-sos-span{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:none}
  body.stx-look-jm #ows-stacks .stx-sos-span button{padding:6px 2px;font-size:12.5px;white-space:nowrap;text-align:center}
  #ows-stacks .stx-sos-span .stx-sos-long{display:none}
  #ows-stacks .stx-sos-span .stx-sos-short{display:inline}
  body.stx-look-jm #ows-stacks .stx-sos-span button small{font-size:10.5px}
  #ows-stacks .stx-sos-row{
    grid-template-columns:22px minmax(0,1fr) auto;
    grid-template-areas:"rank team avg" "strip strip strip" "tip tip tip";
    gap:6px 8px;padding:9px 2px
  }
  #ows-stacks .stx-sos-rank{grid-area:rank;align-self:start;padding-top:2px}
  #ows-stacks .stx-sos-team{grid-area:team}
  #ows-stacks .stx-sos-avg{grid-area:avg;align-self:start}
  #ows-stacks .stx-sos-strip{grid-area:strip;gap:1px}
  #ows-stacks p.stx-sos-tip{grid-area:tip;margin:2px 0 0}
  #ows-stacks .stx-sos-head .stx-sos-team{align-self:end}
  #ows-stacks .stx-sos-avg b{min-width:0;font-size:14px;padding:3px 6px}
  body #ows-stacks .stx-sos button.stx-sos-sq{height:30px;font-size:9px;letter-spacing:-.05em}
  body #ows-stacks .stx-sos button.stx-sos-sq i{display:none}
  body #ows-stacks .stx-sos button.stx-sos-sq.is-bye{font-size:8.5px;letter-spacing:.02em}
  /* All: the team code, so four squares fit. */
  body #ows-stacks #stx-panel-sos .stx-sos-all thead th:first-child{width:52px}
  #ows-stacks .stx-sos-all .stx-sos-full{display:none}
  #ows-stacks .stx-sos-all .stx-sos-abbr{display:inline;letter-spacing:.04em}
  body #ows-stacks .stx-sos button.stx-sos-tile{padding:5px 2px}
  #ows-stacks .stx-sos-tile b{font-size:14px}
}