/* Buy Low · Sell High, 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. Built from the
   Waiver Wire pieces (waivers.css); 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-buysell{
  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="buysell"],[data-ltab="buysell"]){order:7}

/* ---- controls: position, then search (the guide's order) ------------------- */
#ows-stacks .stx-bsl-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;margin:4px 0 10px}
#ows-stacks .stx-bsl-ctl{display:flex;flex-direction:column;gap:6px}
#ows-stacks .stx-bsl-ctl .stx-label{margin:0}
#ows-stacks .stx-bsl-ctl .stx-chips{margin:0;align-items:center}
#ows-stacks .stx-bsl-find{flex:1 1 240px;max-width:340px}
body #ows-stacks .stx-bsl .stx-search input{font-size:15px;padding:8px 11px}
#ows-stacks p.stx-bsl-basis{margin:0 0 14px;font:500 13px/1.4 var(--sans);color:var(--muted)}

/* ---- the two lists: tabs (black when chosen, the toolkit's stx-mergednav) --- */
#ows-stacks .stx-bsl-sides{margin:0 0 6px}
#ows-stacks .stx-bsl-count{margin-left:4px;font-weight:500;font-variant-numeric:tabular-nums;opacity:.7}
#ows-stacks p.stx-bsl-lede{margin:0 0 6px;font:400 15px/1.4 var(--sans);color:var(--muted);max-width:72ch}

/* ---- a row: who he is on the left, the reasons on the right ---------------- */
#ows-stacks ol.stx-bsl-list{list-style:none;margin:0;padding:0;max-width:980px;border-top:2px solid var(--ink)}
#ows-stacks li.stx-bsl-row{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:4px 22px;
  margin:0;padding:14px 8px;border-bottom:1px solid var(--line);background:transparent
}
/* Alternating rows, as the toolkit's tables do. */
#ows-stacks li.stx-bsl-row:nth-child(even){background:color-mix(in srgb,var(--surface) 60%,transparent)}
#ows-stacks li.stx-bsl-row:hover{background:var(--hit)}
#ows-stacks .stx-bsl-who{display:flex;align-items:flex-start;gap:10px;min-width:0}
#ows-stacks .stx-bsl-n{flex:none;width:22px;font:700 13px/22px var(--sans);color:var(--jm-ink-3);font-variant-numeric:tabular-nums;text-align:right}
#ows-stacks .stx-bsl-id{min-width:0}
#ows-stacks .stx-bsl-name{font-weight:700;font-size:15px;line-height:22px;color:var(--ink)}
#ows-stacks .stx-bsl-id small{display:block;margin-top:2px;font:500 12.5px/1.35 var(--sans);letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums}
#ows-stacks .stx-bsl-id small.stx-bsl-side{margin-top:6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:var(--orange-dark)}
/* Ruled out or questionable: a quiet ink tag, never red (the Trade Analyzer's rule). */
#ows-stacks .stx-bsl-tag{display:inline-block;margin-left:4px;padding:1px 6px;border:1px solid var(--ink);border-radius:2px;font:700 10.5px/1.5 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);vertical-align:2px}

#ows-stacks .stx-bsl-body{min-width:0}
#ows-stacks ul.stx-bsl-why{list-style:none;margin:0;padding:0}
#ows-stacks ul.stx-bsl-why li{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;margin:0;padding:2px 0;font:400 14px/1.45 var(--sans);color:var(--ink)}
#ows-stacks .stx-bsl-k{padding-top:2px;font:700 11px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
#ows-stacks p.stx-bsl-also,
#ows-stacks p.stx-bsl-mixed{margin:6px 0 0;font:400 13.5px/1.45 var(--sans);color:var(--muted)}
#ows-stacks p.stx-bsl-also b{font-weight:700;color:var(--ink)}
#ows-stacks p.stx-bsl-mixed{margin:0 0 4px;color:var(--ink)}
#ows-stacks p.stx-bsl-grp{margin:8px 0 2px;font:700 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-dark)}

/* "Show all": secondary, outline only, ink border, no fill. */
body #ows-stacks .stx-bsl button.stx-bsl-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-bsl button.stx-bsl-more:hover{background:var(--hit)}
/* On every row, so a quiet dark-orange line (like the fold's), not a box. */
body #ows-stacks .stx-bsl button.stx-bsl-trade{
  display:inline-block;margin:8px 0 0;padding:0;cursor:pointer;
  border:0;background:transparent;
  font:700 13px/1.3 var(--sans);color:var(--orange-dark)
}
body #ows-stacks .stx-bsl button.stx-bsl-trade:hover{text-decoration:underline;text-underline-offset:2px}

