/* props.css (2026-10-25): per-game Props tab (public/props.js). Same tokens as stats.css / boxscore.css: 4/8 grid, 11px floor, tabular numbers.
   Colour is only used for status (green = over hit, blue = still alive, grey = settled/missed, amber = push). */
.gprops{min-width:0}
.gprops>*{min-width:0}
.gprops .card{cursor:default}
.gprops .card:hover{border-color:var(--line)}
.gprops[hidden]{display:none}
.pp-head{display:flex;flex-direction:column;gap:var(--gc-s2,8px)}
.pp-live{color:#fff;background:var(--gc-live,#ef4444);border-color:transparent}.pp-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;font:0/0 a}.pp-live[hidden]{display:none}
.pp-meta{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:12.5px;color:var(--gc-ink-3,#9aa5b4)}
.pp-state{font:700 14px/1.2 var(--disp);letter-spacing:var(--gc-track-label,.06em);text-transform:uppercase;color:var(--gc-ink,#e6edf3)}
.gprops[data-state=in] .pp-state{color:var(--gc-live,#ef4444)}
.pp-asof{font-size:12px}
.pp-tools{display:flex;flex-wrap:wrap;gap:var(--gc-s2,8px) var(--gc-s3,12px);align-items:center}
.pp-tools[hidden],.pp-cats[hidden],.pp-meta[hidden]{display:none}
.pp-q{flex:1 1 180px;min-width:140px;max-width:320px;font:600 13px/1 var(--gc-body,Inter,sans-serif);color:var(--gc-ink,#e6edf3);background:var(--gc-surface-2,#1c222b);border:1px solid var(--gc-hair,rgba(255,255,255,.12));border-radius:var(--gc-r-pill,999px);padding:9px 14px;outline:none}
.pp-q:focus{box-shadow:var(--gc-focus);border-color:var(--gc-accent,var(--slate-green))}
.pp-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--gc-r-pill,999px);background:var(--gc-surface-2,#1c222b);border:1px solid var(--gc-hair,rgba(255,255,255,.12))}
.pp-seg button{all:unset;cursor:pointer;font:700 12px/1 var(--gc-body,Inter,sans-serif);letter-spacing:var(--gc-track-label,.06em);text-transform:uppercase;color:var(--gc-ink-3,#9aa5b4);padding:8px 14px;border-radius:var(--gc-r-pill,999px)}
.pp-seg button:hover{color:#fff}.pp-seg button.on{background:var(--gc-accent,var(--slate-green));color:var(--slate-green-ink)}.pp-seg button:focus-visible{outline:none;box-shadow:var(--gc-focus)}
.pp-sel{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--gc-body,Inter,sans-serif);letter-spacing:var(--gc-track-label,.06em);text-transform:uppercase;color:var(--gc-ink-4,#8b96a5)}
.pp-sel select{font:600 13px/1 var(--gc-body,Inter,sans-serif);color:var(--gc-ink,#e6edf3);background:var(--gc-surface-2,#1c222b);border:1px solid var(--gc-hair,rgba(255,255,255,.12));border-radius:var(--gc-r-sm,6px);padding:8px 10px}
.pp-cats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pp-pills{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.pp-pill{font:700 13px/1 var(--gc-body,Inter,sans-serif);color:var(--gc-ink-3,#aab4c0);background:var(--gc-surface-2,#1c222b);border:1px solid var(--gc-hair,rgba(255,255,255,.12));border-radius:999px;padding:9px 14px;cursor:pointer;white-space:nowrap}
.pp-pill:hover{color:var(--gc-ink,#e6edf3);border-color:var(--gc-ink-4,#8b96a5)}
.pp-pill .pl-n{font-weight:600;opacity:.75;margin-left:2px}
.pp-pill.on{background:var(--gc-accent,var(--slate-green));border-color:var(--gc-accent,var(--slate-green));color:var(--slate-green-ink)}
.pp-pill.on .pl-n{opacity:.85}
.pp-pill:focus-visible{outline:2px solid var(--gc-accent,var(--slate-green));outline-offset:2px}
.pp-cathint{font-size:12px;min-height:14px}
.pp-pins{border-color:color-mix(in srgb,#f5c542 45%,var(--line))!important}
.pp-pins .eyebrow{color:#f5c542}
.pp-pcount{font-size:11px}
.pp-pins[hidden],.pp-msg[hidden]{display:none}
.pp-msg{padding:var(--gc-s4,16px);color:var(--gc-ink-3,#9aa5b4);font-size:14px}
.pp-groups{display:flex;flex-direction:column;gap:var(--gc-s3,12px);min-width:0}
.pp-grp{padding:0!important;overflow:hidden;container-type:inline-size}
.pg-h{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px}
.pg-h:hover{background:rgba(255,255,255,.03)}.pg-h:focus-visible{box-shadow:inset var(--gc-focus)}
.pg-c{display:inline-block;width:12px;color:var(--gc-ink-4,#8b96a5);transition:transform .12s}
.pp-grp.open .pg-c{transform:rotate(90deg)}
.pg-t{font:800 15px/1.1 var(--gc-disp,var(--disp));letter-spacing:var(--gc-track-disp,.02em);text-transform:uppercase;color:var(--gc-ink,#e6edf3);min-width:0;white-space:normal;overflow-wrap:break-word}
.pg-k::before{display:none}
.pg-n{font-size:12px;color:var(--gc-ink-4,#8b96a5);font-weight:700}
.pg-note{padding:0 16px 8px;margin:0}
.pp-grp .pp-rows{display:flex;flex-direction:column}
/* rows */
.pp-head2,.pr{display:grid;grid-template-columns:32px minmax(0,1.2fr) calc(var(--nc,2)*98px) 112px minmax(0,1.3fr);column-gap:12px;align-items:center;padding:0 16px}
.pp-head2{font:700 11px/1 var(--gc-body,Inter,sans-serif);letter-spacing:var(--gc-track-label,.06em);text-transform:uppercase;color:var(--gc-ink-4,#8b96a5);padding-top:6px;padding-bottom:6px;border-top:1px solid var(--gc-hair,rgba(255,255,255,.08));border-bottom:1px solid var(--gc-hair,rgba(255,255,255,.08))}
.pp-head2[hidden]{display:none}
.pp-head2 .hc{display:grid;grid-template-columns:repeat(var(--nc,2),1fr);gap:6px;text-align:center}.pp-head2 .hc span{min-width:0;white-space:normal;overflow-wrap:break-word}.pp-head2 span:nth-last-child(2){text-align:right}
.pr{min-height:52px;padding-top:6px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.05);position:relative}
.pr:last-child{border-bottom:0}
.pr:hover{background:rgba(255,255,255,.025)}
.pr-star{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;font-size:17px;line-height:1;color:var(--gc-ink-4,#8b96a5);border-radius:50%}
.pr-star:hover{color:#f5c542;background:rgba(255,255,255,.06)}.pr-star.on{color:#f5c542}.pr-star:focus-visible{box-shadow:var(--gc-focus)}
.pr-pl{display:flex;flex-direction:column;min-width:0}
.pr-n{font-size:13.5px;color:var(--gc-ink,#e6edf3);white-space:normal;overflow-wrap:break-word}
.pr-s{font-size:11px;color:var(--gc-ink-4,#8b96a5);white-space:normal;overflow-wrap:break-word}
.pr-mk{flex:0 1 auto;min-width:0;max-width:100%;box-sizing:border-box;font:800 11px/1 var(--gc-body,Inter,sans-serif);letter-spacing:.05em;text-transform:none;padding:3px 6px;border-radius:4px;border:1px solid transparent;white-space:normal;text-align:right;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
.pr-mk[hidden]{display:none}
.mk-over,.mk-yes,.mk-cleared{color:#4ade80;background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.5)}
.mk-under{color:#93c5fd;background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.5)}
.mk-push{color:#facc15;background:rgba(234,179,8,.14);border-color:rgba(234,179,8,.5)}
.mk-need,.mk-on,.mk-next,.mk-alive,.mk-wait{color:var(--gc-ink-3,#9aa5b4);background:transparent;border-color:var(--gc-hair,rgba(255,255,255,.18));font-weight:700}
.mk-no,.mk-miss,.mk-none,.mk-dnp{color:#94a3b8;background:rgba(100,116,139,.14);border-color:rgba(100,116,139,.4)}
.rc.top{font-weight:800;box-shadow:0 0 0 1px rgba(74,222,128,.7);background:rgba(34,197,94,.3);color:#86efac}
.pg-sum{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;font:700 12px/1.25 var(--gc-body,Inter,sans-serif);color:var(--gc-ink-3,#9aa5b4);padding:3px 8px;border-radius:12px;border:1px solid var(--gc-hair,rgba(255,255,255,.18))}
.pg-sum[hidden]{display:none}
.pr-act{font:800 17px/1 var(--gc-disp,var(--disp));text-align:right;color:var(--gc-ink,#e6edf3)}
.pr-st{display:flex;flex-direction:column;min-width:0}
.pr-st b{font-size:13px;color:var(--gc-ink,#e6edf3);white-space:normal;overflow-wrap:break-word}
.pr-st small{font-size:11px;color:var(--gc-ink-4,#8b96a5);white-space:normal;overflow-wrap:break-word}
.c-hit .pr-st b{color:#4ade80}.c-alive .pr-st b,.c-part .pr-st b{color:#93c5fd}.c-under .pr-st b{color:#94a3b8}.c-dnp .pr-st b,.c-na .pr-st b,.c-pre .pr-st b{color:var(--gc-ink-3,#9aa5b4)}.c-push .pr-st b{color:#facc15}
.c-hit{background:linear-gradient(90deg,rgba(34,197,94,.08),transparent 55%)}
.pr-chips{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:4px;padding:2px 0 4px}
.pr-chips[hidden]{display:none}
.pr-mv{grid-column:2/-1;font:600 11px/1.3 var(--gc-body,Inter,sans-serif);color:var(--gc-ink-3,#9aa5b4);padding:0 0 4px;font-variant-numeric:tabular-nums;overflow-wrap:break-word;cursor:help}.pr-mv[hidden]{display:none}
.pc-mv{position:absolute;top:2px;left:4px;font:800 9px/1 var(--gc-body,Inter,sans-serif);font-style:normal}.pc-mv[hidden]{display:none}.pc-mv.up{color:#34d399}.pc-mv.dn{color:#f87171}
.pp-mvs{color:#93c5fd;font-weight:600;cursor:help}.pp-mvs[hidden]{display:none}
.pr-kn{grid-column:2/-1;font:600 11px/1.3 var(--gc-body,Inter,sans-serif);color:var(--gc-ink-4,#8b96a5);padding:0 0 4px;font-variant-numeric:tabular-nums;cursor:help}.pr-kn[hidden]{display:none}
.rc{font:700 11px/1 var(--gc-body,Inter,sans-serif);padding:3px 7px;border-radius:999px;border:1px solid var(--gc-hair,rgba(255,255,255,.14));color:var(--gc-ink-4,#8b96a5);font-variant-numeric:tabular-nums}
.rc.on{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.55);color:#4ade80}.rc.more{border-style:dashed}
.pr .pf,.pr b.pf,.pr .pr-act.pf{animation:ppflash 1.6s var(--gc-ease,ease-out)}
@keyframes ppflash{0%{background:rgba(59,130,246,.45);color:#fff}100%{background:transparent}}
/* live price moves: tint only (no size/position change). Green = pays more, red = pays less. */
.pr .pf-up{animation-name:ppup}.pr .pf-dn{animation-name:ppdn}
@keyframes ppup{0%{background:rgba(34,197,94,.55);color:#fff}100%{background:transparent}}
@keyframes ppdn{0%{background:rgba(239,68,68,.55);color:#fff}100%{background:transparent}}
.pc-p,.rc em{border-radius:4px;font-variant-numeric:tabular-nums}.rc em{display:inline-block;min-width:3.6ch;text-align:center}
/* a closed market (or a price ESPN stopped publishing): dimmed, dash instead of a number, never the old price */
.pr.cl{opacity:.5}.pr.cl .pr-s{color:#f59e0b}.pc.cl{opacity:.55}.pc.cl .pc-p{color:var(--gc-ink-4,#8b96a5);font-weight:600}.rc.cl{opacity:.5;border-style:dotted}.rc.cl em{color:var(--gc-ink-4,#8b96a5)}
.pp-px{margin:0 0 6px}
.gc-rm .pf{animation:none!important}
@media (prefers-reduced-motion:reduce){.pr .pf,.pr-trk i{animation:none!important;transition:none}}
.pp-foot .fine p{margin:0 0 6px}
/* price cells: DraftKings-style buttons, line + price in each (read-only: they are not clickable) */
.pr-cells{display:grid;grid-template-columns:repeat(var(--nc,2),minmax(0,1fr));gap:6px;min-width:0}.pr-cells:empty{display:none}
.pc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:5px 4px;border-radius:6px;background:var(--gc-surface-2,#1c222b);border:1px solid var(--gc-hair,rgba(255,255,255,.12));position:relative}
.pc-l{font:700 11px/1.15 var(--gc-body,Inter,sans-serif);color:var(--gc-ink-4,#8b96a5);white-space:normal;max-width:100%;overflow-wrap:break-word}
.pc-p{font:800 16px/1.1 var(--gc-disp,var(--disp));letter-spacing:.02em;color:#7dd3fc;white-space:nowrap}
.pc.np .pc-p{color:var(--gc-ink-4,#8b96a5);font-weight:600}.pc.none{opacity:.55}
.pc.win{border-color:rgba(34,197,94,.65);background:rgba(34,197,94,.14)}.pc.win .pc-p{color:#4ade80}
.pc.lose{opacity:.6}.pc.push{border-color:rgba(234,179,8,.6)}
.pc-k,.rc i{font:800 9px/1 var(--gc-body,Inter,sans-serif);font-style:normal;color:#fbbf24;border:1px solid rgba(251,191,36,.55);border-radius:3px;padding:1px 3px}
.pc-k{position:absolute;top:2px;right:3px}.pc-k[hidden]{display:none}
.pr-res{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
.rc-s{font:800 11px/1 var(--gc-body,Inter,sans-serif);padding:3px 6px;border-radius:4px;border:1px solid transparent;align-self:center;margin-right:4px}
.rc-h{font:700 11px/1 var(--gc-body,Inter,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:var(--gc-ink-4,#8b96a5);align-self:center;margin-right:4px}
.rc em{font-style:normal;font-weight:800;color:#7dd3fc;margin-left:3px}.rc.on em{color:#4ade80}.rc i{margin-left:3px}
.pp-legend{margin:0}.pp-legend b{color:var(--gc-ink,#e6edf3)}
.pp-kchip{color:#fbbf24;border-color:rgba(251,191,36,.5)}.pp-kchip[hidden]{display:none}
/* narrower groups: player + result on top, price cells under, then status */
@container (max-width:760px){
 .pp-head2{display:none}
 .pr{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"star pl res" ". cells cells" ". st st" ". chips chips" ". kn kn" ". mv mv";row-gap:4px;padding-top:8px;padding-bottom:8px}
 .pr-res{min-height:40px;justify-content:center}
 .pr-star{grid-area:star}.pr-pl{grid-area:pl}.pr-cells{grid-area:cells}.pr-res{grid-area:res}.pr-st{grid-area:st}.pr-chips{grid-area:chips}.pr-kn{grid-area:kn}.pr-mv{grid-area:mv}
}
body.compact .pr{min-height:44px}
.pp-sp{flex:1;min-width:0}
.pg-k::after{display:none}
.gprops [hidden]{display:none!important}

/* FINISHED-GAME PRICES: opening-price cells in italics, honest "No price" line */
.pc.op .pc-p,.rc.op em{font-style:italic;opacity:.85}.pr-kn.nopx{font-weight:500;font-style:italic;opacity:.8}

/* HORIZONTAL TEXT (Jason t207u/t208u, all sports): word-breaking anywhere let the result pill
   ("NONE CLEARED", "NO STATS", "Cleared 1 of 3"...) shrink to one letter wide in the narrow
   (auto-sized) result column, so it read vertically. Pills/labels now never break inside a word
   and the result column is at least as wide as its widest word. */
.pr-mk,.pg-sum,.pc-l,.pr-st b,.pr-st small,.pp-head2 .hc span{word-break:normal;writing-mode:horizontal-tb}
.pr-mk{min-width:min-content;hyphens:none}
.pr-res{min-width:max-content}
@container (max-width:760px){.pr{grid-template-columns:32px minmax(0,1fr) max-content}}

/* PROPORTIONAL, SCANNABLE ROWS (Jason t209u, all sports): compact, not bigger. Clear hierarchy:
   name (bold) > line/meta (muted) > prices (tabular, aligned) > status (one horizontal line). */
.pp-head2,.pr{grid-template-columns:28px minmax(140px,1.4fr) calc(var(--nc,2)*88px) minmax(96px,max-content) minmax(0,1.1fr);column-gap:10px;padding:0 12px}
.pr{min-height:40px;padding-top:4px;padding-bottom:4px}
.pr-n{font-weight:700;font-size:13px;line-height:1.2}
.pr-s{font-size:11px;line-height:1.25;margin-top:1px}
.pr-act{font-size:16px;font-variant-numeric:tabular-nums}
.pr-st{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.pr-st b{font-size:12.5px}.pr-st small{font-size:11px}
.pc-l{font-size:10.5px}
@container (max-width:760px){.pr{grid-template-columns:28px minmax(0,1fr) max-content;padding:6px 12px}}

/* NO OVERLAP (Jason t221u, all sports): alternate-line-only sections have no price columns (--nc:0) and
   .pr-cells:empty is display:none, so Now/Status auto-placed one column left into the 0-wide price track
   and painted over each other ("No line reached" on top of "NONE CLEARED"). Pin every cell to its own
   column so nothing can slide into the empty price track. */
@container (min-width:761px){
 .pr-star{grid-column:1}.pr-pl{grid-column:2}.pr-cells{grid-column:3}.pr-res{grid-column:4}.pr-st{grid-column:5}
 .pr-chips,.pr-kn,.pr-mv{grid-column:2 / -1}
}
