/* Welcome strip (wynbook.com only: WYN_BRAND.welcomeStrip, lane wynbook-welcome-strip 2026-10-12).
   One bar in the Updates bar's slot: while it is open the Updates bar is hidden and its notices rotate inside the strip,
   so two bars never stack. Phones: two rows, 52 px, scrolls away like the Updates bar. 761 px and up: one row, 44 px,
   sticky like the Updates bar, with the masthead and the fixed rail moved down to match. */
.welcome-strip{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;grid-template-rows:26px 26px;align-items:center;column-gap:8px;height:52px;padding-left:12px;box-sizing:border-box;position:relative;z-index:131;background:var(--ticker-bg);color:var(--ticker-ink);border-bottom:1px solid var(--ticker-rule);font-family:inherit;font-size:11px;line-height:1.25;word-spacing:.15em;overflow:hidden}
.welcome-strip[hidden]{display:none}
.ws-trust{grid-row:1;grid-column:1/3;display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;min-width:0;overflow:hidden;white-space:nowrap;font-weight:750;font-size:10.5px;letter-spacing:.01em}
.ws-trust li{display:flex;align-items:center;gap:4px;flex:none}
.ws-trust .icon{width:13px;height:13px;color:var(--ticker-accent);stroke-width:2.2}
.ws-short,.ws-trust li[data-k=both]{display:none}
/* Depositors get "Instant withdrawals" in the accent colour. Colour only: moving it first shifted the row when /auth/me
   answered (cls.js). */
