/* Live now. One charcoal reading surface in every OS theme, like News and Live markets (R5b-LIVE2, Q16.14: the same ground,
   hairlines, type and buttons as the Live markets cards; no coloured edges or boxes). Color sits on marks only (the live
   rule, a price's direction); every word is one ink. Compact tiles keep one anatomy, so an update changes text in place and
   never the tile's size or position. */
#bfBoard:has(.zl-page){overflow-y:auto;overflow-x:hidden;scroll-snap-type:none}
.zc-overview.zl-now-mode:has(.zl-page){height:auto!important;min-height:100%!important;overflow:visible!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important}
.zl-now-mode #zcOverviewBody:has(.zl-page){height:auto!important;min-height:100%!important;overflow:visible}
.zl-page{--text:#f4f7fa;--muted:#f4f7fa;--panel:#11171c;--panel2:#18212a;--line:#2b3640;--zl-ground:#080b10;--zl-card:#11171c;--zl-ink:#f4f7fa;--zl-soft:#f4f7fa;--zl-quiet:#f4f7fa;--zl-live:#ff5f57;--zl-delay:#e8b65c;--zl-change:#96d5ff;--zl-accent:#96d5ff;
  background:var(--zl-ground);color:var(--zl-ink);font-family:var(--sans);padding:14px 20px 104px;min-height:100%;box-sizing:border-box}
.zl-page :is(h1,h2,p,ol,dl,dd,figure){margin:0}
.zl-page :is(button,a){font-family:inherit;color:inherit}
.zl-page :is(button,a):focus-visible{outline:2px solid var(--zl-ink);outline-offset:2px}
.zl-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zl-head{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:4px 0 14px}
.zl-title{display:flex;align-items:baseline;gap:14px;min-width:0}
.zl-title h1{font-size:22px;font-weight:550;letter-spacing:-.4px}
.zl-title [data-zl-count]{font-size:13px;color:var(--zl-soft);font-variant-numeric:tabular-nums}
.zl-tools{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto;justify-content:flex-end}
.zl-leagues{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.zl-leagues::-webkit-scrollbar{display:none}
.zl-leagues>button{flex:none;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 9px;min-height:40px;font-size:12px;color:var(--zl-soft);cursor:pointer;white-space:nowrap}
.zl-leagues>button span{font-variant-numeric:tabular-nums;color:var(--zl-quiet);margin-left:3px}
.zl-leagues>button[aria-pressed=true]{color:var(--zl-ink);border-bottom-color:var(--zl-ink);font-weight:550}
.zl-sources-toggle{flex:none;border:1px solid var(--line);background:none;border-radius:4px;padding:7px 11px;min-height:36px;font-size:12px;cursor:pointer}
.zl-sources-toggle[aria-expanded=true]{background:var(--zl-card)}
.zl-sources{background:var(--zl-card);border-radius:8px;padding:14px 16px;margin:0 0 14px;font-size:12px;line-height:1.5}
.zl-sources dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 22px}
.zl-sources dt{font-weight:600;margin-bottom:2px}
.zl-sources dd{color:var(--zl-soft)}

/* R5b-LIVE2 (Q16.14, Palash, 2026-11-08 evening: "Live now can still be SO much better, it's horrific right now, the green
   color is horrible and the text/UI layout sucks, just take inspiration from the rest of our site"). Live now is set like the
   Live markets cards: the page's ground, no filled boxes, no coloured edges, a hairline over each item, the cards' type sizes
   and buttons. Games share one grid whose items grow to fill each row (no ragged holes at any width); every tile has the
   same slots (head, two clubs, one situation line, the last play in two lines, the market at the foot), so a row's tiles
   line up and an update never changes a tile's size. */
