/* Bye Weeks, 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 (4px on chips), Archivo Black for the headline only — the week
   headings are the guide's section sub-head, Archivo extra-bold 18px. 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-byes{
  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 the Fantasy tab. */
.ows-stacks .stx-tabs .stx-tab:is([data-tab="byes"],[data-ltab="byes"]){order:7}

/* ---- controls: position, then week, then search (the guide's order) ------- */
#ows-stacks .stx-bye-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 26px;margin:4px 0 6px}
#ows-stacks .stx-bye-ctl{display:flex;flex-direction:column;gap:6px}
#ows-stacks .stx-bye-ctl .stx-label{margin:0}
#ows-stacks .stx-bye-ctl .stx-chips{margin:0;align-items:center}
#ows-stacks .stx-bye-find{flex:1 1 260px;max-width:380px}
body #ows-stacks .stx-bye .stx-search input{font-size:15px;padding:8px 11px}
body #ows-stacks .stx-bye-jump .stx-chip-btn{padding:5px 9px;font-size:12.5px}
body #ows-stacks .stx-bye button.stx-bye-pastbtn{all:unset;cursor:pointer;margin-left:4px;font:700 12.5px/1.2 var(--sans);color:var(--orange-dark);text-decoration:underline;text-underline-offset:2px}

/* ---- a week --------------------------------------------------------------- */
/* The theme pads every <section> 60px top and bottom; these are tight blocks. */
body #ows-stacks #stx-panel-byes section.stx-bye-week{margin:24px 0 0;padding:0;scroll-margin-top:90px}
#ows-stacks h4.stx-bye-h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:0 !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-bye-h span{font:500 13px/1.3 var(--sans);letter-spacing:0;color:var(--jm-ink-3)}
/* A label, not a button: outlined, so it never reads as a pressed option. */
#ows-stacks .stx-bye-when{display:inline-block;padding:2px 7px;border:1px solid var(--line);border-radius:4px;font:700 10.5px/1.4 var(--sans);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);vertical-align:2px}
#ows-stacks .stx-bye-when.is-now{border-color:var(--orange);color:var(--orange-dark)}
#ows-stacks .stx-bye-week.is-past h4.stx-bye-h{border-bottom-color:var(--jm-ink-3);color:var(--muted)}

#ows-stacks .stx-bye-teams{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 10px}
#ows-stacks .stx-bye-team{padding:2px 8px;border:1px solid var(--line);border-radius:4px;background:var(--page);font:700 12.5px/1.4 var(--sans);letter-spacing:.04em;color:var(--ink)}

/* Four tables across, like the sheet everyone knows; fewer as the card narrows. */
#ows-stacks .stx-bye-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
#ows-stacks .stx-bye-grid.is-one{grid-template-columns:minmax(0,520px)}
body #ows-stacks #stx-panel-byes table.stx-bye-table{width:100%;max-width:none;margin:0;table-layout:auto}
body #ows-stacks #stx-panel-byes .stx-bye-table th{padding:0 6px 6px;white-space:nowrap;vertical-align:bottom;color:var(--ink)}
body #ows-stacks #stx-panel-byes .stx-bye-table th.stx-bye-ppg{white-space:normal;min-width:58px}
body #ows-stacks #stx-panel-byes .stx-bye-table td{padding:5px 6px;font-size:14px;line-height:1.3;vertical-align:middle}
body #ows-stacks #stx-panel-byes .stx-bye-table .stx-bye-n{width:1%;text-align:right;font-variant-numeric:tabular-nums}
body #ows-stacks #stx-panel-byes .stx-bye-table td.stx-bye-n{white-space:nowrap}
body #ows-stacks #stx-panel-byes .stx-bye-name{font-weight:600;color:var(--ink)}
body #ows-stacks #stx-panel-byes .stx-bye-name small{margin-left:2px;font-weight:600;letter-spacing:.03em}
/* Starter level: the guide's peach highlight on the row does the pointing. */
body #ows-stacks #stx-panel-byes .stx-bye-table tbody tr.is-key td{background:var(--hit)}
body #ows-stacks #stx-panel-byes .stx-bye-table tbody tr.is-key .stx-bye-rk{font-weight:800}
body #ows-stacks #stx-panel-byes tr.stx-bye-none td{color:var(--jm-ink-3);font-style:italic}

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

@media (max-width:1100px){
  #ows-stacks .stx-bye-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  body.stx-look-jm #ows-stacks #stx-panel-byes{padding:4px 12px 20px}
  #ows-stacks .stx-bye-controls{gap:12px}
  #ows-stacks .stx-bye-ctl{width:100%}
  #ows-stacks .stx-bye-find{max-width:none}
  #ows-stacks .stx-bye-grid,#ows-stacks .stx-bye-grid.is-one{grid-template-columns:minmax(0,1fr)}
  body #ows-stacks #stx-panel-byes .stx-bye-table td{font-size:13.5px}
}