/* One Prop Season odds picker (ows-behind-the-bet 0.2.0). The tools look (docs/TOOLS-DESIGN-GUIDE.md):
   warm paper, ink, one orange, Archivo, sharp corners. Everything is scoped to .ows-opk, and the type
   carries !important because it lands inside the hub page, the Scroll and the NFL Edge sidebar, each
   with its own theme rules for h2, p, input and button. */
.ows-opk{--page:#fbf9f6;--surface:#f3efe8;--ink:#16130f;--muted:#5c5348;--quiet:#948a7c;--line:rgba(22,19,15,.13);--orange:#ff7a00;--orange-dark:#c95f00;--peach:#fdeee6;--red:#9c3029;--sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;--display:"Archivo Black",Archivo,system-ui,sans-serif;
  position:relative;box-sizing:border-box;margin:0;padding:30px 30px 22px;border:1px solid var(--line);border-radius:2px;
  background:radial-gradient(120% 70% at 100% 0%,rgba(255,122,0,.10),rgba(255,122,0,0) 55%),linear-gradient(180deg,#fbf9f6 0%,#f6f1ea 100%);
  box-shadow:0 18px 40px -26px rgba(22,19,15,.45);color:var(--ink);font-family:var(--sans);text-align:left}
.ows-opk *,.ows-opk *::before,.ows-opk *::after{box-sizing:border-box}
.ows-opk.is-compact{padding:20px 18px 16px}
.ows-opk p,.ows-opk ul,.ows-opk ol,.ows-opk li{margin:0;padding:0}
.ows-opk .opk-eyebrow{margin:0 0 6px!important;color:var(--orange)!important;font:700 12px/1.3 var(--sans)!important;letter-spacing:.24em!important;text-transform:uppercase!important}
.ows-opk .opk-eyebrow span{color:var(--quiet)}
.ows-opk.is-compact .opk-eyebrow{font-size:11px!important;letter-spacing:.14em!important}
@media (max-width:480px){.ows-opk .opk-eyebrow{font-size:11px!important;letter-spacing:.14em!important}}
.ows-opk .opk-h2{margin:0 0 6px!important;padding:0!important;color:var(--ink)!important;font:400 clamp(24px,3vw,32px)/1.08 var(--display)!important;letter-spacing:-.01em!important;text-transform:none!important;border:0!important}
.ows-opk.is-compact .opk-h2{font-size:22px!important}
.ows-opk .opk-sub{margin:0 0 12px!important;max-width:62ch;color:var(--muted)!important;font:400 15px/1.45 var(--sans)!important}
.ows-opk.is-compact .opk-sub{font-size:14px!important}
/* The prize line (Aaron 10-29: "that's a pretty big deal to win a free week of props"): bigger, ink, the prize in orange. */
.ows-opk .opk-sub.opk-prize{margin:2px 0 16px!important;color:var(--ink)!important;font:800 clamp(18px,2.2vw,21px)/1.3 var(--sans)!important;letter-spacing:-.005em}
.ows-opk .opk-sub.opk-prize b{color:var(--orange-dark);font-weight:800}
.ows-opk.is-compact .opk-sub.opk-prize{font-size:17px!important}
.ows-opk details.opk-how{margin:16px 0 0;border-left:3px solid var(--orange);background:rgba(255,122,0,.05)}
.ows-opk details.opk-how summary{padding:7px 10px;color:var(--orange-dark);font:700 13px var(--sans);cursor:pointer;list-style:none}
.ows-opk details.opk-how summary::-webkit-details-marker{display:none}
.ows-opk details.opk-how ul{margin:0;padding:4px 12px 10px 28px;color:var(--muted);font:400 13.5px/1.5 var(--sans);list-style:disc}
.ows-opk details.opk-how li{margin:0 0 2px;color:var(--muted)!important;font:400 13.5px/1.5 var(--sans)!important}
.ows-opk details.opk-how a{color:var(--orange-dark)}
.ows-opk .opk-label{display:block;margin:0 0 6px!important;color:var(--quiet)!important;font:700 12px/1.3 var(--sans)!important;letter-spacing:.12em!important;text-transform:uppercase!important}
.ows-opk .opk-find{position:relative;margin:0 0 18px}
.ows-opk .opk-find[hidden],.ows-opk .opk-pick[hidden],.ows-opk [hidden]{display:none!important}
.ows-opk input.opk-q{display:block;width:100%!important;height:auto!important;margin:0!important;padding:12px 14px!important;border:1.5px solid var(--ink)!important;border-radius:4px!important;background:#fff!important;color:var(--ink)!important;font:500 16px/1.3 var(--sans)!important;box-shadow:none!important;-webkit-appearance:none;appearance:none}
.ows-opk input.opk-q:focus,.ows-opk textarea.opk-why:focus{outline:2px solid var(--orange)!important;outline-offset:1px}
.ows-opk .opk-sugg{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0!important;padding:0!important;list-style:none!important;border:1px solid var(--line);border-radius:2px;background:#fffdfb;box-shadow:0 14px 30px -18px rgba(22,19,15,.5);max-height:290px;overflow:auto}
.ows-opk .opk-sugg li{display:flex;justify-content:space-between;gap:10px;margin:0!important;padding:10px 12px!important;border-bottom:1px solid var(--line);list-style:none!important;cursor:pointer}
.ows-opk .opk-sugg li::before,.ows-opk .opk-sugg li::marker{content:none!important}
.ows-opk .opk-sugg li:last-child{border-bottom:0}
.ows-opk .opk-sugg li:hover,.ows-opk .opk-sugg li.is-hi{background:var(--peach)}
.ows-opk .opk-sugg b{color:var(--ink);font:700 15px/1.3 var(--sans)}
.ows-opk .opk-sugg small{color:var(--quiet);font:600 12px/1.3 var(--sans);white-space:nowrap}
.ows-opk .opk-sugg li.is-none{color:var(--muted);font:500 14px var(--sans);cursor:default;background:none}
.ows-opk .opk-pick{margin:0 0 18px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:2px;background:#fffdfb}
.ows-opk .opk-who{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin:0 0 12px}
.ows-opk .opk-who b{display:block;color:var(--ink);font:800 18px/1.2 var(--sans)}
.ows-opk .opk-who small{display:block;margin-top:2px;color:var(--muted);font:500 13px/1.35 var(--sans)}
.ows-opk button{margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0;line-height:1.2;-webkit-appearance:none;appearance:none}
.ows-opk button.opk-x{flex:0 0 auto;padding:4px 8px!important;border:1.5px solid var(--ink)!important;border-radius:4px!important;background:transparent!important;color:var(--ink)!important;font:700 12px var(--sans)!important;cursor:pointer}
.ows-opk .opk-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ows-opk button.opk-chip{padding:7px 10px!important;border:1px solid var(--line)!important;border-radius:4px!important;background:#fff!important;color:var(--ink)!important;font:700 13px var(--sans)!important;cursor:pointer}
.ows-opk button.opk-chip:hover{border-color:var(--ink)!important}
.ows-opk button.opk-chip.is-active{border-color:var(--orange)!important;background:var(--orange)!important;color:#fff!important}
.ows-opk .opk-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ows-opk button.opk-side{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;padding:12px 14px!important;border:1.5px solid var(--ink)!important;border-radius:4px!important;background:#fff!important;color:var(--ink)!important;text-align:left;cursor:pointer;font-family:var(--sans)!important}
.ows-opk .opk-side .s1{font:800 16px/1.2 var(--sans);white-space:nowrap}
.ows-opk .opk-side .s2{font:400 22px/1 var(--display);font-variant-numeric:tabular-nums}
.ows-opk .opk-side .s3{color:var(--quiet);font:700 10.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.ows-opk button.opk-side:hover{background:var(--peach)!important}
.ows-opk button.opk-side.is-active{border-color:var(--orange)!important;background:var(--orange)!important;color:#fff!important}
.ows-opk button.opk-side.is-active .s3{color:#fff}
.ows-opk button.opk-side[disabled]{border-color:var(--line)!important;background:var(--surface)!important;color:var(--quiet)!important;cursor:not-allowed}
.ows-opk button.opk-side[disabled] .s2{font-size:18px}
.ows-opk.is-compact .opk-sides{gap:8px}
.ows-opk.is-compact button.opk-side{padding:10px 11px!important}
.ows-opk.is-compact .opk-side .s1{font-size:14px}
.ows-opk.is-compact .opk-side .s2{font-size:19px}
.ows-opk .opk-basis{margin:10px 0 0!important;color:var(--quiet)!important;font:500 12.5px/1.4 var(--sans)!important}
.ows-opk textarea.opk-why{display:block;width:100%!important;min-height:92px;margin:0!important;padding:11px 13px!important;border:1.5px solid var(--ink)!important;border-radius:4px!important;background:#fff!important;color:var(--ink)!important;font:400 15px/1.45 var(--sans)!important;resize:vertical;box-shadow:none!important}
.ows-opk.is-compact textarea.opk-why{min-height:64px}
.ows-opk .opk-count{margin:4px 0 0!important;color:var(--quiet)!important;font:500 12px var(--sans)!important;text-align:right}
.ows-opk .opk-summary{margin:14px 0 10px!important;padding:10px 12px!important;border-left:3px solid var(--orange);background:rgba(255,122,0,.06);color:var(--ink)!important;font:500 14.5px/1.45 var(--sans)!important}
.ows-opk .opk-summary b{font-weight:800}
.ows-opk .opk-go{display:block;width:100%!important;padding:14px 18px!important;border:0!important;border-radius:4px!important;background:var(--orange)!important;color:#fff!important;font:700 16px/1.2 var(--sans)!important;text-align:center;text-decoration:none!important;cursor:pointer}
.ows-opk .opk-go:hover{background:var(--orange-dark)!important}
.ows-opk .opk-go[disabled]{background:#e8ddd0!important;color:#8f8478!important;cursor:not-allowed}
.ows-opk .opk-status{margin:10px 0 0!important;padding:8px 10px!important;border-left:3px solid var(--orange);background:rgba(255,122,0,.06);color:var(--ink)!important;font:500 14px/1.4 var(--sans)!important}
.ows-opk .opk-status.is-error{color:var(--red)!important}
.ows-opk .opk-status button{margin:6px 0 0 0;padding:5px 10px!important;border:1.5px solid var(--ink)!important;border-radius:4px!important;background:#fff!important;color:var(--ink)!important;font:700 13px var(--sans)!important;cursor:pointer}
.ows-opk .opk-status a{color:var(--orange-dark)}
.ows-opk .opk-rg{margin:12px 0 0!important;color:var(--quiet)!important;font:500 11.5px/1.4 var(--sans)!important;text-align:center}
.ows-opk .opk-fam{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.ows-opk .opk-fam:empty{display:none}
.ows-opk .opk-fam-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 6px}
.ows-opk .opk-fam-h h3{margin:0!important;padding:0!important;color:var(--ink)!important;font:800 17px/1.25 var(--sans)!important;text-transform:none!important;letter-spacing:normal!important}
.ows-opk .opk-fam-h small{color:var(--quiet);font:600 12px var(--sans);white-space:nowrap}
/* What the OWS Fam is on: member cards in one sideways-scrolling row (Aaron 10-29: "2 or 3 with a scroll"). */
/* 0.2.2: no scrollbar. Whole cards only (the JS sets --opk-n = how many fit), moved by a button on each side. */
.ows-opk .opk-car{--opk-n:3;display:flex;align-items:center;gap:8px;margin:8px 0 0}
.ows-opk .opk-view{flex:1 1 auto;min-width:0;overflow:hidden;padding:2px 0}
.ows-opk .opk-cards{display:flex;gap:10px;transition:transform .25s ease}
.ows-opk .opk-card{flex:0 0 calc((100% - (var(--opk-n) - 1) * 10px) / var(--opk-n));display:flex;flex-direction:column;gap:3px;padding:12px 12px 11px;border:1px solid var(--line);border-radius:2px;background:#fffdfb;min-width:0}
.ows-opk button.opk-arr{flex:0 0 auto;width:34px;height:34px;padding:0!important;border:1.5px solid var(--ink)!important;border-radius:4px!important;background:#fff!important;color:var(--ink)!important;font:700 22px/1 var(--sans)!important;cursor:pointer}
.ows-opk button.opk-arr:hover:not([disabled]){background:var(--orange)!important;border-color:var(--orange)!important;color:#fff!important}
.ows-opk button.opk-arr[disabled]{border-color:var(--line)!important;color:var(--quiet)!important;opacity:.45;cursor:default}
.ows-opk .opk-car.is-one-page .opk-arr{display:none}
.ows-opk .opk-card-state{margin-top:auto;padding-top:6px;color:var(--quiet);font:700 11.5px var(--sans);letter-spacing:.08em;text-transform:uppercase}
.ows-opk .opk-card-state.is-hit{color:var(--orange-dark)}
.ows-opk .opk-card-state.is-hit::before{content:"✓ "}
.ows-opk .opk-card.is-tap{cursor:pointer}
.ows-opk .opk-card.is-tap:hover{background:var(--peach)}
.ows-opk .opk-card.is-mine{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.ows-opk .opk-card-who{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.ows-opk .opk-card-who img{width:28px!important;height:28px!important;margin:0!important;border-radius:50%;flex:0 0 auto;object-fit:cover}
.ows-opk .opk-card-name{min-width:0}
.ows-opk .opk-card-name b{display:block;overflow:hidden;color:var(--ink);font:700 13.5px/1.2 var(--sans);text-overflow:ellipsis;white-space:nowrap}
.ows-opk .opk-card-name small{display:block;color:var(--quiet);font:600 11.5px/1.25 var(--sans);font-variant-numeric:tabular-nums}
.ows-opk .opk-card-player{color:var(--ink);font:800 15px/1.2 var(--sans)}
.ows-opk .opk-card-prop{color:var(--muted);font:500 13px/1.3 var(--sans)}
.ows-opk .opk-card-price{color:var(--ink);font:400 18px/1.15 var(--display);font-variant-numeric:tabular-nums}
.ows-opk .opk-card-act{margin-top:auto;padding-top:6px;color:var(--orange-dark);font:700 12.5px var(--sans)}.ows-opk .opk-fam-empty{margin:4px 0 0!important;color:var(--muted)!important;font:500 14px var(--sans)!important}
.ows-opk .opk-in{margin:4px 0 14px;padding:14px 16px;border-left:4px solid var(--orange);background:#fffdfb}
.ows-opk .opk-in b{display:block;color:var(--ink);font:400 20px/1.2 var(--display)}
.ows-opk.is-compact .opk-in b{font-size:17px}
.ows-opk .opk-in small{display:block;margin-top:4px;color:var(--muted);font:500 13px/1.4 var(--sans)}
.ows-opk .opk-in p{margin:8px 0 0!important;color:var(--muted)!important;font:italic 400 14px/1.45 var(--sans)!important}
.ows-opk .opk-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:6px}
.ows-opk .opk-center{justify-content:center;margin-top:10px}
.ows-opk a.opk-sec{display:inline-block;padding:11px 16px;border:1.5px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink)!important;font:700 14px/1.2 var(--sans)!important;text-decoration:none!important}
.ows-opk a.opk-sec:hover{background:var(--peach)}
.ows-opk a.opk-link{color:var(--orange-dark)!important;font:700 14px var(--sans)!important;text-decoration:underline!important;text-decoration-color:var(--orange)!important;text-underline-offset:3px}
/* The hub page's grid cell. */
.ops-picker-cell{min-width:0}
@media (max-width:480px){
  .ows-opk{padding:22px 16px 18px}
}
