/* OWS — Same-Game Parlay. Rebuilt 2026-10-18 to match Ladder Bets and
   docs/TOOLS-DESIGN-GUIDE.md: the toolkit's controls, option buttons
   (stx-subtabs), tables, status lines and fold carry the look; this sheet
   lays them out and draws the grid. Theme tokens only. Never scrolls
   sideways: the grid is six squares wide and fits a 375px phone. */

.sgp-readme{margin:0 0 16px}
.sgp-readme .stx-note-body p{margin:0 0 10px!important;max-width:74ch}
.sgp-readme .stx-note-body p:last-child{margin-bottom:0!important}
.sgp-readme-list{margin:0!important;padding-left:18px;max-width:74ch}
.sgp-readme-list li{margin:0 0 4px}
/* The fold's two closing lines on the tool's own page (the Toolkit's tabs-merged.css styles them there). */
.ows-sgp-standalone .stx-note-body ul.stx-how-end{margin:10px 0 0!important;padding:8px 0 0 18px!important;border-top:1px solid var(--line);color:var(--muted);max-width:74ch}
/* Inside /stacks/ the toolkit already prints this tool's header. */
.stx-sec-embed .ows-sgp-standalone > .stx-hero{display:none}
.ows-sgp-standalone .stx-legal{margin-top:8px!important;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* One even row, the Ladder's. */
.sgp-row-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
/* Second row: the rest of the lineup. Each picked teammate is an orange option chip; tap to remove. */
.sgp-row-lineup{margin-top:14px;align-items:flex-start}
.sgp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sgp-chips:empty{display:none}
#ows-stacks .sgp-chip{font-size:13px;padding:4px 9px}
#ows-stacks .sgp-chip span{margin-left:4px;font-weight:400}
#ows-stacks .sgp-row-lineup select{padding:7px 9px;font-size:14px;line-height:1.3}
/* The lineup column in the game log: one line per teammate; dimmed when he doesn't fit. */
.sgp-lu{display:block;font-size:12px;line-height:1.35;white-space:nowrap}
.sgp-lu.is-off{opacity:.45}
.sgp-field{display:flex;flex-direction:column;flex:0 0 auto;min-width:0}
.sgp-field .stx-label{margin-bottom:6px}
.sgp-field-grow{flex:1 1 200px}
.sgp-field-mate{flex:1 1 190px}
.sgp-field-mate select{width:100%}
.sgp-search{position:relative}
#ows-stacks .sgp-search input{width:100%;height:auto;padding:7px 9px;font-size:14px;line-height:1.3}
#ows-stacks .sgp-controls select,#ows-stacks .sgp-stats select{padding:7px 9px;font-size:14px;line-height:1.3}
.sgp-field .stx-check{padding-bottom:8px}

.sgp-say{margin:18px 0 10px!important;font:800 18px/1.3 var(--sans)!important;color:var(--ink)}
.sgp-name{cursor:pointer}
.sgp-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.sgp-opt .stx-label{margin:0}
.sgp-opt .stx-subtabs{margin:0;flex-wrap:wrap}
.sgp-opt .stx-subtab small{font-weight:400;opacity:.75}
.sgp-stats{gap:10px 18px}
.sgp-stat{display:inline-flex;align-items:center;gap:8px}
.sgp-thin,.sgp-src{margin:0 0 10px!important}

/* The grid: both players' rungs, each square how often both cleared. */
.sgp-grid-wrap{margin:4px 0 18px;max-width:640px}
.sgp-grid{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;font-variant-numeric:tabular-nums}
.sgp-grid-cap{margin:0 0 6px!important}
.sgp-grid th{font:700 12px/1.2 var(--sans);color:var(--muted);text-align:center;padding:4px 2px;white-space:nowrap}
.sgp-grid tbody th{text-align:right;padding-right:6px}
.sgp-grid th small{display:block;font-weight:400;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-dark)}
.sgp-grid th.is-line{color:var(--ink)}
.sgp-grid .sgp-corner{width:16%;text-align:left;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--jm-ink-3,var(--muted))}
.sgp-grid .sgp-corner span{display:block;overflow:hidden;text-overflow:ellipsis}
.sgp-grid td{padding:0}
#ows-stacks .sgp-cell{display:block;width:100%;margin:0;padding:8px 2px;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  background:color-mix(in srgb,var(--orange) var(--sgp-a,0%),var(--page));color:var(--ink);font:inherit;text-align:center;line-height:1.15}
#ows-stacks .sgp-cell b{display:block;font:700 15px/1.15 var(--sans)}
#ows-stacks .sgp-cell small{display:block;font-size:11px;opacity:.75}
#ows-stacks .sgp-cell.is-deep{color:#fff}
#ows-stacks .sgp-cell:hover{border-color:var(--ink)}
#ows-stacks .sgp-cell.is-on{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}