/* BS3: the theme's quiet status line (a thin orange edge), tighter here. Beats the theme's own .stx-status font. */
body.stx-look-jm #ows-stacks p.stx-bsl-ideas{margin:2px 0 14px;padding:8px 12px;font-size:13.5px;max-width:80ch}
body.stx-look-jm #ows-stacks p.stx-bsl-ideas b{color:var(--ink)}

/* ---- the sections (Aaron, 2026-10-21): the same five on every row, two pieces only:
   number boxes and week squares. Orange shades and greys, no charts. ------------- */
#ows-stacks ul.stx-bsl-why li.stx-bsl-sec{padding:9px 0;border-top:1px solid var(--line)}
#ows-stacks ul.stx-bsl-why li.stx-bsl-sec:first-child{border-top:0;padding-top:2px}
#ows-stacks .stx-bsl-v{display:block;min-width:0}
#ows-stacks .stx-bsl-line{display:block;margin:0 0 3px}
#ows-stacks .stx-bsl-t{display:inline}
#ows-stacks .stx-bsl-line.is-quiet{color:var(--muted)}
/* Side by side: what he did (solid orange) against what's expected or what came before (outlined). */
#ows-stacks .stx-bsl-pairs{display:flex;flex-wrap:wrap;gap:10px 26px;margin:8px 0 2px}
#ows-stacks .stx-bsl-vs{display:flex;flex-direction:column;gap:4px;width:250px;max-width:100%}
#ows-stacks .stx-bsl-vs > .stx-bsl-cl{margin-bottom:1px}
#ows-stacks .stx-bsl-vsrow{display:grid;grid-template-columns:62px minmax(0,1fr) 36px;align-items:center;gap:8px}
#ows-stacks .stx-bsl-vsl{font:600 11.5px/1 var(--sans);color:var(--muted)}
#ows-stacks .stx-bsl-vst{display:block;height:9px;background:color-mix(in srgb,var(--ink) 5%,transparent)}
#ows-stacks .stx-bsl-vst i{display:block;height:100%;box-sizing:border-box}
#ows-stacks .stx-bsl-vst i.is-his{background:var(--orange)}
#ows-stacks .stx-bsl-vst i.is-usual{background:var(--hit);border:1px solid var(--orange)}
#ows-stacks .stx-bsl-vsrow b{font:700 13px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}

/* Week squares in labelled rows: the next four, the playoffs. */
#ows-stacks .stx-bsl-wkrow{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:start;gap:8px;margin:8px 0 0}
/* The average of those opponents, right under the row's name: "+9% more than usual". */
#ows-stacks .stx-bsl-wkrow > .stx-bsl-cl small{display:block;margin-top:3px;font:600 12px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
/* A label with more behind it on hover (1-for-1 trades). */
#ows-stacks .stx-bsl-k.has-hint{cursor:help;text-decoration:underline dotted;text-decoration-color:var(--jm-ink-3);text-underline-offset:3px}
#ows-stacks .stx-bsl-wkrow > .stx-bsl-cl{padding-top:7px}
#ows-stacks .stx-bsl-next{display:flex;flex-wrap:wrap;gap:6px 4px;min-width:0}
#ows-stacks .stx-bsl-sq{display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 50px;min-width:0}
#ows-stacks .stx-bsl-sq i{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:24px;border:1px solid var(--line);border-radius:2px;font:700 11px/1 var(--sans);font-style:normal;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
#ows-stacks .stx-bsl-sq.is-bye i,
#ows-stacks .stx-bsl-sq.is-x i{border-style:dashed;background:transparent;color:var(--jm-ink-3)}
#ows-stacks .stx-bsl-sq.is-bye i{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
#ows-stacks .stx-bsl-sq b{font:600 9.5px/1 var(--sans);color:var(--jm-ink-3)}

