/* prophetx.css: the ProphetX sheet, ticket, order status and odds cards, drawn in Zena's own language (rules W2 and the
   2026-11-07 visual spec): one ground, one ink for every word, hierarchy by size and weight, colour only on marks (the
   probability bars, the status marks, the selected rule), hairlines between parts, no pills, glow or tracked capitals. */
:root{--px-ground:#080b10;--px-ink:#eef1f6;--px-why:#c6afff;--px-rule:rgba(238,241,246,.14);--px-rule-strong:rgba(238,241,246,.32);--px-mark:#5b8cff;--px-ok:#3fbf7f;--px-bad:#e5484d;--px-part:#e6a23c;--px-label:var(--zt-label,11px);--px-body:13px;--px-value:15px;--px-title:18px}
.pxs{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 24px));height:fit-content;max-height:min(860px,calc(100dvh - 24px));padding:0;border:1px solid var(--px-rule);border-radius:12px;background:var(--px-ground);color:var(--px-ink);font-size:var(--px-body);line-height:1.45;font-weight:400;font-family:inherit;overflow:hidden}
.pxs[open]{display:flex;flex-direction:column}
.pxs::backdrop{background:rgba(8,11,16,.78)}
.pxs *{box-sizing:border-box;color:inherit}
.pxs [hidden]{display:none!important}
.pxs-busy{height:2px;flex:0 0 2px;background:transparent;transform-origin:0 50%;transform:scaleX(0)}
.pxs[data-busy] .pxs-busy{background:var(--px-mark);animation:pxGrow 4s ease-out forwards}
@keyframes pxGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pxs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 12px;border-bottom:1px solid var(--px-rule)}
.pxs-head h2{margin:0;font-size:var(--px-title);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.pxs-x{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--px-rule);border-radius:8px;background:transparent;font-size:20px;line-height:1;cursor:pointer}
.pxs-body{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px 4px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.pxs-note{margin:0;padding:0 16px 14px;min-height:20px;font-size:var(--px-body)}
.pxs-note[data-kind=error]{box-shadow:inset 3px 0 0 var(--px-bad);padding-left:13px}
.pxs-p{margin:0;font-size:var(--px-body)}
.pxs-lead{margin:0;font-size:var(--px-value);font-weight:600}
.pxs-list{margin:0;padding:0 0 0 18px;display:grid;gap:6px}
.pxs-form{display:flex;flex-direction:column;gap:12px}
.pxs-form fieldset{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0;min-width:0}
.pxs-form fieldset[disabled]{opacity:1}
.pxs-form fieldset[disabled] input{border-style:dashed}
.pxf{display:flex;flex-direction:column;gap:6px;font-size:var(--px-body);font-weight:600}
.pxf input,.pxf-money{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--px-rule-strong);border-radius:8px;background:var(--px-ground);font-size:var(--px-value);line-height:1.2;font-weight:400;font-family:inherit}
.pxf input:focus-visible,.pxf-money:focus-within{outline:2px solid var(--px-mark);outline-offset:1px}
.pxf-money{display:flex;align-items:center;gap:6px;padding:0 12px}
.pxf .pxf-money input{flex:1 1 auto;min-width:0;border:0;padding:10px 0;min-height:42px;outline:none;box-shadow:none;background:transparent;font-variant-numeric:tabular-nums}
.pxf .pxf-money input:focus-visible{outline:none}
.pxs-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.pxb{min-height:44px;padding:10px 16px;border:1px solid var(--px-rule-strong);border-radius:8px;background:transparent;font-size:var(--px-body);line-height:1.2;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.pxb-main{background:transparent;border-color:var(--px-ink)}   /* Q16.14 ("I hate the blue button as well, keep our look"): the primary action is outlined in the one ink, never a blue fill */
.pxb:disabled{cursor:not-allowed;background:transparent;border-color:var(--px-rule);border-style:dashed}
.pxb:focus-visible,.pxo:focus-visible,.pxs-x:focus-visible,.pxl button:focus-visible{outline:2px solid var(--px-mark);outline-offset:2px}
.pxs-foot a,.pxa a{text-decoration:underline;text-underline-offset:2px}
.pxs-facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;padding:12px 0;border-top:1px solid var(--px-rule);border-bottom:1px solid var(--px-rule)}
.pxs-facts:empty{display:none}
.pxs-facts dt{font-size:var(--px-body)}
.pxs-facts dd{margin:0;text-align:right;font-size:var(--px-value);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.pxs-facts dd .pxo-imp{justify-content:flex-end}
.pxt-game{font-weight:600}
.pxt-keep{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--px-body);cursor:pointer}
.pxt-keep input{width:20px;height:20px;accent-color:var(--px-mark);flex:0 0 20px}
.pxt-go{width:100%}
.pxb-board{display:flex;flex-direction:column;gap:12px}
.pxs-acct{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:4px}
.pxs-acct .pxs-p{flex:1 1 auto}
.pxs-acct .pxb{flex:0 0 auto}
/* the order's status: the marks carry the state, the words stay one ink */
.pxst-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pxst{position:relative;display:flex;align-items:center;gap:12px;min-height:40px;padding-left:2px;font-size:var(--px-body)}
.pxst i{flex:0 0 14px;width:14px;height:14px;border-radius:50%;border:2px solid var(--px-rule-strong);background:var(--px-ground);position:relative;z-index:1}
.pxst:not(:last-child)::after{content:"";position:absolute;left:8px;top:28px;width:2px;height:24px;background:var(--px-rule)}
.pxst[data-state=now] i{border-color:var(--px-mark)}
.pxst[data-state=ok] i{border-color:var(--px-ok);background:var(--px-ok)}
.pxst[data-state=part] i{border-color:var(--px-part);background:linear-gradient(90deg,var(--px-part) 50%,var(--px-ground) 50%)}
.pxst[data-state=bad] i{border-color:var(--px-bad);background:var(--px-bad)}
.pxst[data-state=ok]:not(:last-child)::after{background:var(--px-ok)}
.pxst[data-state=wait] span,.pxst[data-state=now] span{font-weight:400}
.pxst[data-state=ok] span,.pxst[data-state=part] span,.pxst[data-state=bad] span{font-weight:600}
/* odds: the American price is the value; the probability it implies is the bar under it */
.pxl{display:flex;flex-wrap:wrap;gap:4px 14px;border-bottom:1px solid var(--px-rule)}
.pxl button{min-height:44px;padding:8px 2px;border:0;background:transparent;font-size:var(--px-body);line-height:1.2;font-weight:400;font-family:inherit;cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.pxl button[aria-pressed=true]{font-weight:600;box-shadow:inset 0 -2px 0 var(--px-mark)}
.pxg{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--px-rule);color:var(--px-ink)}
.pxg-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.pxg-title{font-size:var(--px-value);font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.pxg-top time{flex:0 0 auto;font-size:var(--px-body);white-space:nowrap}
.pxg-grid{display:grid;gap:6px}
.pxg-row{display:grid;grid-template-columns:minmax(64px,1fr) repeat(var(--cols,3),minmax(68px,92px));gap:6px;align-items:stretch}
.pxg-head span{font-size:var(--px-label);font-weight:600;align-self:end}
.pxg-team{align-self:center;font-size:var(--px-body);font-weight:600;line-height:1.2;overflow-wrap:break-word;min-width:0}
.pxg-row>[role=cell]{display:flex;min-width:0}
.pxo{flex:1 1 auto;width:100%;min-width:0;min-height:52px;padding:6px 8px;border:1px solid var(--px-rule);border-radius:8px;background:var(--px-ground);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;text-align:left}
.pxo:hover{border-color:var(--px-rule-strong)}
.pxo b{font-size:var(--px-value);font-weight:600;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.pxo-line{font-size:var(--px-label);white-space:nowrap;font-variant-numeric:tabular-nums}
.pxo-imp{display:flex;align-items:center;gap:6px;width:100%;font-size:var(--px-label);white-space:nowrap;font-variant-numeric:tabular-nums}
.pxo-bar{position:relative;display:block;flex:1 1 auto;min-width:24px;height:3px;background:var(--px-rule);border-radius:2px;overflow:hidden}
.pxo-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--px-mark);transform-origin:0 50%;animation:pxBar .5s ease-out both}
@keyframes pxBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.pxs-facts .pxo-bar{width:72px;flex:0 0 72px}
.pxa{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:0;padding-top:8px;font-size:var(--px-label);color:var(--px-ink)}
.pxa span:first-child{font-weight:600}
.pxm{display:flex;flex-direction:column;gap:0;color:var(--px-ink)}
.pxm:empty{display:none}
.pxs-block{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--px-rule);border-bottom:1px solid var(--px-rule);box-shadow:inset 3px 0 0 var(--px-part);padding-left:12px}
/* the ticket's closed door (CORS or offline) sits where the Connect button was: what refused, then ProphetX's own site */
.pxt-door{display:flex;flex-direction:column;gap:10px}
.pxt-door:empty{display:none}
/* why a game stands where it does (rule Q13): one line in the card's own ink, a small ring as its mark, as on every Zena list */
.pxg-why{display:flex;align-items:center;gap:7px;margin:0;font-size:max(12px,var(--px-label));line-height:1.35;font-weight:400;overflow-wrap:anywhere}
.pxg-why::before{content:"";flex:none;width:7px;height:7px;box-sizing:border-box;border:1.5px solid var(--px-why);border-radius:50%}
/* The sports route (rule Q15, ZenaSportsRoute.actionHTML): on a game ProphetX trades with stake on both sides, ProphetX's
   price and its one action are the card's primary action. The side and its American price on the left, the action on the
   right in the primary button's fill, "Odds by ProphetX" under the price in the same ink. Other venues' quotes for the
   game are research (.zpx-research): smaller, after it, under "For comparison", never a second filled button. */