/* The picked square: facts side by side, no boxes. */
.sgp-detail{margin:0 0 20px;padding:14px 0 0;border-top:1px solid var(--line)}
.sgp-pick{margin:0 0 4px!important;font:800 18px/1.3 var(--sans)!important;color:var(--ink)}
.sgp-line{margin:0 0 12px!important;color:var(--muted);font-size:15px}
.sgp-facts{display:flex;flex-wrap:wrap;gap:12px 0;margin:0 0 14px}
.sgp-facts > div{flex:1 1 110px;padding:0 14px;border-left:1px solid var(--line)}
.sgp-facts > div:first-child{padding-left:0;border-left:0}
.sgp-facts dt{font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3,var(--muted));margin:0 0 4px}
.sgp-facts dd{margin:0;font:400 26px/1.1 var(--display);color:var(--ink)}
.sgp-facts small{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.sgp-books{width:100%;margin:0 0 14px;font-variant-numeric:tabular-nums}
/* A book's closest line ("closest: 60+") and the lines a multiplied price used sit small under the price. */
.sgp-books td small{display:block;margin-top:2px;font-size:12px}
.sgp-books-note{margin:-6px 0 14px!important;color:var(--muted);font-size:13px}
.sgp-books-note + .sgp-books-note{margin-top:-10px!important}
/* Your books: the Props Board's closed fold of chips (props-board.css .pb-pick), drawn here so the
   standalone page has it too. */
#ows-stacks .sgp-bpick{position:relative}
#ows-stacks .sgp-bpick summary{padding:7px 9px;border:1.5px solid var(--ink);border-radius:4px;background:var(--page);font:400 14px/1.3 var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap}
#ows-stacks .sgp-bpick[open] summary{background:var(--hit)}
#ows-stacks .sgp-bpick-body{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:min(420px,calc(100vw - 32px));padding:8px 12px 12px;
  background:var(--page);border:1px solid var(--line);border-radius:2px;box-shadow:0 12px 28px color-mix(in srgb,var(--ink) 14%,transparent)}
#ows-stacks .sgp-bpick-h{margin:6px 0 4px;font:700 11px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--jm-ink-3,var(--muted))}
#ows-stacks .sgp-bpick-chips{margin:0;flex-wrap:wrap}
#ows-stacks .sgp-bpick-note{margin:6px 0 0;font:400 13px/1.3 var(--sans);color:var(--orange-dark)}
.sgp-mine .stx-label{display:block;margin:0 0 6px}
.sgp-mine-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
#ows-stacks .sgp-mine input{width:96px;padding:7px 9px;font-size:15px;text-align:right}
.sgp-cmp small{display:block;color:var(--muted);font-size:12px}
.sgp-c{font:700 14px/1.3 var(--sans);color:var(--muted)}
.sgp-c.is-good{color:var(--orange-dark)}
.sgp-hint{color:var(--muted);font-size:14px}

/* The game log follows the split. */
.sgp-sub{margin:4px 0 8px!important;font:800 16px/1.3 var(--sans)!important;color:var(--ink)}
.sgp-log{width:100%;font-variant-numeric:tabular-nums}
.sgp-log td small{display:block;margin-top:2px}
.sgp-score{font-weight:700;color:var(--ink)}
/* Each player's cell: the searched stat on top, the rest of his box score under it. */
.sgp-log td.sgp-box{vertical-align:top}
.sgp-v{display:block;font-size:15px;color:var(--ink)}
.sgp-v small{display:inline!important;margin:0!important;font-size:11px;font-weight:400;color:var(--muted)}
.sgp-log td.is-hit .sgp-v{font-weight:700;color:var(--ink)}
.sgp-boxline{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}
.sgp-boxline span{white-space:nowrap}
.sgp-boxline span + span::before{content:"· "}
#ows-stacks .sgp-log tr.is-both td{background:var(--hit)}
#ows-stacks .sgp-log tr.is-both td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.sgp-both{font:700 13px/1.2 var(--sans);color:var(--orange-dark)}
.sgp-none{color:var(--line)}
.sgp-more{margin:10px 0 0}

@media (max-width:640px){
  .sgp-field,.sgp-field-grow,.sgp-field-mate{flex:1 1 100%}
  #ows-stacks .sgp-controls select{width:100%}
  .sgp-grid{border-spacing:2px}
  #ows-stacks .sgp-cell{padding:7px 0}
  #ows-stacks .sgp-cell b{font-size:13px}
  #ows-stacks .sgp-cell small{font-size:10px}
  .sgp-grid th{font-size:11px}
  .sgp-facts > div{flex:1 1 45%;padding:0 10px 0 0;border-left:0}
  .sgp-facts dd{font-size:22px}
  #ows-stacks .sgp-log,#ows-stacks .sgp-books{table-layout:fixed}
  /* Phone: the row's shading already says "Both", so its column goes; the players get the room. */
  #ows-stacks .sgp-log .sgp-log-both{display:none}
  #ows-stacks .sgp-log th:first-child{width:27%}
  #ows-stacks .sgp-log th{letter-spacing:.02em}
  .sgp-boxline{font-size:11px}
  .sgp-lu{white-space:normal;font-size:11px}
  #ows-stacks .sgp-log th.sgp-log-c{width:20%}
  #ows-stacks .sgp-log th,#ows-stacks .sgp-log td,#ows-stacks .sgp-books th,#ows-stacks .sgp-books td{padding-left:4px;padding-right:4px;white-space:normal;overflow-wrap:anywhere}
  /* Book prices: words wrap between words, never inside one ("DraftKin gs", "MULTIPLI ED"). One step
     stronger than the theme's `body.stx-look-jm #ows-stacks .stx-table th`, as ladder.css does. */
  /* Your books opens under the whole row, inside the page, not off the right edge. */
  .sgp-opt-books{position:relative}
  #ows-stacks .sgp-opt-books .sgp-bpick{position:static}
  #ows-stacks .sgp-opt-books .sgp-bpick-body{width:100%;box-sizing:border-box}
  body #ows-stacks .stx-table.sgp-books th:first-child{width:28%}
  body #ows-stacks .stx-table.sgp-books thead th{font-size:10px;letter-spacing:.02em;overflow-wrap:normal;word-break:normal}
  body #ows-stacks .stx-table.sgp-books td:first-child{overflow-wrap:normal;font-size:14px}
}