/* OWS — Ladder bets. Built to docs/TOOLS-DESIGN-GUIDE.md (2026-10-18): the
   toolkit's controls, option buttons (stx-subtabs), chips, tables, status
   lines and fold carry the look; this sheet only lays them out and draws the
   bar. Theme tokens only — no colours or fonts of its own. Never scrolls
   sideways: on a phone only the book being compared with keeps its column. */

/* "Read this first": the toolkit's closed fold, every note in it. */
.ldr-readme{margin:0 0 16px}
.ldr-readme-list{margin:0!important;padding-left:18px;max-width:74ch}
.ldr-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-ladder-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; don't print a second one. */
.stx-sec-embed .ows-ladder-standalone > .stx-hero{display:none}
.ows-ladder-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: Player is the same height as Stat, Split by teammate and Seasons. */
.ldr-row-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.ldr-field{display:flex;flex-direction:column;flex:0 0 auto;min-width:0}
.ldr-field .stx-label{margin-bottom:6px}
.ldr-field-grow{flex:1 1 220px}
.ldr-field-mate{flex:1 1 200px}
.ldr-field-mate select{width:100%}
.ldr-search{position:relative}
#ows-stacks .ldr-search input{width:100%;height:auto;padding:7px 9px;font-size:14px;line-height:1.3}
#ows-stacks .ldr-controls select{padding:7px 9px;font-size:14px;line-height:1.3}
.ldr-field .stx-check{padding-bottom:8px}

/* Teammates in / Teammates out: a second control row, laid out like the Same-Game Parlay's
   (sgp.css .sgp-row-lineup / .sgp-chips) — orange chips under each picker, tap to remove. */
.ldr-row-lineup{margin-top:14px;align-items:flex-start}
#ows-stacks .ldr-row-lineup select{padding:7px 9px;font-size:14px;line-height:1.3}
.ldr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ldr-chips:empty{display:none}
#ows-stacks .ldr-chip{font-size:13px;padding:4px 9px}
#ows-stacks .ldr-chip span{margin-left:4px;font-weight:400}

/* The player, stacked so it reads at a glance (Aaron, 2026-10-19): name, then the lineup, then the numbers. */
.ldr-who{display:flex;flex-direction:column;gap:3px;margin:18px 0 12px}
.ldr-name{font:800 20px/1.2 var(--sans);color:var(--ink);cursor:pointer}
.ldr-who-lineup{font:400 14px/1.4 var(--sans);color:var(--muted)}
.ldr-who-lineup b{font-weight:700;color:var(--orange-dark)}
.ldr-who-nums{font:400 15px/1.4 var(--sans);color:var(--muted)}
.ldr-who-nums b{font-weight:800;color:var(--ink)}
.ldr-asof{color:var(--muted);font-size:12px}
.ldr-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.ldr-opt .stx-label{margin:0}
.ldr-opt .stx-subtabs{margin:0;flex-wrap:wrap}
.ldr-opt .stx-subtab small{font-weight:400;opacity:.75}

/* The table: the toolkit's, numbers lined up, small context under each figure. */
.ldr-table{width:100%;font-variant-numeric:tabular-nums}
.ldr-table td{vertical-align:middle}
.ldr-table td small{display:block;margin-top:2px}
.ldr-table tr.is-never td{opacity:.5}
.ldr-none{color:var(--line)}

/* the bar doubles as the confidence band: solid fill = the rate, the outlined block = the range */
.ldr-bar-col{width:130px}
.ldr-track{position:relative;display:block;width:120px;height:10px;background:var(--line)}
.ldr-fill{position:absolute;top:0;left:0;height:100%;background:var(--orange)}
.ldr-band{position:absolute;top:-3px;height:16px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);opacity:.35}

/* The books. The one being compared with is tinted, and every part of it picks it. */
.ldr-book{cursor:pointer;white-space:nowrap}
#ows-stacks .ldr-table th.ldr-book.is-pick{color:var(--orange-dark)}
#ows-stacks .ldr-table td.ldr-book.is-pick{box-shadow:inset 0 0 0 999px var(--hit)}
#ows-stacks input.ldr-price{width:72px;padding:4px 6px;font-size:14px;text-align:right}
/* 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 .ldr-pick{position:relative}
#ows-stacks .ldr-pick 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 .ldr-pick[open] summary{background:var(--hit)}
#ows-stacks .ldr-pick-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 .ldr-pick-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 .ldr-pick-chips{margin:0;flex-wrap:wrap}
#ows-stacks .ldr-pick-note{margin:6px 0 0;font:400 13px/1.3 var(--sans);color:var(--orange-dark)}
.ldr-books-note{margin:-4px 0 10px!important;color:var(--muted);font-size:13px}
/* A book's closest line when it doesn't post this rung ("closest: 60+"). */
.ldr-table td small.ldr-near{font-size:11px}

/* How the picked price sits against his record: orange when it pays more than fair (Aaron, 2026-10-18). */
.ldr-c{font:700 13px/1.3 var(--sans);color:var(--muted)}
.ldr-c.is-good{color:var(--orange-dark)}
#ows-stacks .ldr-table tr.is-good td:first-child{box-shadow:inset 3px 0 0 var(--orange)}

@media (max-width:640px){
  .ldr-field,.ldr-field-grow,.ldr-field-mate{flex:1 1 100%}
  #ows-stacks .ldr-controls select{width:100%}
  /* Five columns on a phone: Clears, Hit rate, Fair price, the picked book, and the comparison. */
  .ldr-bar-col,.ldr-split-col,.ldr-book:not(.is-pick){display:none}
  /* Fixed widths, wrapping headers: long words ("Against FanDuel", a price range) can't push the page wider. */
  #ows-stacks .ldr-table{table-layout:fixed}
  #ows-stacks .ldr-table th:nth-child(1){width:18%}
  #ows-stacks .ldr-table th:nth-child(2){width:18%}
  /* Headers wrap between words, never inside one ("CLE ARS"), so they go a size smaller instead. */
  /* One step stronger than the theme's own `body.stx-look-jm #ows-stacks .stx-table th`, or it wins. */
  body #ows-stacks .stx-table.ldr-table thead th{white-space:normal;font-size:10px;letter-spacing:.02em;overflow-wrap:normal;word-break:normal}
  body #ows-stacks .stx-table.ldr-table thead th,body #ows-stacks .stx-table.ldr-table tbody td{padding-left:4px;padding-right:4px}
  #ows-stacks .ldr-table td{overflow-wrap:anywhere}
  #ows-stacks input.ldr-price{width:100%;max-width:64px}
  /* Your books opens under the whole row, inside the page, not off the right edge. */
  .ldr-opt-books{position:relative}
  #ows-stacks .ldr-opt-books .ldr-pick{position:static}
  #ows-stacks .ldr-opt-books .ldr-pick-body{width:100%;box-sizing:border-box}
  /* "closest: 110+" may take two lines in the narrow book column, never a wider page. */
  #ows-stacks .ldr-table td.ldr-book{white-space:normal}
  /* The book's name under Best price stays whole ("DraftKings", never "DraftKing s"). */
  #ows-stacks .ldr-table td.ldr-book small.ldr-near{overflow-wrap:normal;word-break:normal;font-size:10px}
}