.welcome-strip[data-state=dep] .ws-trust li[data-k=wd]{color:var(--ticker-accent)}
.ws-line{grid-row:2;grid-column:1;display:flex;align-items:center;gap:6px;min-width:0;color:inherit;text-decoration:none;white-space:nowrap}
.ws-line[hidden]{display:none}
/* No CTA (a phone with the header's Join showing, or a logged-in state without one): the line takes its column too. */
.welcome-strip[data-cta=off] .ws-line{grid-column:1/3}
.ws-tag{flex:none;display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.1);color:var(--ticker-accent);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.ws-tag[data-kind=live]::before{content:"";width:6px;height:6px;border-radius:50%;background:#ef4a4a;box-shadow:0 0 0 2px rgba(239,74,74,.25)}
.ws-text{min-width:0;overflow:hidden;text-overflow:ellipsis;padding-right:2px;transition:opacity .25s ease}   /* 2 px: the last glyph's ink must not be clipped by overflow:hidden */
.ws-text.ws-fade{opacity:0}
.ws-text b{font-weight:800;color:var(--ticker-accent)}
/* A win's masked name: the API sends "R••••l" (never the name), and the dot run reads as a blur, not as letters. */
.ws-mask{display:inline-block;filter:blur(1.4px);opacity:.9;letter-spacing:.04em;padding:0 1px}
.welcome-strip .ws-cta{grid-row:2;grid-column:2;min-height:24px;height:24px;padding:0 12px;font-size:11px;white-space:nowrap}
.welcome-strip .ws-cta[hidden]{display:none}
.ws-close{grid-row:1/3;grid-column:3;align-self:stretch;width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;opacity:.85}
.ws-close:hover{opacity:1}
.ws-close .icon{width:16px;height:16px}
.welcome-strip a:focus-visible,.welcome-strip button:focus-visible{outline:2px solid var(--ticker-accent);outline-offset:-2px}
/* Phones: "Instant deposits & withdrawals" + the payments phrase fill one row (measured 360 to 440, nothing cut, with the
   .15em word spacing: 10 px type up to 420 px wide, "Secure payments" up to 385). */
@media(max-width:760px){.ws-trust li[data-k=dep],.ws-trust li[data-k=wd]{display:none}.ws-trust li[data-k=both]{display:flex}}
@media(max-width:420px){.ws-trust{gap:7px;font-size:10px}.ws-trust li{gap:3px}.ws-trust .icon{width:12px;height:12px}}
@media(max-width:385px){.ws-long{display:none}.ws-short{display:inline}}
/* While the strip is open it replaces the Updates bar (its notices rotate in .ws-line). */
html.ws-open #app>.tenant-news{display:none}
@media(min-width:761px){
 .welcome-strip{display:flex;align-items:center;gap:18px;height:44px;padding-left:20px;position:sticky;top:0;font-size:12.5px}
 .ws-trust{gap:18px;font-size:12px;flex:none}
 .ws-trust .icon{width:15px;height:15px}
 .ws-line{flex:1;padding-left:18px;border-left:1px solid rgba(255,255,255,.14);height:24px}
 /* Before the first line (or with no data) the line keeps its slot, so the CTA and the close never move right. */
 .ws-line[hidden]{display:flex;visibility:hidden}
 .ws-tag{font-size:10px}
 .welcome-strip .ws-cta{height:30px;min-height:30px;padding:0 16px;font-size:12.5px;flex:none}
 .ws-close{width:44px;height:44px;flex:none}
 html.ws-open:not(.wf-on) #app>.masthead,html.ws-open:not(.wf-on) #app>.tenant-news~.masthead{top:44px}
 html.ws-open:not(.wf-on) #app>.rail,html.ws-open:not(.wf-on) #app>.tenant-news~.rail{top:calc(var(--header) + 44px)}
 /* Card up (761-1179 px): the strip and the Updates bar are both hidden, so the masthead and the rail keep their own top.
    The Updates bar's 32 px offset would push the sticky masthead over the card's head row. */
 html.ws-open.wf-on #app>.tenant-news~.masthead{top:0}
 html.ws-open.wf-on #app>.tenant-news~.rail{top:var(--header)}
}
@media(min-width:761px) and (max-width:1100px){.ws-trust{gap:12px;font-size:11.5px}.welcome-strip{gap:12px}.ws-line{padding-left:12px}}
@media(prefers-reduced-motion:reduce){.ws-text{transition:none}}

/* Desktop (1180 px and up, lane wynbook-fomo-mobile): the hottest live match with its back prices and their moves fills
   the strip's free run between the rotating line and the CTA. */
.ws-hot{display:none}
@media(min-width:1180px){
 .ws-hot{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;max-width:48%;height:30px;padding-left:16px;border-left:1px solid rgba(255,255,255,.14);color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden}
 .ws-hot[hidden]{display:none}
 /* The line keeps 280 px and the name ellipsizes down to 7em. When the rest would still be clipped the script steps down
    (fitHot in welcome-strip.js): no score, then the first two price chips, then the first one, then no hot match. So
    neither the line nor a price is ever cut, and a shown price always carries its runner's name. */
 .ws-line{min-width:280px}
 .ws-hot-name{font-weight:800;min-width:7em;overflow:hidden;text-overflow:ellipsis}
 .ws-hot[data-fit~=ns] .ws-hot-score{display:none}
 .ws-hot[data-fit~=two] .ws-hot-odd:nth-child(n+3),.ws-hot[data-fit~=one] .ws-hot-odd:nth-child(n+2){display:none}
 .ws-hot-score{flex:none;opacity:.8}
 .ws-hot-odds{display:flex;gap:6px;flex:none}
 .ws-hot-odd,.ws-hot-susp{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:6px;background:var(--back,#a6d8ff);color:#0b1a2a;font-size:12px}
 .ws-hot-odd b{font-weight:800;font-size:13px}
 .ws-hot-susp{background:rgba(255,255,255,.12);color:inherit;font-weight:750}
 .ws-hot i{font-style:normal;font-size:9px}
 .ws-hot [data-move=up] i{color:#0b6b35}.ws-hot [data-move=down] i{color:#b42318}
}

/* Welcome card (wynbook.com only: WYN_BRAND.welcomeCard; lane wynbook-fomo-mobile 2026-10-12, DESIGN.md there). The first
   block of #main on the lobby pages up to 1179 px; while it is up the strip steps aside. Fixed height in every mode and
   state (pending skeleton included), so nothing under it moves when the data lands. Phones: 174 px; tablets: 108 px. */
html.wf-on #welcome-strip{display:none}
.wf{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:34px 52px 40px 14px;row-gap:5px;height:174px;box-sizing:border-box;margin:0 0 12px;padding:9px 12px;border:1px solid var(--ticker-rule);border-radius:11px;background:var(--ticker-bg);color:var(--ticker-ink);font-size:12px;line-height:1.25;overflow:hidden}
.wf a{color:inherit;text-decoration:none}
.wf a:focus-visible,.wf button:focus-visible{outline:2px solid var(--ticker-accent);outline-offset:-2px}
.wf-head{grid-row:1;display:flex;align-items:center;gap:8px;min-width:0;padding-right:32px}
.wf-hicon{flex:none;display:flex;width:18px;height:18px;color:var(--ticker-accent)}
.wf-hicon .icon{width:18px;height:18px;stroke-width:2.2}
.wf-hicon[data-kind=live]{color:#ff6b6b}
.wf-headline{flex:1;min-width:0;margin:0;font-size:14px;line-height:16px;font-weight:800;color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;word-spacing:.05em}
.wf-num{display:inline-block;color:var(--ticker-accent);font-variant-numeric:tabular-nums;text-align:right}
.wf .wf-cta{flex:none;height:30px;min-height:30px;padding:0 14px;font-size:12.5px;white-space:nowrap}
.wf .wf-cta[hidden]{display:none}
.wf-close{position:absolute;top:0;right:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;opacity:.85}
.wf-close:hover{opacity:1}
.wf-close .icon{width:16px;height:16px}
.wf-lead{grid-row:2;display:grid;grid-template-rows:18px 30px;row-gap:4px;min-width:0}
.wf-match{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.wf-ltag{flex:none;display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.1);color:var(--ticker-accent);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.wf-ltag[data-kind=live]::before,.wf-rtag[data-kind=live]::before{content:"";width:6px;height:6px;border-radius:50%;background:#ef4a4a;box-shadow:0 0 0 2px rgba(239,74,74,.25)}
.wf-name{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:800;color:#fff}
.wf-tv{flex:none;display:flex;color:var(--ticker-accent)}.wf-tv .icon{width:13px;height:13px}
.wf-meta{flex:0 .2 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;opacity:.82;font-size:11.5px}
.wf-big{font-size:15px;font-weight:800;color:#fff}.wf-big>b:last-child{color:var(--ticker-accent)}
.wf-odds{display:flex;gap:6px;min-width:0}
.wf-odd{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px;height:30px;padding:0 8px;box-sizing:border-box;border-radius:7px;background:var(--back,#a6d8ff);color:#0b1a2a !important;font-size:11.5px}
.wf-runner{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-odd b{flex:none;font-size:14px;font-weight:800}
.wf-odd i{flex:none;font-style:normal;font-size:9px}
.wf-odd[data-move=up] i{color:#0b6b35}.wf-odd[data-move=down] i{color:#b42318}
.wf-susp,.wf-when{flex:1;display:flex;align-items:center;justify-content:center;height:30px;border-radius:7px;background:rgba(255,255,255,.1);font-weight:750;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-in{flex:none;align-self:center;font-size:11px;font-weight:750;color:var(--ticker-accent)}
.wf-band{grid-row:3;display:grid;grid-template-rows:18px 18px;row-gap:0;align-content:end;min-width:0;border-top:1px solid rgba(255,255,255,.12);transition:opacity .25s ease}
.wf-band.wf-fade{opacity:0}
.wf-row{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;font-size:11px;word-spacing:.12em}
.wf-row[hidden]{display:none}
.wf-rtag{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 6px;border-radius:4px;background:rgba(255,255,255,.1);color:var(--ticker-accent);font-size:9px;line-height:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.wf-rtext{display:flex;min-width:0;overflow:hidden;padding-right:2px}
.wf-rkey{flex:none;white-space:pre}
.wf-rsoft{flex:0 1 auto;min-width:2.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}
.wf-rtext b{font-weight:800;color:var(--ticker-accent)}
.wf-trust{grid-row:4;display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;min-width:0;overflow:hidden;white-space:nowrap;font-size:10px;font-weight:750;opacity:.9}
.wf-trust li{display:flex;align-items:center;gap:4px;flex:none}
.wf-trust .icon,.wf-tiles .icon{width:12px;height:12px;color:var(--ticker-accent);stroke-width:2.2}
.wf-trust li[data-k=both]{display:none}
/* Trust tiles: the lead in the trust mode, and the trust row's form when the band has nothing to show. */
.wf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.wf-tiles li,.wf[data-band="0"]:not([data-mode=pending]) .wf-trust li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 4px;border-radius:7px;background:rgba(255,255,255,.07);text-align:center;font-size:11px;font-weight:750;line-height:1.2;white-space:normal}
.wf-tiles .icon,.wf[data-band="0"]:not([data-mode=pending]) .wf-trust .icon{width:16px;height:16px}
.wf-lead>.wf-tiles{grid-row:1/3}
.wf[data-mode=trust] .wf-trust{display:none}
.wf[data-mode=trust][data-band="0"] .wf-lead{grid-row:2/5}
.wf[data-band="0"] .wf-band{display:none}
.wf[data-band="0"]:not([data-mode=trust]):not([data-mode=pending]) .wf-trust{grid-row:3/5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;opacity:1}
/* Pending keeps the row form of the trust row: the most common loaded state, so nothing moves when the data lands. */
.wf[data-band="0"]:not([data-mode=pending]) .wf-trust li[data-k=both],.wf[data-band="0"]:not([data-mode=pending]) .wf-trust .ws-short{display:none}
.wf[data-band="0"]:not([data-mode=pending]) .wf-trust .ws-long{display:inline}
.wf-sk{display:block;height:12px;width:62%;border-radius:6px;background:rgba(255,255,255,.1)}
.wf-lead>.wf-sk-a{width:70%;align-self:center}.wf-lead>.wf-sk-b{width:auto;height:30px;border-radius:7px}
.wf[data-mode=pending] .wf-band{visibility:hidden}
@media(max-width:760px){.wf-trust li[data-k=dep],.wf-trust li[data-k=wd]{display:none}.wf-trust li[data-k=both]{display:flex}}
@media(max-width:385px){.wf-trust{gap:7px}}
/* Tablets: the medium form, 108 px: headline and the match on the left, the band and the assurances on the right. */
@media(min-width:761px){
 .wf{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:34px 18px 30px;column-gap:18px;row-gap:4px;height:108px;padding:9px 14px}
 .wf-head{grid-column:1;grid-row:1;padding-right:0}
 .wf-lead{grid-column:1;grid-row:2/4}
 .wf-band{grid-column:2;grid-row:1/3;border-top:0;border-left:1px solid rgba(255,255,255,.12);padding:0 34px 0 14px;margin-left:-18px;grid-template-rows:24px 24px;align-content:center}
 .wf-trust{grid-column:2;grid-row:3;padding-left:14px;margin-left:-18px;border-left:1px solid rgba(255,255,255,.12);gap:14px;font-size:10.5px}
 .wf-row{font-size:12px}
 .wf[data-mode=trust][data-band="0"] .wf-lead{grid-row:2/4;grid-column:1/3}
 .wf[data-band="0"]:not([data-mode=trust]):not([data-mode=pending]) .wf-trust{grid-row:1/4;padding:0 34px 0 14px}
 .wf[data-mode=trust] .wf-head{grid-column:1}
}
/* 761-999 px: the trust row gets about 0.46 x width - 51 px (measured: 299 px at 761, 373 at 920, 421 at 1024); the three
   assurances need 400 px. It shows the phone pair with the short "Secure payments" at the phone card's size (309 px at
   10.5 px / gap 14, so 10 px / gap 10). The tiles keep all three. */
@media(min-width:761px) and (max-width:999px){
 .wf-trust{font-size:10px;gap:10px}
 .wf-trust li[data-k=dep],.wf-trust li[data-k=wd]{display:none}
 .wf-trust li[data-k=both]{display:flex}
 .wf-trust .ws-long{display:none}
 .wf-trust .ws-short{display:inline}
}
@media(prefers-reduced-motion:reduce){.wf-band{transition:none}}
/* UX-10 mobile type floor (360-760px, the wynbook welcome strip and card): restates each sub-10px selector exactly as set, so this later block wins by order. */
@media (min-width:360px) and (max-width:760px){
 .ws-tag,.wf-ltag,.wf-odd i,.wf-rtag{font-size:10px}
}