.zl-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px}
.zl-grid>.zl-tile{flex:1 1 calc((100% - (var(--zl-cols,4) - 1) * 16px) / var(--zl-cols,4) - 1px);min-width:min(100%,280px)}   /* --zl-cols: live-now.js balance() */
.zl-tile{position:relative;min-width:0;box-sizing:border-box;background:var(--zl-glass);border:1px solid var(--zl-glass-line);border-radius:12px;-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);transition:background-color .2s ease,border-color .2s ease}
.zl-tile[data-kind=sport]{cursor:pointer;display:flex;flex-direction:column;padding:12px 16px 14px}
.zl-tile[data-kind=sport]:hover{background:var(--zl-glass-hover);border-color:var(--zl-glass-edge)}
.zl-tile-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;border:0;background:none;padding:0 0 8px;text-align:left;cursor:pointer;min-height:26px;font-size:12px}
.zl-league{display:flex;flex-direction:column;min-width:0;font-weight:600;color:var(--zl-ink)}
.zl-league small{font-weight:400;font-size:12px;overflow-wrap:anywhere}
.zl-status{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--zl-ink);font-weight:600}
.zl-status[data-phase=stale]{color:var(--zl-ink)}
.zl-status:is([data-phase=final],[data-phase=halted],[data-phase=unlisted]){color:var(--zl-ink);font-weight:500}
.zl-dot{width:7px;height:7px;border-radius:50%;background:var(--zl-live)}
.zl-score{display:grid;gap:2px}
.zl-side{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:30px}
.zl-name{display:flex;align-items:center;gap:10px;min-width:0}
.zl-name b{flex:none;font-size:13px;font-weight:600;min-width:36px}
.zl-name span{font-size:14px;color:var(--zl-ink);min-width:0;overflow-wrap:anywhere;line-height:1.3}
.zl-ball{flex:none;width:10px;height:2px;border-radius:0;background:var(--zl-ink)}   /* possession: a short rule in the one ink (Palash: "the green color is horrible") */
.zl-pts{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right;line-height:1}
.zl-delta{font-size:12px;font-weight:600;color:var(--zl-ink);font-variant-numeric:tabular-nums}
.zl-changed .zl-pts{color:var(--zl-ink)}
.zl-tile:is([data-phase=final],[data-phase=halted],[data-phase=unlisted]) .zl-pts{color:var(--zl-ink);font-weight:500}
.zl-situation{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:12px;font-weight:500;color:var(--zl-ink);min-width:0;box-sizing:border-box;min-height:26px;padding-top:8px;line-height:1.4}   /* one line held, empty or not (the bases picture is 18px) */
.zl-flag{color:var(--zl-ink);font-weight:600}
.zl-bases{flex:none;width:30px;height:18px}.zl-bases rect{fill:none;stroke:var(--zl-soft);stroke-width:1.2}.zl-bases rect.on{fill:var(--zl-ink);stroke:var(--zl-ink)}
.zl-card-red{display:inline-block;width:8px;height:11px;border-radius:1px;background:#e5534b;margin-right:3px;vertical-align:-1px}
.zl-sets{display:flex;gap:9px;font-variant-numeric:tabular-nums}
/* the last play: two lines held from first paint, never more and never an ellipsis (the play is shortened in live-now.js) */
.zl-feed{--zl-items:1;list-style:none;padding:4px 0 0;display:grid;gap:5px;font-size:12px;line-height:1.4;color:var(--zl-ink);box-sizing:border-box;height:calc(2 * 1.4em + 4px);overflow:hidden;align-content:start}
.zl-feed>li{display:block;max-height:calc(2 * 1.4em);overflow:hidden;min-width:0;overflow-wrap:anywhere}
.zl-feed>li:first-child{color:var(--zl-ink)}
.zl-feed>li b{font-weight:600;font-variant-numeric:tabular-nums}
.zl-feed em{font-style:normal;color:var(--zl-ink);font-size:var(--zt-text,11px)}
.zl-feed .zl-gap{display:block;font-size:var(--zt-text,11px);color:var(--zl-quiet);border-top:1px dashed var(--line);padding-top:3px;letter-spacing:.2px}
.zl-feed .zl-feed-empty{color:var(--zl-quiet)}
.zl-detail[hidden]{display:none}
/* An open game takes the whole row: the game and its market on the left, every update on the right (one column on a phone). */
.zl-grid>.zl-tile.zl-open{flex-basis:100%}
.zl-tile.zl-open{cursor:default;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:28px;align-content:start}
.zl-tile.zl-open>.zl-tile-head{grid-column:1/-1}
/* Nothing has updated yet: open in place, one column, rather than beside an empty update list. */
.zl-tile.zl-open-quiet{grid-template-columns:minmax(0,1fr)}.zl-tile.zl-open-quiet>.zl-feed{display:none}
.zl-tile.zl-open>.zl-feed{grid-column:2;grid-row:2/span 4;height:auto;max-height:none;padding-top:0;align-self:start}
.zl-tile.zl-open>.zl-feed>li{max-height:none}
.zl-tile.zl-open>.zl-detail{grid-column:1;display:grid;gap:12px;align-content:start;padding-top:10px}
.zl-visual{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--zl-soft)}
.zl-visual .zn-downs span{border-color:var(--line);color:var(--zl-soft);opacity:1}.zl-visual .zn-downs .current{background:var(--zl-ink);color:var(--zl-card)}
.zl-visual :is(b,strong){color:var(--zl-ink)}.zl-visual small{color:var(--zl-soft)}
.zl-lines{width:auto;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.zl-lines :is(th,td){padding:3px 8px 3px 0;text-align:right;color:var(--zl-soft);font-weight:400}
.zl-lines th{text-align:left;color:var(--zl-ink);font-weight:600;padding-right:14px}
.zl-lines .zl-total{color:var(--zl-ink);font-weight:600;padding-left:6px}
.zl-actions{display:flex;gap:10px;flex-wrap:wrap}
.zl-market{border:0;background:none;border-radius:0;padding:6px 0;min-height:32px;font-size:12px;font-weight:500;cursor:pointer}
.zl-market:hover{text-decoration:underline;text-underline-offset:3px}

/* Live coverage (Q16.14): News items in their own list after the games, a hairline over each: the headline, then the
   publisher and its time. The list's items grow to fill each row, as the games do. */
.zl-reports{margin-top:28px}
.zl-reports[hidden]{display:none}
.zl-reports>h2,.zl-later>h2{font-size:15px;font-weight:600;line-height:1.3;color:var(--zl-ink);margin:0 0 8px}
.zl-report-grid{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px}
.zl-report-grid>.zl-tile{flex:1 1 300px;min-width:min(100%,280px)}
.zl-tile[data-kind=coverage],.zl-tile[data-kind=release]{display:block}
.zl-report{display:grid;align-content:start;gap:6px;padding:12px 16px 14px;text-decoration:none;color:var(--zl-ink);min-height:100%;box-sizing:border-box}
.zl-report:hover .zl-headline{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.zl-headline{font-size:14px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.zl-byline{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--zl-ink);font-variant-numeric:tabular-nums}.zl-byline b{color:var(--zl-ink);font-weight:600}

.zl-empty{background:none;border-top:1px solid var(--line);border-radius:0;padding:16px 0;max-width:640px}
.zl-empty h2{font-size:15px;font-weight:600;margin-bottom:6px}
.zl-empty p{font-size:13px;color:var(--zl-ink);line-height:1.5}
/* Later (Q16.14): rows set like the Live markets list, a hairline over each: the start (and its countdown inside the hour),
   the league over the matchup, the prices on the cards' own buttons and the price venue's mark. Two columns of rows on a
   wide screen, read down each column in time order. */
.zl-later{margin-top:28px}
.zl-later ol{list-style:none;padding:0;margin:0;columns:2 520px;column-gap:28px}
.zl-later li{display:grid;grid-template-columns:76px minmax(0,1fr) auto;column-gap:14px;row-gap:6px;align-items:center;padding:10px 0;font-size:13px;border-top:1px solid var(--line);break-inside:avoid}
.zl-later time{font-weight:500;font-variant-numeric:tabular-nums;color:var(--zl-ink)}
.zl-later-game{display:grid;gap:2px;min-width:0}
.zl-later-league{font-size:12px}
/* round 3, 2026-11-08 (visual spec: nothing ends in an ellipsis): a long matchup wraps to a second line instead of being cut */
.zl-later b{font-weight:500;min-width:0;overflow-wrap:anywhere}.zl-later i{font-style:normal}

@media(max-width:600px){
  .zl-page{padding:12px 12px 104px}
  .zl-head{padding-bottom:10px}
  .zl-tile.zl-open{grid-template-columns:minmax(0,1fr)}
  .zl-tile.zl-open>.zl-feed{grid-column:1;grid-row:auto}
  .zl-tile.zl-open>.zl-detail{grid-row:auto}
  .zl-later li{grid-template-columns:64px minmax(0,1fr)}.zl-later li>b{grid-column:2}
}
/* Q8: a pending read keeps the view's place, without words. */
.zl-empty.zl-pending{min-height:120px;max-width:none}
/* R5b-LIVENOW (2026-11-08). Visual spec: no dots. The live mark is a short red rule, possession a short rule in the one
   ink (R5b-LIVE2: no green); both are marks, every word stays the one ink. */
.zl-dot{width:3px;height:12px;border-radius:0}
.zl-ball{width:10px;height:2px;border-radius:0}
/* Live now is its own destination (Palash, 2026-11-08: "it doesn't have to be limited by category"); while it is chosen the
   topic row is not applied, so it is not shown. R6 (Palash, 2026-11-08 9:50 PM ET: "Live now should be its own section on
   the right side, with the red dot ... all the way on the right side"): the reading-mode switch keeps Zena News and Live
   markets on the left, and the bar's own Live now entry, with its red live dot, stands alone at the bar's right end (on a
   phone, the right side of its first row beside the watchlist, clear of the View menu). Same destination, so the switch's
   copy is not repeated. */
.zc-category-bar>.zc-mode-switch>.zc-mode-now{display:none}
.zc-category-bar:has(>.zc-mode-switch>.zc-mode-now[aria-pressed=true])>.zc-topics{display:none}
.zc-category-bar>.zc-live-now>i{flex:none;width:7px;height:7px;border-radius:50%;background:#ff5f57;box-shadow:0 0 0 0 rgba(255,95,87,.5);animation:zl-live-pulse 2s ease-in-out infinite}
#side.phfree .phfree-primary>[data-ph-action=now]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;vertical-align:2px;border-radius:50%;background:#ff5f57;animation:zl-live-pulse 2s ease-in-out infinite}   /* the phone menu's Live now, last of its group, with the same dot */
@keyframes zl-live-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,95,87,.45)}50%{opacity:.7;box-shadow:0 0 0 4px rgba(255,95,87,0)}}
@media(min-width:601px){
  :root .zc-category-bar>.zc-live-now{order:9;margin-left:0;padding-left:16px;box-shadow:inset 1px 0 var(--line)}
  :root .zc-category-bar>.zc-live-now+.zc-watchlist{margin-left:auto!important}
}
@media(max-width:600px){:root .zc-category-bar>.zc-live-now{gap:6px;padding-left:4px;padding-right:4px}}   /* the two reading modes keep their full width beside it at 390px */
@media(max-width:360px){:root .zc-category-bar>.zc-mode-switch>button{padding-left:4px;padding-right:4px}:root .zc-category-bar>.zc-live-now{gap:4px;padding-left:0;padding-right:1px}}   /* and their short names at 320px */
/* The game's market on its tile (Q16.14, R5b-LIVE2), as the Live markets card draws a market: each club's price on the
   cards' own outcome button (leg | price, the one-pixel rule of Q16.11), its move since the start under it as a small
   figure (green up, red down), then the venue mark (the price venue's logo and name, the other venues' logos and their
   count) and "Open market" as plain text actions. The slot sits at the tile's foot and holds its height from first paint
   (Q8), so a tile never grows when the board answers. */