.zpx-act{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"q q" "o o" "by go";align-items:center;column-gap:12px;row-gap:4px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--px-rule);color:var(--px-ink);font-size:var(--px-body);line-height:1.3}
.zpx-q{grid-area:q;display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.zpx-q-price{flex:none}
.zpx-q-other{grid-area:o}
.zpx-q-name{font-weight:600;min-width:0;overflow-wrap:break-word}
.zpx-q-other .zpx-q-name{font-weight:400}
.zpx-q-price{font-size:var(--px-value);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.zpx-q-other .zpx-q-price{font-size:var(--px-body);font-weight:600}
/* Q16.14 (Palash, 2026-11-08 evening: "I hate the blue button as well, keep our look"): the attribution is ProphetX's mark
   (its logo and its name) and the action is an outlined button in the page's own ink, never a venue fill. */
.zpx-by{grid-area:by;display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:max(12px,var(--px-label));font-weight:400;overflow-wrap:break-word}
.zpx-mark{flex:none;display:inline-block;width:14px;height:14px;border-radius:3px;background:#fff url(/venues/prophetx.ico) center/12px no-repeat}
.zpx-go{grid-area:go;align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid var(--px-rule-strong);border-radius:4px;background:transparent;color:var(--px-ink);font:inherit;font-size:var(--px-body);font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer}
.zpx-go:hover{border-color:var(--px-ink)}
.zpx-go:focus-visible{outline:2px solid var(--px-ink);outline-offset:2px}
.zpx-act[data-size=page]{padding:14px 0 0}
.zpx-act[data-size=page] .zpx-q-price{font-size:var(--px-title)}
/* research: other venues' quotes for a game ProphetX trades, labelled once, one size down, plain text actions */
.zpx-research{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:8px;font-size:12px;font-weight:400;line-height:1.35;color:inherit}
.zpx-research-label{font-weight:600}
/* a research quote (R5b, 2026-11-08): plain text that opens that venue's market, its line on a hairline, never a filled
   or outlined button; 32px tall so a thumb can take it */
.zpx-rq{display:inline-flex;align-items:baseline;gap:4px;min-height:32px;padding:6px 0;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-size:12px;font-weight:400;line-height:1.35;text-align:left;text-decoration:underline;text-decoration-color:var(--px-rule-strong);text-underline-offset:3px;cursor:pointer}
.zpx-rq:hover{text-decoration-color:currentColor}
.zpx-rq:focus-visible{outline:2px solid var(--px-ink);outline-offset:2px}
.zpx-rq b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.zpx-rv{font-size:12px;font-weight:600;margin-left:6px}
/* Q16.14 (R5b-LIVE2, 2026-11-08): a Live markets card for a game ProphetX trades is every other card (market-context.js
   routeEventHTML): the card's own outcome buttons carry ProphetX's cents, and where the chart stands on other cards sits the
   quiet venue mark, ProphetX's logo and name over the logos of every venue listing the game ("3 venues"), one ink, no fill;
   it opens the market view, whose ticket is where the venue is chosen. */
.zc-overview .zc-event>.zc-event-bottom>.zc-px-venues{grid-column:2;grid-row:1;justify-self:end;align-self:center;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 14px;min-width:0;max-width:100%;min-height:34px;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:400 12px/1.3 var(--sans);text-align:right;cursor:pointer}
.zn-directory-mode .zc-event>.zc-event-bottom>.zc-px-venues{grid-row:1!important;grid-column:2!important}
/* the mark takes its own width, so the two clubs' buttons keep one line beside it; on a phone it sits under them */
/* (one class more specific than product-ui.css's free-tier card grid, which loads after this sheet) */
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-event-px>.zc-event-bottom{grid-template-columns:minmax(0,1fr) auto!important}
@media(max-width:600px){
 :root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-event-px>.zc-event-bottom{grid-template-columns:minmax(0,1fr)!important}
 :root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-event-px>.zc-event-bottom>.zc-px-venues{grid-column:1!important;grid-row:2!important;justify-self:start;justify-content:flex-start;min-height:30px}
 :root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-event-px>.zc-event-bottom>.zc-event-footer{grid-row:3!important}
}
.zc-deck-mode .zc-event>.zc-event-bottom>.zc-px-venues{grid-column:1;grid-row:auto;justify-self:start;justify-content:flex-start}
.zc-px-venues>span{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;white-space:nowrap}
.zc-px-venues .zc-venue{width:20px;min-width:20px;height:20px;margin:0}
.zc-px-venue>span:last-child{font-weight:500}
.zc-px-more{gap:4px!important}
.zc-px-more>span:last-child{margin-left:4px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;font-variant-numeric:tabular-nums;white-space:nowrap}
.zc-px-venues:hover .zc-px-more>span:last-child{text-decoration-color:currentColor}
.zc-px-venues:focus-visible{outline:1px solid var(--text);outline-offset:3px}
/* the market view's ticket (index.html tkPreview): the pane's own head is the rule above it */
.tkpv-px .zpx-act{margin-top:0;padding-top:0;border-top:0}
.tkpv-px .tkpvq:empty{display:none}
@media (max-width:600px){
 :root{--px-label:max(12px,var(--zt-label,12px));--px-body:14px}
 .zpx-go{padding:8px 12px}
 .pxs{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .pxs-head{padding:12px 16px 10px}
 .pxo{padding:6px 8px}
}
/* a narrow column (a phone, or a News sports column on desktop): the team's name takes its own line over its prices,
   so no name is cut or wrapped past two lines */
.pxm,.pxb-board{container-type:inline-size}
@container (max-width:420px){
 .pxg-row{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:6px}
 .pxg-row .pxg-team{grid-column:1/-1;padding-top:4px}
 .pxg-head .pxg-team{display:none}
 .pxg-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:340px){.pxg-row{gap:4px}.pxo{padding:6px}.pxo-bar{min-width:16px}.zpx-act{column-gap:8px}.zpx-go{padding:8px 10px}}
@media (prefers-reduced-motion:reduce){.pxs[data-busy] .pxs-busy{animation:none;transform:scaleX(1)}.pxo-bar::after{animation:none}}