/* The details under his name: label over number, two to a line (four on a phone). */
#ows-stacks .stx-bsl-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
#ows-stacks .stx-bsl-cell{display:flex;flex-direction:column;min-width:0}
#ows-stacks .stx-bsl-cl{font:700 10px/1.25 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3)}
#ows-stacks .stx-bsl-cell b{font:700 15px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
#ows-stacks .stx-bsl .stx-bsl-cell small{display:block;margin:0;font:500 11px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
/* ---- The top-10 board (TB2): Matchups' Overview pattern, in this tool's own classes ---- */
#ows-stacks .stx-bsl-layout{margin:0 0 10px}
#ows-stacks .stx-bsl-ovh{font:800 18px/1.25 var(--sans);color:var(--ink)}
#ows-stacks details.stx-bsl-ovg{margin:14px 0 4px}
#ows-stacks details.stx-bsl-ovg > summary{margin:0 0 8px}
#ows-stacks .stx-bsl-ov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;align-items:start;max-width:980px}
#ows-stacks .stx-bsl-ov.is-one{grid-template-columns:minmax(0,340px)}
#ows-stacks .stx-bsl-ov-col{min-width:0}
body #ows-stacks .stx-bsl table.stx-bsl-ov-table{width:100%;margin:0;table-layout:fixed;font-size:13px}
#ows-stacks .stx-bsl-ov-table col.c-rk{width:23px}
#ows-stacks .stx-bsl-ov-table col.c-team{width:40px}
#ows-stacks .stx-bsl-ov-table col.c-m{width:54px}
body #ows-stacks .stx-bsl .stx-bsl-ov-table th,body #ows-stacks .stx-bsl .stx-bsl-ov-table td{padding:5px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
body #ows-stacks .stx-bsl .stx-bsl-ov-table thead th{font-size:10.5px;letter-spacing:.03em}
body #ows-stacks .stx-bsl .stx-bsl-ov-table thead th:first-child{font-size:11.5px;color:var(--ink)}
body #ows-stacks .stx-bsl .stx-bsl-ov-table thead th:last-child{text-align:right;letter-spacing:0;font-size:10px;padding-left:0}
#ows-stacks .stx-bsl-ov-rk{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks .stx-bsl .stx-bsl-ov-table td.stx-bsl-ov-name b{font-size:13px;font-weight:700;letter-spacing:-.01em}
body #ows-stacks .stx-bsl .stx-bsl-ov-table td.stx-bsl-ov-team{font-size:12px;color:var(--muted)}
body #ows-stacks .stx-bsl .stx-bsl-ov-table td.stx-bsl-ov-m{text-align:right}
body #ows-stacks .stx-bsl .stx-bsl-ov-table td.stx-bsl-ov-m b{font-size:13.5px;font-variant-numeric:tabular-nums}
#ows-stacks .stx-bsl-ov-none{color:var(--muted);font-style:italic}
body #ows-stacks .stx-bsl button.stx-bsl-ov-all{all:unset;cursor:pointer;display:inline-block;margin:7px 0 0 4px;font:700 13px/1.3 var(--sans);color:var(--orange-dark);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
#ows-stacks .stx-bsl-ov-name .owr-chk{vertical-align:middle;margin-right:3px}
@media (max-width:1100px){
  #ows-stacks .stx-bsl-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Folds: Our picks, Buy low, Sell high. The theme forces its own font on a summary, so the
   heading's words sit in spans that set their own. A + / − sign like the "How this works" fold. */
#ows-stacks details.stx-bsl-fold > summary{display:flex;align-items:flex-start;gap:10px;cursor:pointer;list-style:none}
#ows-stacks details.stx-bsl-fold > summary::-webkit-details-marker{display:none}
#ows-stacks .stx-bsl-chev{flex:none;width:14px;font:400 20px/1.1 var(--display);color:var(--orange-dark)}
#ows-stacks .stx-bsl-chev::before{content:"+"}
#ows-stacks details.stx-bsl-fold[open] .stx-bsl-chev::before{content:"\2212"}
#ows-stacks .stx-bsl-mtm-sum{display:block;min-width:0}
#ows-stacks details.stx-bsl-mtm[open] > summary{margin:0 0 10px}
#ows-stacks p.stx-bsl-mtm-linkp{margin:-4px 0 10px 24px}
/* ---- Moves To Make (BS6): our article's picks above the lists, and a tag in them ---- */
#ows-stacks .stx-bsl-mtmwrap{margin:0 0 16px}
/* Ours: a peach panel with an orange edge and the orange eyebrow (not the black offer card). */
#ows-stacks .stx-bsl-mtm{max-width:980px;padding:14px 18px 16px;border-left:4px solid var(--orange);border-radius:2px;background:var(--hit)}
#ows-stacks .stx-bsl-mtm-eyebrow{display:block;margin:0 0 4px;font:700 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
#ows-stacks .stx-bsl-mtm-eyebrow span{color:var(--orange-dark);letter-spacing:.12em}
#ows-stacks .stx-bsl-mtm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0}
#ows-stacks .stx-bsl-mtm-head b{font:800 18px/1.25 var(--sans);color:var(--ink)}
#ows-stacks .stx-bsl-mtm-by{font:600 13px/1.3 var(--sans);color:var(--muted)}
/* F5: when the picks were last saved, very small. */
#ows-stacks .stx-bsl-mtm-upd{font:500 11.5px/1.3 var(--sans);color:var(--jm-ink-3);font-variant-numeric:tabular-nums}
#ows-stacks a.stx-bsl-mtm-link{font:700 13px/1.3 var(--sans);color:var(--orange-dark);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
/* One card a pick: who, then the writer's words. */
#ows-stacks ul.stx-bsl-mtm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;list-style:none;margin:0;padding:0}
#ows-stacks ul.stx-bsl-mtm-list > li{margin:0;padding:10px 12px;min-width:0;border:1px solid var(--line);border-radius:2px;background:var(--jm-card-bg)}
#ows-stacks p.stx-bsl-mtm-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;margin:0}
#ows-stacks .stx-bsl-mtm-note{margin:7px 0 0}
#ows-stacks .stx-bsl-mtm-note p{margin:0 0 6px;font:400 13.5px/1.5 var(--sans);color:var(--ink)}
#ows-stacks .stx-bsl-mtm-note p:last-child{margin-bottom:0}
#ows-stacks .stx-bsl-mv{display:inline-block;padding:1px 6px;border-radius:2px;font:700 10.5px/1.5 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
#ows-stacks .stx-bsl-mv.is-buy{background:var(--hit);color:var(--orange-dark)}
#ows-stacks .stx-bsl-mv.is-sell{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
#ows-stacks .stx-bsl-mtm-name{font:700 14.5px/1.3 var(--sans);color:var(--ink)}
#ows-stacks ul.stx-bsl-mtm-list small{font:500 12px/1.3 var(--sans);color:var(--muted)}
#ows-stacks p.stx-bsl-mtm-missing{margin:0 0 4px;font:500 14px/1.4 var(--sans);color:var(--muted)}
#ows-stacks .stx-bsl-mtag{display:inline-block;margin-left:4px;padding:1px 6px;border:1px solid var(--orange);border-radius:2px;font:700 10px/1.5 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-dark);vertical-align:2px}
#ows-stacks .stx-bsl-mdot{display:inline-block;margin-left:3px;padding:0 3px;border:1px solid var(--orange);border-radius:2px;font:700 8.5px/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--orange-dark);vertical-align:1px}
#ows-stacks p.stx-bsl-mkey{margin:-2px 0 8px;font:500 12.5px/1.4 var(--sans);color:var(--muted)}
/* Staff: the picks box (Waiver Wire's column box). */
#ows-stacks .stx-bsl-edit{margin:10px 0 0;max-width:640px}
#ows-stacks .stx-bsl-edit > summary{cursor:pointer;font:700 14px/1.3 var(--sans);color:var(--orange-dark)}
#ows-stacks .stx-bsl-form{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#ows-stacks .stx-bsl-form .stx-label{margin:8px 0 0}
body #ows-stacks .stx-bsl-form input,body #ows-stacks .stx-bsl-form textarea{width:100%;box-sizing:border-box;padding:8px 10px;border:1.5px solid var(--ink);border-radius:4px;background:#fff;font:400 14px/1.4 var(--sans);color:var(--ink)}
body #ows-stacks .stx-bsl-form input[type=number]{max-width:110px}
#ows-stacks .stx-bsl-form-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0}
#ows-stacks .stx-bsl-form-msg{font-size:13px;color:var(--muted)}
#ows-stacks .stx-bsl-empty{margin:20px 0 0;color:var(--muted);font-size:15px}
/* HW2: the one fold sits at the top, under the headline's line. */
#ows-stacks .stx-bsl-how{margin:0 0 16px}
#ows-stacks .stx-bsl-how p{max-width:80ch;font-size:14px;line-height:1.5}

/* Phone: the reasons go under the name, full width. */
@media (max-width:600px){
  body.stx-look-jm #ows-stacks #stx-panel-buysell{padding:4px 12px 20px}
  #ows-stacks .stx-bsl-controls{gap:12px}
  #ows-stacks .stx-bsl-ctl{width:100%}
  #ows-stacks .stx-bsl-find{max-width:none}
  #ows-stacks .stx-bsl-sides{display:flex}
  #ows-stacks .stx-bsl-sides .stx-mergednav-btn{flex:1 1 0;padding:8px 6px;font-size:13px;text-align:center}
  #ows-stacks li.stx-bsl-row{grid-template-columns:minmax(0,1fr);padding:12px 4px;gap:8px}
  #ows-stacks .stx-bsl-n{width:18px}
  #ows-stacks .stx-bsl-body{padding-left:28px}
  #ows-stacks ul.stx-bsl-why li{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0}
  #ows-stacks .stx-bsl-k{padding:0;font-size:10.5px}
  #ows-stacks .stx-bsl-cells{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 8px}
  #ows-stacks .stx-bsl-cell b{font-size:14px}
  #ows-stacks .stx-bsl-pairs{flex-direction:column;gap:12px}
  #ows-stacks .stx-bsl-vs{width:100%}
  #ows-stacks .stx-bsl-wkrow{grid-template-columns:minmax(0,1fr);gap:4px}
  #ows-stacks .stx-bsl-wkrow > .stx-bsl-cl{padding-top:0}
  #ows-stacks .stx-bsl-sq{flex:0 0 calc((100% - 20px) / 6)}
  #ows-stacks .stx-bsl-name{overflow-wrap:anywhere}
  #ows-stacks .stx-bsl-ov,#ows-stacks .stx-bsl-ov.is-one{grid-template-columns:minmax(0,1fr)}
}