.zl-mkt{display:grid;gap:6px;min-width:0;margin-top:auto;padding-top:12px}
.zl-mkt-pending,.zl-mkt-none{min-height:103px;box-sizing:border-box}   /* the height of a priced slot: buttons, move line, venue line */
.zl-mkt-none{align-content:end}
.zl-mkt-sides{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 8px;min-width:0}
.zl-mq{display:grid;justify-items:start;align-content:start;gap:3px;min-width:0}
.zl-mq:empty{display:none}   /* a club no venue quotes takes no place in the row */
.zl-mq-b{display:inline-grid;grid-template-columns:auto auto;align-items:center;justify-content:center;max-width:100%;box-sizing:border-box;min-height:34px;padding:6px 11px;border:1px solid var(--line);border-radius:4px;background:none;color:var(--zl-ink);font:400 13px/16px var(--sans);font-variant-numeric:tabular-nums;text-align:center;cursor:pointer}
.zl-mq-b>span{padding-right:10px;min-width:0;overflow-wrap:anywhere}
.zl-mq-b>b{box-sizing:content-box;min-width:4.4ch;padding-left:10px;border-left:1px solid var(--zc-leg-rule,rgba(244,247,250,.58));font-weight:600;text-align:center;white-space:nowrap}
.zl-mq-b:hover{border-color:var(--zl-ink)}
.zl-mv{display:block;min-height:16px;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--zl-ink)}
.zl-mv[data-dir=up]{color:var(--edge-pos,#2fbf71)}
.zl-mv[data-dir=down]{color:var(--edge-neg,#ff5f57)}
.zl-mkt-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:32px}
.zl-mkt-none .zl-mkt-foot{justify-content:flex-start}
.zl-venues{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0;min-height:32px;padding:0;border:0;border-radius:0;background:none;color:var(--zl-ink);font:400 12px/1.3 var(--sans);text-align:left;cursor:pointer}
.zl-venues>span,.zl-later-venue{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.zl-venue>span:last-child{font-weight:500}
.zl-venue-more{gap:4px!important}
.zl-venue-more>span:last-child{margin-left:4px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;font-variant-numeric:tabular-nums}
.zl-venues:hover .zl-venue-more>span:last-child{text-decoration-color:currentColor}
.zl-page .zc-venue{width:20px;min-width:20px;height:20px;margin:0}
.zl-mkt-go{flex:none;border:0;background:none;border-radius:0;padding:6px 0;min-height:32px;color:var(--zl-ink);font:500 12px/1.3 var(--sans);cursor:pointer;white-space:nowrap}
.zl-mkt-go:hover{text-decoration:underline;text-underline-offset:3px}
.zl-tile.zl-open>.zl-mkt{grid-column:1;align-self:start}
/* Later rows: the start and, inside the hour, its countdown; the matchup opens the game's market; the market's prices. */
.zl-later-when{display:grid;gap:1px;min-width:0}
.zl-later-in{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.zl-later-open{border:0;background:none;padding:2px 0;min-height:28px;text-align:left;font:inherit;font-weight:500;cursor:pointer;min-width:0;overflow-wrap:anywhere;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.zl-later-open:hover{text-decoration-color:currentColor}
.zl-later-open i{font-style:normal}
.zl-later-mkt{grid-column:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;min-width:0}
.zl-later-mkt .zl-mq-b{min-height:30px;padding:5px 9px;font-size:12px}
.zl-later-venue{margin-left:6px;font-size:12px}
@media(max-width:600px){.zl-later-mkt{grid-column:2;justify-content:flex-start}.zl-mq-b{font-size:12px;padding:6px 10px}}
@media(max-width:600px){.zl-mkt-none{min-height:0}}   /* a settled "no venue lists it" holds no blank band on a stacked phone tile */
/* Q16.14 (R5b-LIVE2): on a phone the reading-mode switch holds its three modes on its one row without scrolling. Measured
   at 12px (the phone type floor): Zena News, Live now and Live markets need 185px of text, and at 320px the row leaves the
   switch 172px beside the watchlist and the View control, so there the outer two read News and Markets (the full names stay
   the buttons' text, so their accessible names do not change); at 390px tighter spacing is enough. */
@media(max-width:430px){:root .zc-category-bar>.zc-mode-switch>button{font-size:12px;padding-left:6px;padding-right:6px}:root .zc-category-bar>.zc-mode-switch>.zc-all{padding-left:0}:root .zc-category-bar>.zc-mode-switch{gap:0;padding-right:0}}
@media(max-width:360px){
  :root .zc-category-bar>.zc-mode-switch>:is(.zc-all,.zc-mode-end){font-size:0!important}   /* over product-ui.css's .zc-category-bar button 12px !important */
  :root .zc-category-bar>.zc-mode-switch>.zc-all::before{content:"News";content:"News"/"";font-size:12px}
  :root .zc-category-bar>.zc-mode-switch>.zc-mode-end::before{content:"Markets";content:"Markets"/"";font-size:12px}
}
/* The market view's live scoreboard (live-now.js scorebug, led by the context column): the state and the ticking clock,
   both clubs and their score, the situation, the last play. Figures are tabular and every line holds its height, so an
   update rewrites text in place without moving anything. */
.zlg{display:grid;gap:6px;min-width:0;font:12px/1.4 var(--sans);color:var(--text)}
.zlg p{margin:0}
.zlg-top{display:flex;align-items:center;gap:6px 12px;min-width:0;min-height:26px}
.zlg-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;white-space:nowrap}
.zlg-league{font-weight:400}
.zlg-mark{flex:none;width:3px;height:12px;background:#ff5f57}
.zlg-clock{margin-left:auto;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.zlg-now{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:26px;font-size:12px;color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;white-space:nowrap}
.zlg-now:hover{text-decoration-color:currentColor}
.zlg-now:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.zlg-sides{display:grid;gap:2px}
.zlg-side{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;align-items:center;column-gap:8px;min-height:28px}
.zlg-abbr{font-size:13px;font-weight:650;letter-spacing:.3px}
.zlg-name{font-size:13px;min-width:0;overflow-wrap:anywhere;line-height:1.25}
.zlg-ball{grid-column:3;width:10px;height:2px;background:var(--text)}   /* R5b-LIVE2: possession in the one ink, no green */
.zlg-ball[hidden]{display:block;visibility:hidden}
.zlg-pts,.zlg-rec{grid-column:4;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.zlg-pts{font-size:24px;font-weight:600;line-height:1}
.zlg-rec{font-size:13px}
.zlg-sit{font-weight:500;min-height:17px}
.zlg-play{min-height:34px;line-height:1.4;overflow-wrap:anywhere}
.zlg[data-zlg-phase=post] .zlg-pts{font-weight:500}
@media(max-width:600px){.zlg-clock{font-size:15px}.zlg-pts{font-size:22px}}
/* In the desktop market header the context box is held compact (workspace-ui.css, 104px) so the chart keeps its room; a
   game's live scoreboard is the one thing it must show whole, so the box takes the scoreboard's height and the clubs sit side
   by side there; what follows the scoreboard (the field picture) stays inside the box's own scroll. */
@media(min-width:1101px){
  /* R5b-MVA2 (2026-11-08: the play line was cut at the column's foot at 1440): the box is sized to the scoreboard, whatever
     the names and the play wrap to */
  :root[data-tier=free] #main.zc-market-page.zc-workspace .zc-clean-header>.zc-market-context:has(.zlg){max-height:none!important;overflow:visible!important}
  :root[data-tier=free] #main.zc-market-page .zc-clean-header .zlg-sides{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  :root[data-tier=free] #main.zc-market-page .zc-clean-header .zlg-side{grid-template-columns:auto minmax(0,1fr) auto auto}
  :root[data-tier=free] #main.zc-market-page .zc-clean-header .zlg-side+.zlg-side{padding-left:14px;box-shadow:inset 1px 0 var(--line)}
}
/* The Later prices take their own column on wide screens, so a price arriving never adds a line to the row. */
@media(min-width:601px){.zl-later li{min-height:62px;box-sizing:border-box}}

/* R6 (Palash, 2026-11-08 9:50 PM ET: "you need distinct key cards. You can make the key cards pretty translucent. Everything
   has to be animated: the time clock should be ticking"). Each game, and each live report, is its own key card: a thin
   translucent fill of the one ink over the page's ground, a fine hairline edge and a soft backdrop blur (the page is the one
   charcoal reading surface in every OS theme, so the card reads the same in both). The game clock ticks every second through
   ZenaClock between feed reads and prices move in place with their red/green cue (ZenaLive.cue). A card enters with a short
   rise; an update brings the newest play and a changed score in with a fade (a rewrite of the card's text, live-now.js), and
   its edge brightens for a moment. Motion is opacity and transform only, so nothing changes size or position; under reduced
   motion everything is drawn still. */
.zl-page{--zl-glass:rgba(244,247,250,.045);--zl-glass-hover:rgba(244,247,250,.07);--zl-glass-line:rgba(244,247,250,.12);--zl-glass-edge:rgba(244,247,250,.24);
  background:radial-gradient(1100px 520px at 12% -8%,rgba(150,213,255,.07),transparent 62%),radial-gradient(900px 480px at 96% 4%,rgba(150,213,255,.04),transparent 60%),var(--zl-ground)}
.zl-tile{box-shadow:inset 0 1px 0 rgba(244,247,250,.05)}
.zl-name b{display:inline-grid;place-items:center;box-sizing:border-box;min-width:40px;height:24px;padding:0 6px;border:1px solid var(--zl-glass-line);border-radius:6px;background:rgba(244,247,250,.06);font-size:12px;letter-spacing:.3px}
.zl-grid>.zl-tile,.zl-report-grid>.zl-tile{animation:zl-card-in .42s cubic-bezier(.2,.7,.2,1) both}
.zl-grid>.zl-tile:nth-child(2),.zl-report-grid>.zl-tile:nth-child(2){animation-delay:.04s}
.zl-grid>.zl-tile:nth-child(3),.zl-report-grid>.zl-tile:nth-child(3){animation-delay:.08s}
.zl-grid>.zl-tile:nth-child(4),.zl-report-grid>.zl-tile:nth-child(4){animation-delay:.12s}
.zl-grid>.zl-tile:nth-child(5){animation-delay:.16s}
.zl-grid>.zl-tile:nth-child(n+6){animation-delay:.2s}
@keyframes zl-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.zl-tile[data-zl-updated]{border-color:var(--zl-glass-edge)}
.zl-tile[data-zl-updated] .zl-feed>li:first-child,.zl-tile[data-zl-updated] .zl-situation{animation:zl-text-in .5s ease-out both}
.zl-changed .zl-pts,.zl-changed .zl-delta{animation:zl-score-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes zl-text-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes zl-score-in{0%{opacity:.25;transform:translateY(-4px)}100%{opacity:1;transform:none}}
.zl-status .zl-dot{animation:zl-live-blink 2s ease-in-out infinite}
@keyframes zl-live-blink{0%,100%{opacity:1}50%{opacity:.45}}
@media(max-width:600px){.zl-grid,.zl-report-grid{gap:12px}.zl-tile[data-kind=sport]{padding:12px 14px 14px}.zl-report{padding:12px 14px 14px}}
@media(prefers-reduced-motion:reduce){
  .zl-tile,.zl-tile *,.zc-category-bar>.zc-live-now>i,#side.phfree .phfree-primary>[data-ph-action=now]::before{animation:none!important;transition:none!important}
}

/* R7 2026-11-08 (team meeting, 10 PM ET; Anagh: "a lot of white ... make any title across the whole site the same colour";
   Aryaman: "too much white"). One title ink for every card and section title, one dimmer body ink (AA on the charcoal) for
   counts, bylines, the play feed and other meta, so a title always stands above the text under it. The page keeps its
   charcoal in every OS theme, so its inks are the dark pair; the soft and quiet tokens take the body ink. */
:root{--title-ink:var(--text,#fff);--body-ink:color-mix(in srgb,var(--title-ink) 66%,var(--bg,#000))}
.zl-page{--title-ink:#fff;--body-ink:#a8adb4;--zl-soft:var(--body-ink);--zl-quiet:var(--body-ink);--muted:var(--body-ink)}
.zl-page :is(.zl-title h1,.zl-league,.zl-reports>h2,.zl-later>h2,.zl-headline){color:var(--title-ink)}
.zl-page :is(.zl-byline,.zl-situation,.zl-feed){color:var(--body-ink)}
.zl-page .zl-feed>li:first-child{color:var(--zl-ink)}

/* r9 2026-11-09 (Palash, 11:20 PM ET: "the most important thing is the colour differentiation for users to follow exactly
   what they need"; r9 spec as corrected by its critique). Live now takes the site's roles from zena-tokens.css: two inks
   (title and body), one ground with hairlines (the key cards keep their translucency and motion), the type scale, and the
   category kicker as the one coloured word on a card with its 2px top rule (C12). The page stays the one charcoal reading
   surface in every OS theme, so it pins the dark values of the roles it reads; every var() carries that value as its
   fallback so the page renders before the tokens sheet loads. Scores are big tabular figures; a price's move is body ink
   with a green or red triangle (C4); the clock and period are body ink beside the live mark. Live now shows no Zena
   estimate, so it carries no purple. */
.zl-page{--z-title:#f4f6fa;--z-body:#b9bfc8;--z-section:var(--z-title);--z-meta:var(--z-body);--z-surface:#080b10;--z-raised:var(--z-surface);--z-hairline:#232a35;--z-up:#00c805;--z-down:#ff5000;--z-live:#ff3b30;
  --cat-finance:#5fa8ff;--cat-crypto:#ff9f45;--cat-sports:#2fd0bc;--cat-politics:#ff9ad5;--cat-entertainment:#e3d454;--cat-world:#8fdcff;--cat-perps:var(--cat-crypto);
  --title-ink:var(--z-title,#f4f6fa);--body-ink:var(--z-body,#b9bfc8);--zl-ink:var(--z-title,#f4f6fa);--text:var(--z-title,#f4f6fa);--zl-live:var(--z-live,#ff3b30);--zl-ground:var(--z-surface,#080b10);--zl-glass-line:var(--z-hairline,#232a35);
  background:radial-gradient(1100px 520px at 12% -8%,rgba(244,247,250,.05),transparent 62%),radial-gradient(900px 480px at 96% 4%,rgba(244,247,250,.03),transparent 60%),var(--zl-ground)}   /* the glow behind the glass in the one ink, not a hue */
.zl-page [data-zcat=econ]{--cat:var(--cat-finance,#5fa8ff)}.zl-page [data-zcat=crypto]{--cat:var(--cat-crypto,#ff9f45)}.zl-page [data-zcat=sport]{--cat:var(--cat-sports,#2fd0bc)}.zl-page [data-zcat=pol]{--cat:var(--cat-politics,#ff9ad5)}.zl-page [data-zcat=culture]{--cat:var(--cat-entertainment,#e3d454)}.zl-page :is([data-zcat=world],[data-zcat=climate]){--cat:var(--cat-world,#8fdcff)}
.zl-page .zl-tile[data-kind=sport]{--cat:var(--cat-sports,#2fd0bc)}
.zl-page .zl-tile[data-zcat]{box-shadow:inset 0 2px 0 var(--cat,#2fd0bc)}   /* C12: the category rule on top; item 15's left rules keep their own meaning */
.zl-page .zl-title h1{font:var(--zt-page,650 32px/38px var(--sans));letter-spacing:-.4px;color:var(--z-title,#f4f6fa)}
.zl-page .zl-title [data-zl-count]{font:var(--zt-small,400 13px/18px var(--sans));font-variant-numeric:tabular-nums;color:var(--z-body,#b9bfc8)}
.zl-page .zl-leagues>button{font:var(--zt-small,400 13px/18px var(--sans));font-weight:600;color:var(--z-body,#b9bfc8)}
.zl-page .zl-leagues>button[aria-pressed=true]{color:var(--z-title,#f4f6fa);border-bottom-color:var(--cat-sports,#2fd0bc)}   /* the active chip: a permitted use of the hue */
/* the kicker: the league, in the Sports hue, above the matchup; the event name under it in body ink */
.zl-page .zl-tile-head .zl-league,.zl-page .zl-later .zl-later-league,.zl-page .zl-report>.zl-kicker{font:var(--zt-small,400 13px/18px var(--sans));font-weight:600;color:var(--cat,#2fd0bc)}
.zl-page .zl-tile-head .zl-league small{font-weight:400;color:var(--z-body,#b9bfc8)}
.zl-page .zl-status{font:var(--zt-small,400 13px/18px var(--sans));font-weight:600;font-variant-numeric:tabular-nums;color:var(--z-body,#b9bfc8)}
.zl-page .zl-name>span{font:var(--zt-card,600 16px/22px var(--sans));color:var(--z-title,#f4f6fa)}
.zl-page .zl-name>b{color:var(--z-body,#b9bfc8)}
.zl-page .zl-side{min-height:34px}
.zl-page .zl-pts{font:var(--zt-figure,650 28px/32px var(--sans));font-variant-numeric:tabular-nums;line-height:1;min-width:2ch;color:var(--z-title,#f4f6fa)}   /* C11: the shorthand resets tabular figures, so they are restated */
.zl-page .zl-delta{color:var(--z-body,#b9bfc8)}
.zl-page .zl-situation{font-size:13px;color:var(--z-body,#b9bfc8)}
.zl-page .zl-flag{color:var(--z-title,#f4f6fa)}
.zl-page .zl-feed,.zl-page .zl-feed>li:first-child{color:var(--z-body,#b9bfc8)}   /* the last play in body ink (12px keeps its two-line hold) */
.zl-page .zl-card-red{background:var(--z-down,#ff5000)}
/* a price's move: body ink, the direction on a drawn triangle (C4); the sign stays in the text */
.zl-page .zl-mv,.zl-page .zl-mv:is([data-dir=up],[data-dir=down]){font-weight:600;color:var(--z-body,#b9bfc8)}
.zl-page .zl-mv:is([data-dir=up],[data-dir=down])::before{content:'';display:inline-block;margin-right:4px;border:4px solid transparent;vertical-align:1px}
.zl-page .zl-mv[data-dir=up]::before{border-bottom:6px solid var(--z-up,#00c805);border-top:0}
.zl-page .zl-mv[data-dir=down]::before{border-top:6px solid var(--z-down,#ff5000);border-bottom:0}
.zl-page .zl-mq-b{color:var(--z-title,#f4f6fa)}
.zl-page .zl-venues{color:var(--z-body,#b9bfc8)}   /* actions (Open market, the market link) keep title ink */
/* live reports: the section heading at section size in title ink; each report a card with its desk's kicker */
.zl-page :is(.zl-reports,.zl-later)>h2{font:var(--zt-section,650 20px/26px var(--sans));color:var(--z-section,#f4f6fa);margin:0 0 12px}
.zl-page .zl-headline{font:var(--zt-card,600 16px/22px var(--sans));color:var(--z-title,#f4f6fa)}
.zl-page .zl-byline,.zl-page .zl-byline b{font-size:13px;color:var(--z-body,#b9bfc8)}
.zl-page .zl-later time{color:var(--z-title,#f4f6fa)}
.zl-page .zl-later :is(.zl-later-open,.zl-later-game>b){font:var(--zt-small,400 13px/18px var(--sans));font-weight:600;color:var(--z-title,#f4f6fa)}   /* a price arriving never adds a line to the row (review 2026-11-09) */
.zl-page .zl-later-in{color:var(--z-body,#b9bfc8)}
@media(max-width:600px){.zl-page .zl-situation,.zl-page .zl-byline,.zl-page .zl-byline b{font-size:12px}.zl-page .zl-side{min-height:30px}}

/* r12 2026-11-09 (Palash, 3 AM ET: "you don't have to repeat information ... it needs to carry information properly, cleanly
   and nicely; it looks very AI right now"; 3:15 AM: "a lot of the gray text currently has to be there, it can be presented in
   such a better form"). Live now reads at any count. One or two live games lead beside the Starting soon list on a wide screen
   (data-zl-few, live-now.js paint) and more take the full width with the list after them, so a single game is a card of
   sensible width rather than one tile stretched across the page. Every gray line is structured meta: a label in body ink and
   its figure in title ink, facts set apart by a hairline rule, never a loose sentence. */
.zl-body{display:block;min-width:0}
.zl-live{min-width:0}
.zl-page .zl-grid>.zl-tile:only-child:not(.zl-open){max-width:720px}
@media(min-width:1000px){
  .zl-page[data-zl-few="1"] .zl-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"live soon" "reports soon";column-gap:32px;align-items:start}
  .zl-page[data-zl-few="1"] .zl-live{grid-area:live}
  .zl-page[data-zl-few="1"] .zl-soon{grid-area:soon}
  .zl-page[data-zl-few="1"] .zl-reports{grid-area:reports}   /* the live reports under the games, in the same column */
  .zl-page[data-zl-few="1"] .zl-grid>.zl-tile:only-child{max-width:none}
  .zl-page[data-zl-few="1"] .zl-soon>.zl-later{margin-top:0}
  .zl-page[data-zl-few="1"] .zl-later ol{columns:auto}
}
/* two games sit beside Starting soon only from 1280px: between 1000 and 1279 each tile was about 320px and tennis names broke
   in two (review, 2026-11-09), so there they keep the full-width grid */
@media(min-width:1280px){
  .zl-page[data-zl-few="2"] .zl-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);grid-template-rows:auto 1fr;grid-template-areas:"live soon" "reports soon";column-gap:32px;align-items:start}
  .zl-page[data-zl-few="2"] .zl-live{grid-area:live}
  .zl-page[data-zl-few="2"] .zl-soon{grid-area:soon}
  .zl-page[data-zl-few="2"] .zl-reports{grid-area:reports}
  .zl-page[data-zl-few="2"] .zl-soon>.zl-later{margin-top:0}
  .zl-page[data-zl-few="2"] .zl-later ol{columns:auto}
  .zl-page[data-zl-few="2"] .zl-later li{grid-template-columns:76px minmax(0,1fr)}
  .zl-page[data-zl-few="2"] .zl-later-mkt{grid-column:2;justify-content:flex-start}
}
/* facts: label in body ink, figure in title ink, a hairline rule between them (no semicolons, no interpunct) */
.zl-page .zl-situation{column-gap:0}
.zl-page .zl-fact{display:inline-flex;align-items:baseline;gap:4px;min-width:0;color:var(--z-body,#b9bfc8)}
.zl-page .zl-fact>b{font-weight:600;color:var(--z-title,#f4f6fa);font-variant-numeric:tabular-nums}
.zl-page .zl-bases{margin-right:8px}
.zl-page :is(.zl-fact+.zl-fact,.zl-byline>span,.zl-later-event,.zl-empty>p)::before{content:'';display:inline-block;flex:none;align-self:center;width:1px;height:12px;margin:0 10px;vertical-align:-1px;background:var(--zl-glass-edge,rgba(244,247,250,.24))}
.zl-page .zl-byline{column-gap:0}
/* tennis: games per set on each player's row, the current set in title ink, then the sets won past a hairline */
.zl-page .zl-side{grid-template-columns:minmax(0,1fr) auto auto auto}
.zl-page .zl-side>.zl-name{grid-column:1}
.zl-page .zl-games{grid-column:2;display:flex;font:600 15px/20px var(--sans,Arial);font-variant-numeric:tabular-nums;color:var(--z-body,#b9bfc8)}
.zl-page .zl-games>span{min-width:2.4ch;text-align:center}
.zl-page .zl-games>.zl-games-now{color:var(--z-title,#f4f6fa)}
.zl-page .zl-side>.zl-delta{grid-column:3}
.zl-page .zl-side>.zl-pts{grid-column:4}
.zl-page .zl-tile[data-sport=tennis] .zl-side>.zl-pts{padding-left:12px;box-shadow:inset 1px 0 var(--zl-glass-line,#232a35)}
.zl-page .zl-tile[data-sport=tennis] .zl-situation:empty{display:none}
.zl-page .zl-tile[data-sport=tennis]:not(.zl-open)>.zl-feed{display:none}   /* a closed tennis tile's updates repeat the row's figures, and a set-end score line made it grow 38px twice a set (review, 2026-11-09) */
/* Starting soon: the day (another day only) over the start, the league kicker beside its event, the matchup, the prices */
.zl-page .zl-later-day{font:var(--zt-small,400 13px/18px var(--sans,Arial));font-size:12px;color:var(--z-body,#b9bfc8)}
.zl-page .zl-later-kick{display:block;min-width:0;line-height:18px}   /* inline, so a long event wraps by word after its rule, never onto a line of its own */
.zl-page .zl-later-kick>.zl-later-event::before{margin-left:6px}   /* the word space before it makes up the rest of the 10px */
.zl-page .zl-later-event{font:var(--zt-small,400 13px/18px var(--sans,Arial));font-size:12px;color:var(--z-body,#b9bfc8);min-width:0;overflow-wrap:anywhere}
.zl-page .zl-later-league{font-size:12px}
/* the empty state: one line, what is live and when the next game starts */
.zl-page .zl-empty:not(.zl-pending){display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px;max-width:none;padding:14px 0}
.zl-page .zl-empty h2{margin:0;font:var(--zt-card,600 16px/22px var(--sans,Arial));color:var(--z-title,#f4f6fa)}
.zl-page .zl-empty>p{font:var(--zt-small,400 13px/18px var(--sans,Arial));color:var(--z-body,#b9bfc8);font-variant-numeric:tabular-nums}
/* Data & sources: one group a source, label and value rows on the page's one ground under a hairline */
.zl-page .zl-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 32px;background:none;border-top:1px solid var(--zl-glass-line,#232a35);border-radius:0;padding:14px 0 6px}
.zl-page .zl-sources[hidden]{display:none}
.zl-page .zl-sources h3{margin:0 0 6px;font:var(--zt-small,400 13px/18px var(--sans,Arial));font-weight:600;color:var(--z-title,#f4f6fa)}
.zl-page .zl-sources dl{display:grid;grid-template-columns:none;gap:3px}
.zl-page .zl-sources dl>div{display:grid;grid-template-columns:116px minmax(0,1fr);column-gap:12px;font-size:12px;line-height:17px}
.zl-page .zl-sources dt{margin:0;font-weight:400;color:var(--z-body,#b9bfc8)}
.zl-page .zl-sources dd{color:var(--z-title,#f4f6fa);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media(max-width:600px){.zl-page .zl-games{font-size:14px}.zl-page .zl-sources dl>div{grid-template-columns:104px minmax(0,1fr)}}
/* Palash, 3:15 AM ET: "make sure everything is animated and proper, no matter which section I open up": Starting soon, the
   empty line and Data & sources enter with the cards' short rise (opacity and transform only, still under reduced motion) */
.zl-soon:not(:empty){animation:zl-card-in .42s cubic-bezier(.2,.7,.2,1) .06s both}   /* on the container that stays: the list inside is rewritten when a price lands, and replayed the rise each time (review, 2026-11-09) */
.zl-page .zl-empty:not(.zl-pending),.zl-page .zl-sources:not([hidden]){animation:zl-text-in .32s ease-out both}
@media(prefers-reduced-motion:reduce){.zl-soon:not(:empty),.zl-page .zl-empty,.zl-page .zl-sources{animation:none!important}}