/* markets-calm.css: the calm overrides for Markets, the market page, Live now and the Watchlist (UI clean pass,
   2026-11-11, package C). Linked from index.html AFTER every inline stylesheet, so a rule here wins over the board and
   market-page rules that live inline there. Package A created this file empty so the link resolves; package C owns
   its contents. Use the roles in zena-tokens.css only (no hexes), scope to html[data-tier=free], and read the view
   from html[data-view="simple"|"advanced"] and the place from html[data-za-mode] / html[data-za-sub].

   Surface rules (PLAN 4.5): a card is --z-raised on --z-surface, 12px radius, no border; no card inside a card; an input,
   chip or quiet button is --z-raised-2; one --z-accent-fill button per screen. Motion is by position only (test_motion):
   nothing here fades. */

/* ───────────────────────── 0. THE CHIP ROW ─────────────────────────
   All, Live, Saved, then the topics, in one scrolling row (market-context.js writes Live and Saved inside .zc-topics on
   the public terminal). The shell's chip rule already styles them there; these are the two things it keyed on the old
   place: the live dot, and News not showing the two Markets filters. */
html[data-tier=free] #pnlBoard .zc-category-bar>.zc-topics>.zc-live-now>i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--z-live)}
html:root[data-tier=free][data-za-mode=news] body #pnlBoard>.zc-board-header .zc-category-bar>.zc-topics>button:is(.zc-live-now,.zc-watchlist){display:none!important}
html[data-tier=free] #pnlBoard .zc-category-bar>.zc-topics>.zc-watchlist>svg{flex:none;width:16px;height:16px}

/* ───────────────────────── 1. MARKETS: the list (PLAN 2.4) ─────────────────────────
   A topic is a title and "View all" over one raised surface of rows. The outer box and its coloured top rule are gone
   (box in box); the topic's hue stays on the dot beside its name, where the token file allows it. */
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zn-market-directory{gap:var(--z-space-section,24px)!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zn-topic-section{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;padding:0!important;min-width:0}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zn-topic-section>header{border:0!important;padding:0 4px 8px!important;margin:0!important;min-height:44px;align-items:center}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zn-topic-section>header>button{min-height:44px;padding:0 4px;color:var(--z-accent)!important;background:none!important;border:0!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-results-heading{border:0!important;padding:0 4px 8px!important}

/* The row (rowEventHTML in market-context.js): mark, title over outcome and price, the line at the right. */
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row{display:grid!important;grid-template-columns:28px minmax(0,1fr) 64px;grid-template-areas:"mark main line";align-items:center;column-gap:12px;min-height:64px;padding:10px 16px!important;margin:0!important;border:0!important;border-radius:0!important;background:var(--z-raised)!important;box-shadow:none!important;cursor:pointer;position:relative;transform:none!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row:has(>.zc-bookmark){grid-template-columns:28px minmax(0,1fr) 64px 44px;grid-template-areas:"mark main line save"}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row+.zc-event.zc-calm-row::before{content:"";position:absolute;left:56px;right:16px;top:0;height:1px;background:var(--z-hairline)}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) :is(header,.zc-results-heading)+.zc-event.zc-calm-row,:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row:first-child{border-top-left-radius:var(--z-radius-card,12px)!important;border-top-right-radius:var(--z-radius-card,12px)!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row:last-child,:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row:not(:has(+.zc-calm-row)){border-bottom-left-radius:var(--z-radius-card,12px)!important;border-bottom-right-radius:var(--z-radius-card,12px)!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row:is(:hover,:focus-visible){background:var(--z-raised-2)!important;box-shadow:none!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row:focus-visible{outline:2px solid var(--z-accent);outline-offset:-2px}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-head-venue{grid-area:mark;align-self:center;padding:0}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-calm-main{grid-area:main;display:grid;gap:2px;min-width:0}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-title{font:var(--zt-card,600 15px/20px var(--sans,system-ui));font-weight:600;color:var(--z-title);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-quote{display:flex;align-items:baseline;gap:8px;min-width:0;font:var(--zt-small,400 13px/18px var(--sans,system-ui));color:var(--z-body)}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-leg{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-quote>b{flex:none;font-weight:600;font-variant-numeric:tabular-nums;color:var(--z-title)}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-quote>.z-chg{flex:none;font-variant-numeric:tabular-nums}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-quote>.z-chg:empty{display:none}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-quote>.z-chg>span{display:none}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-row-trace{grid-area:line!important;display:block!important;width:64px!important;min-width:0!important;height:32px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;pointer-events:none;overflow:hidden}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-row-trace>svg{display:block;width:64px!important;height:32px!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-row-trace>:not(svg){display:none!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-bookmark{grid-area:save;justify-self:end;width:44px;height:44px;min-width:44px;display:grid;place-items:center;border:0!important;background:none!important;border-radius:var(--z-radius-ctl,10px)}
@media(min-width:701px){
  :root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row{grid-template-columns:28px minmax(0,1fr) 96px;padding:12px 20px!important}
  :root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-row-trace,:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row>.zc-row-trace>svg{width:96px!important}
}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-row .zc-calm-quote>.z-chg>b::after{content:none!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row[data-category][data-zc-group],:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-event.zc-calm-row[data-category][data-zc-group]:is(:hover,:focus-visible,:focus-within){box-shadow:none!important;border:0!important}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-more{display:block;width:100%;min-height:48px;margin:12px 0 0;border:0;border-radius:var(--z-radius-ctl,10px);background:var(--z-raised-2);color:var(--z-title);font:500 14px/20px var(--sans,system-ui);cursor:pointer}
:root[data-tier=free] #main .zc-overview:not(.zn-news-mode) .zc-calm-more:focus-visible{outline:2px solid var(--z-accent);outline-offset:2px}

/* The Saved list's empty state (PLAN 2.11): words and one quiet action on the ground, no outline box. */
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-empty{display:grid;justify-items:start;gap:8px;padding:24px 4px;border:0!important;border-radius:0;background:none!important}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-empty>p{max-width:36ch;color:var(--z-title)}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-empty>button{min-height:44px;padding:0 16px;border-radius:var(--z-radius-ctl,10px);background:var(--z-raised-2);color:var(--z-title);font:500 14px/20px var(--sans,system-ui)}

/* A saved market (review: it kept the outlined card with a coloured top rule, a 21px title target and a 40px "Open →").
   One raised surface, no border and no rule; the topic's hue stays on the dot beside its heading. On Simple the whole card
   opens the market (its title button is laid over it, so a keyboard and a screen reader still meet a named button) and
   Remove is one quiet 44px button in its corner; Advanced keeps Remove and Open as its foot, 44px tall. */
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-card{position:relative;padding:16px;border:0!important;border-radius:var(--z-radius-card,12px)!important;background:var(--z-raised)!important;box-shadow:none!important}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-card:hover{background:var(--z-raised-2)!important}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-title{min-height:44px;display:flex;align-items:center;padding-right:96px;text-decoration:none!important}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-title:focus-visible{outline:0}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-card:has(.zc-watch-title:focus-visible){outline:2px solid var(--z-accent);outline-offset:2px}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-actions{margin:0;padding:0;border:0}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-actions>button{min-width:44px;min-height:44px;text-decoration:none!important}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-actions>button[data-zc-save]{position:absolute;top:16px;right:12px;z-index:2;padding:0 12px;border-radius:var(--z-radius-ctl,10px);background:var(--z-raised-2);color:var(--z-title);font:500 13px/18px var(--sans,system-ui)}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-actions>button[data-zc-save]:focus-visible{outline:2px solid var(--z-accent);outline-offset:2px}
:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-card:hover .zc-watch-actions>button[data-zc-save]{background:var(--z-surface)}
/* past a phone the list stands on the board's raised panel, so the card is the next surface up */
@media(min-width:701px){
  :root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-card,:root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-card:hover{background:var(--z-raised-2)!important}
  :root[data-tier=free] #main .zc-overview .zc-watch .zc-watch-actions>button:is([data-zc-save],[data-zc-id]){background:var(--z-raised)}
}
:root[data-tier=free][data-view=simple] #main .zc-overview .zc-watch .zc-watch-title::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--z-radius-card,12px)}
:root[data-tier=free][data-view=simple] #main .zc-overview .zc-watch .zc-watch-actions>button[data-zc-id]{display:none}
:root[data-tier=free][data-view=simple] #main .zc-overview .zc-watch .zc-watch-actions{display:contents}
:root[data-tier=free][data-view=advanced] #main .zc-overview .zc-watch .zc-watch-actions{display:flex;justify-content:flex-end;margin-top:4px}
:root[data-tier=free][data-view=advanced] #main .zc-overview .zc-watch .zc-watch-actions>button[data-zc-id]{padding:0 12px;border-radius:var(--z-radius-ctl,10px);background:var(--z-raised-2);color:var(--z-title);font:500 13px/18px var(--sans,system-ui);position:relative;z-index:2}

/* Advanced keeps the card's own controls (review: on a phone they stood 28 to 40px). Where a finger meets them, each is 44px. */
@media(max-width:700px),(pointer:coarse){
  /* the card's Save only: its Ask glyph is not drawn on the public terminal (ask-entry.css: a dense card opens its market,
     whose page carries the one Ask Zena). Listing .z-ask here gave it display back on phones only, a sparkle-only button on
     every Advanced card at 390 and none at 1440 (integration, 2026-11-11). */
  :root[data-tier=free][data-view=advanced] #main .zc-overview:not(.zn-news-mode) .zc-event .zc-event-heading>.zc-bookmark{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  :root[data-tier=free][data-view=advanced] #main .zc-overview:not(.zn-news-mode) .zc-event .zc-event-contracts>button{min-height:44px}
  :root[data-tier=free][data-view=advanced] #main .zc-overview:not(.zn-news-mode) .zc-event .zc-event-footer>button{min-height:44px}
  :root[data-tier=free][data-view=advanced] #main .zc-overview:not(.zn-news-mode) .zc-event .zc-volume-metric{display:inline-flex;align-items:center;min-height:44px}
  html:root[data-tier=free][data-view=advanced] body #main.zc-market-page .insbook table.book tr.bkclk>td{height:44px;box-sizing:border-box}
  html[data-tier=free][data-view=advanced] .zl-page .zl-tile .zl-tile-head{min-height:44px;align-items:center}
  html[data-tier=free][data-view=advanced] .zl-page .zl-tile .zl-mkt-foot>:is(.zl-mkt-go,.z-ask){min-width:44px;min-height:44px}
}

/* ───────────────────────── 2. THE MARKET PAGE (PLAN 2.5) ─────────────────────────
   One nav row: the back arrow at its start, Save and the Advanced switch at its end. The second row (Save, the Ask
   glyph) and the switch's own row are lifted into it; Ask Zena is said once, in words, under the summary (.zmc-ask). */
html:root[data-tier=free] body #main.zc-market-page>.zc-market-nav{position:absolute;top:2px;right:145px;gap:8px;z-index:31;width:auto;min-height:44px;height:44px;margin:0;padding:0;border:0!important;background:none!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zc-market-nav>.z-ask.z-ask{display:none!important}
html:root[data-tier=free] body #main.zc-market-page>.zc-market-nav>div:first-child{margin:0;padding:0;gap:0}
html:root[data-tier=free] body #main.zc-market-page>.zc-market-nav .zc-bookmark{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center;border:0!important;border-radius:var(--z-radius-ctl,10px);background:none!important}
html:root[data-tier=free] body #main.zc-market-page>.zc-market-nav .zc-bookmark>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:root[data-tier=free] body #main.zc-market-page>.zc-market-nav .zc-bookmark:is(:hover,:focus-visible){background:var(--z-raised-2)!important}
html:root[data-tier=free] body #main.zc-market-page>.zc-market-nav .zc-bookmark[aria-pressed=true]{color:var(--z-accent)}
html[data-tier=free] body #main.zc-market-page>.zsh-viewbar{position:absolute;top:2px;right:12px;z-index:31;min-height:44px;padding:0;margin:0}
html[data-tier=free] body #main.zc-market-page>.zsh-viewbar>[data-za-viewbar-note]:empty{display:none}

/* Two or more open markets on a phone (review, 2026-11-11): the strip that moves between them takes its own row under
   the back row. In the back row it was drawn across Save and the Advanced switch from the second market on. */
@media(max-width:700px){
  html[data-tier=free] body #main.zc-market-page>.ztabs.zc-free-tabs:has(.ztabwrap>:nth-child(2)){grid-template-rows:48px 44px!important;height:auto!important;row-gap:0;padding-bottom:4px}
  html[data-tier=free] body #main.zc-market-page>.ztabs.zc-free-tabs:has(.ztabwrap>:nth-child(2))>.ztlist{grid-row:2;grid-column:1/-1;height:44px;min-width:0}
  html[data-tier=free] body #main.zc-market-page>.ztabs.zc-free-tabs:has(.ztabwrap>:nth-child(2))>.zc-board-return{grid-row:1}
  /* two fit side by side, so the row shows there IS another market; quiet surfaces, the open one on the soft accent */
  html[data-tier=free] body #main.zc-market-page>.ztabs.zc-free-tabs:has(.ztabwrap>:nth-child(2)) .ztabwrap{gap:8px;align-items:center}
  html:root[data-tier=free] body #main#main.zc-market-page>.ztabs.zc-free-tabs:has(.ztabwrap>:nth-child(2)) .zc-market-tab{flex:0 0 calc(50% - 4px)!important;min-width:0!important;max-width:none!important;height:40px;border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised)!important;box-shadow:none!important}
  html:root[data-tier=free] body #main#main.zc-market-page>.ztabs.zc-free-tabs:has(.ztabwrap>:nth-child(2)) .zc-market-tab.is-active{background:var(--z-accent-soft)!important}
}

/* The summary: title, outcome, the two figures on ONE raised surface, what the price means, the timing once. */
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header{border-bottom:0!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zmksub{border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised-2)!important;box-shadow:none!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zmkrow>:is(.zmk-last,.zq-guide){border:0!important;background:var(--z-raised)!important;box-shadow:none!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zmkrow>.zmk-last{border-radius:var(--z-radius-card,12px) 0 0 var(--z-radius-card,12px)!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zmkrow>.zq-guide{border-radius:0 var(--z-radius-card,12px) var(--z-radius-card,12px) 0!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zmkrow>.zmk-context{border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised-2)!important;box-shadow:none!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header:has(>.zmc-sum>.zmc-when) .zmk-deadline{display:none!important}
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zc-market-context:has(.zc-start-time){display:none!important}
/* the same hour stood for a second as "Game starts Nov 15, 1:00 PM ET" before the pre-game card replaced it and was hidden: a 51px row that came and went under the summary (review: CLS) */
html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header:has(>.zmc-sum>.zmc-when)>.zc-market-context:has(.zc-game-time):not(:has(.zc-brief-score,.zc-play-stage)){display:none!important}
.zmc-sum{grid-column:2/-2;display:grid;justify-items:start;gap:4px;min-width:0;margin-top:10px}
.zmc-sum:empty{display:none}
.zmc-sum>.zmc-means{margin:0;max-width:64ch;font:var(--zt-body,400 15px/23px var(--sans,system-ui));color:var(--z-title)}
.zmc-sum>.zmc-means[data-wait]{min-height:46px;width:100%}
@media(max-width:600px){.zmc-sum>.zmc-means[data-wait]{min-height:69px}}
.zmc-sum>.zmc-when{margin:0;font:var(--zt-small,400 13px/18px var(--sans,system-ui));color:var(--z-body)}
.zmc-sum>.zmc-when>b{font-weight:600;color:var(--z-title)}
.zmc-sum>.zmc-when>time::before{content:"("}
.zmc-sum>.zmc-when>time::after{content:")"}
.zmc-sum>.zmc-ask{min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--z-accent);font:500 14px/20px var(--sans,system-ui);cursor:pointer;text-align:left}
.zmc-sum>.zmc-ask:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:3px}
.zmc-sum>.zmc-ask:focus-visible{outline:2px solid var(--z-accent);outline-offset:2px;border-radius:4px}

/* Panels are raised surfaces, not outlined boxes (PLAN 4.5 rule 1), at every width. */
html:root[data-tier=free] body #main.zc-market-page .lyrow>.lywrap>.pnl.pane{border:0!important;border-radius:var(--z-radius-card,12px)!important;background:var(--z-raised)!important;box-shadow:none!important}
html:root[data-tier=free] body #main.zc-market-page .lyrow>.lywrap>.pnl.pane>.pane-h{border:0!important;background:none!important;box-shadow:none!important}
html:root[data-tier=free] body #main.zc-market-page .lyrow>.lywrap>.pnl.pane::before,html:root[data-tier=free] body #main.zc-market-page .lyrow>.lywrap>.pnl.pane::after{content:none!important}
html:root[data-tier=free] body #main.zc-market-page .tkpv .tkpvs{border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised-2)!important;box-shadow:none!important}

.zmc-tabs,.zmc-bar{display:none}
@media(max-width:600px){
  html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zmkart.zmkbig.zc-clean-header{grid-template-areas:"art q" "art sub" "row row" "sum sum" "briefing briefing"!important}
  html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header>.zmc-sum{grid-area:sum;grid-column:1/-1}
}
@media(max-width:700px){
  /* the Context button is the Context tab under the chart; three of the four "?" tips and the expand icons go */
  html:root[data-tier=free] body #main#main.zc-market-page:has(.zmc-tabs)>.zmkband.zc-clean-header>.zmkrow>.zmk-context{display:none!important}
  html:root[data-tier=free] body #main.zc-market-page .lywrap>.pnl.pane>.pane-h :is(.lrnq,.pxpand){display:none!important}
  html:root[data-tier=free] body #main#main.zc-market-page .lyrow>.lywrap>.zmc-tabs{grid-area:tabs;display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--z-sunk)}
  .zmc-tabs>button{flex:1 1 0;min-width:0;min-height:44px;padding:0 8px;border:0;border-radius:999px;background:none;color:var(--z-title);font:500 14px/20px var(--sans,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .zmc-tabs>button[aria-pressed=true]{background:var(--z-accent-soft)}
  .zmc-tabs>button:focus-visible{outline:2px solid var(--z-accent);outline-offset:-2px}
  html[data-view=simple] .zmc-tabs>[data-zmc-tab=depth]{display:none}
  html:root[data-tier=free][data-view=simple] body #main#main.zc-market-page .lyrow>.lywrap{grid-template-areas:"a" "tabs" "c"!important;grid-template-rows:minmax(320px,auto) auto auto!important}
  html:root[data-tier=free][data-view=advanced] body #main#main.zc-market-page .lyrow>.lywrap{grid-template-areas:"a" "tabs" "c"!important;grid-template-rows:420px auto auto!important}
  html:root[data-tier=free][data-view=advanced][data-zmc-tab=trade] body #main#main.zc-market-page .lyrow>.lywrap>.pnl.pane:is([data-pane=depth],[data-pane=pln]){display:none!important}
  html:root[data-tier=free][data-view=advanced][data-zmc-tab=depth] body #main#main.zc-market-page .lyrow>.lywrap{grid-template-areas:"a" "tabs" "b" "d"!important;grid-template-rows:420px auto auto minmax(240px,auto)!important}
  html:root[data-tier=free][data-view=advanced][data-zmc-tab=depth] body #main#main.zc-market-page .lyrow>.lywrap>.pnl.pane[data-pane=trd]{display:none!important}
  /* Yes and No, held above the tab bar; quiet buttons (the ticket's Trade button is the page's one accent fill) */
  html[data-tier=free] body #main.zc-market-page>.zmc-bar{position:fixed;left:0;right:0;bottom:var(--za-tabbar-h,0px);z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:8px var(--z-space-gutter,16px);background:var(--z-sunk)}
  html[data-tier=free] body #main.zc-market-page>.zmc-bar:empty,html.zsh-typing .zmc-bar{display:none}
  /* a toast (Saved to watchlist) stands above this bar while it is up, as it stands above the tab bar everywhere (the shell
     puts #ztoast at --za-tabbar-h + 18px): the bar is 60px, so the toast never covers Yes and No */
  html[data-tier=free]:not(.zsh-typing):has(#main.zc-market-page>.zmc-bar:not(:empty):not([data-zmc-covered])) #ztoast{bottom:calc(var(--za-tabbar-h,0px) + 72px)}
  /* while the ticket's own Yes and No are on screen the bar steps down behind the tab bar, by position (review: it was cut
     in and out by display). It is out of the tab order while away; visibility only waits for the slide to end. */
  html[data-tier=free] body #main.zc-market-page>.zmc-bar{transition:transform 180ms cubic-bezier(.2,.7,.3,1),visibility 0s}
  html[data-tier=free] body #main.zc-market-page>.zmc-bar[data-zmc-covered]{transform:translateY(calc(100% + var(--za-tabbar-h,0px)));visibility:hidden;transition:transform 180ms cubic-bezier(.4,0,1,1),visibility 0s linear 180ms}
  @media(prefers-reduced-motion:reduce){html[data-tier=free] body #main.zc-market-page>.zmc-bar,html[data-tier=free] body #main.zc-market-page>.zmc-bar[data-zmc-covered]{transition:none}}
  .zmc-bar>button{display:flex;align-items:baseline;justify-content:center;gap:8px;min-height:48px;padding:0 12px;border:0;border-radius:var(--z-radius-ctl,10px);background:var(--z-raised-2);color:var(--z-title);font:600 15px/20px var(--sans,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .zmc-bar>button>b{font-variant-numeric:tabular-nums}
  .zmc-bar>[data-zmc-buy=yes]>b{color:var(--z-up)}
  .zmc-bar>[data-zmc-buy=no]>b{color:var(--z-down)}
  .zmc-bar>button:focus-visible{outline:2px solid var(--z-accent);outline-offset:2px}
  html[data-tier=free] body #main.zc-market-page:has(>.zmc-bar:not(:empty)){padding-bottom:64px}
}

/* Chart options (calmChart / calmSheetPress in market-context.js). The button sits at the end of the Price panel's head
   on the Simple view at every width and on phones in both views; a desktop on Advanced has the controls in its row. */
.zmc-chart-opt{display:none}
html[data-tier=free] #main.zc-market-page .lywrap>.pnl.pane>.pane-h>.zmc-chart-opt{margin-left:auto;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:0;border-radius:var(--z-radius-ctl,10px);background:var(--z-raised-2);color:var(--z-title);font:500 13px/18px var(--sans,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-tier=free] #main.zc-market-page .lywrap>.pnl.pane>.pane-h>.zmc-chart-opt>svg{width:16px;height:16px;flex:none}
html[data-tier=free][data-view=simple] #main.zc-market-page .lywrap>.pnl.pane>.pane-h>.zmc-chart-opt{display:inline-flex}
html[data-tier=free] #main.zc-market-page .zmc-chart-opt:focus-visible{outline:2px solid var(--z-accent);outline-offset:2px}
/* Simple, every width (review: 19 controls above the fold on a crypto strike). What the chart shows (the contract, the
   underlying, or both) is a choice in Chart options ("Show", calmSheetHTML), so the three tabs leave the page; the range
   chips are named for their range (the chip's own data-px: 1D, 5D, 1M) instead of the candle width a line chart does not
   have ("15m", "4h"), and the chosen one stands on the soft accent. Advanced keeps the tabs and the candle names. */
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .zc-comparison>.zc-comparison-tabs{display:none!important}
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .zc-comparison.zc-integrated-tools .pxctl-snap{top:0!important}
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .pxchart .pxctl .pxtf>.tg[data-px]:not([data-px=ALL]){font-size:0!important}
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .pxchart .pxctl .pxtf>.tg[data-px]:not([data-px=ALL])::before{content:attr(data-px);font:500 13px/18px var(--sans,system-ui);letter-spacing:0}
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .pxchart .pxctl .pxtf>.tg[data-px]{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-width:36px;padding:4px 10px;border:0!important;border-radius:999px;box-shadow:none!important;color:var(--z-title);font:500 13px/18px var(--sans,system-ui)}
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .pxchart .pxctl .pxtf>.tg[data-px].on{background:var(--z-accent-soft)!important;font-weight:600}
/* one range is no choice: the row goes, and the plot starts where it stood */
html:root[data-tier=free][data-view=simple] body #main.zc-market-page .pxchart .pxctl .pxtf:not(:has(>.tg[data-px]~.tg[data-px])){display:none!important}
dialog.zmc-sheet{box-sizing:border-box;width:min(420px,calc(100vw - 32px));max-width:none;max-height:min(80vh,560px);margin:auto;padding:16px;border:0;border-radius:var(--z-radius-card,12px);background:var(--z-raised);color:var(--z-title);box-shadow:var(--z-shadow-pop,0 8px 28px rgba(0,0,0,.32));font:var(--zt-small,400 13px/18px var(--sans,system-ui));overflow:auto}
dialog.zmc-sheet::backdrop{background:color-mix(in srgb,var(--z-sunk,#171614) 62%,transparent)}
.zmc-sheet form{display:grid;gap:16px;margin:0}
.zmc-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zmc-sheet h2{margin:0;font:var(--zt-section,600 18px/24px var(--sans,system-ui));color:var(--z-title)}
.zmc-sheet h3{margin:0 0 8px;font:500 13px/18px var(--sans,system-ui);color:var(--z-body)}
.zmc-sheet-group>div{display:flex;flex-wrap:wrap;gap:8px}
.zmc-sheet button{min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--z-raised-2);color:var(--z-title);font:500 14px/20px var(--sans,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
.zmc-sheet button[aria-pressed=true]{background:var(--z-accent-soft);box-shadow:inset 0 0 0 1px var(--z-accent)}
.zmc-sheet button:focus-visible{outline:2px solid var(--z-accent);outline-offset:2px}
.zmc-sheet .zmc-sheet-done{border-radius:var(--z-radius-ctl,10px)}
@media(max-width:700px){
  dialog.zmc-sheet{width:100%;max-height:80vh;margin:auto 0 0;padding:16px var(--z-space-gutter,16px) calc(16px + env(safe-area-inset-bottom,0px));border-radius:var(--z-radius-card,12px) var(--z-radius-card,12px) 0 0}
  html[data-tier=free] #main.zc-market-page .lywrap>.pnl.pane>.pane-h>.zmc-chart-opt{display:inline-flex;min-height:44px}
  /* the phone's control row is the range chips; type, axis, markers, studies and tools are in the sheet */
  html:root[data-tier=free] body #main.zc-market-page .pxchart :is(.pxctl .pxset,.pxctl .zc-chart-tools,.pxctl .zc-context-tools,.pxctl [data-pxind],.pxctl .pxtools,.pxaxbtn){display:none!important}
  .zmc-bar>button{align-items:center}
  /* the phone's row holds only the ranges now, so every range the chart offers fits (a container rule hid 5D and 1M to make room for the tools) */
  html:root[data-tier=free] body #main#main.zc-market-page .zc-comparison .pxctl-snap .pxtf>.tg[data-px]{display:inline-flex!important}
  html:root[data-tier=free][data-view=simple] body #main#main.zc-market-page .pxchart .pxctl .pxtf>.tg[data-px]{min-width:44px;min-height:44px}
  html:root[data-tier=free][data-view=simple] body #main#main.zc-market-page .zc-comparison.zc-integrated-tools:not(:has(.zc-chart-series:not([hidden]) .pxtf>.tg[data-px]~.tg[data-px])) .pxctl-snap{display:none!important}
  html:root[data-tier=free][data-view=simple] body #main#main.zc-market-page .zc-comparison.zc-integrated-tools:not(:has(.zc-chart-series:not([hidden]) .pxtf>.tg[data-px]~.tg[data-px])) .zc-comparison-plots{padding-top:0!important}
}

/* Context (the briefing dialog, market-briefing.js): one raised sheet; its groups are raised-2 surfaces, never outlined
   boxes inside an outlined box (PLAN 4.5 rules 1 and 4). */
html[data-tier=free] dialog.zmb-reader{border:0!important;border-radius:var(--z-radius-card,12px)!important;background:var(--z-raised)!important;box-shadow:var(--z-shadow-pop,0 8px 28px rgba(0,0,0,.32))}
html[data-tier=free] dialog.zmb-reader .zmb-venue-link{display:inline-flex;align-items:center;min-height:44px}
html[data-tier=free] dialog.zmb-reader .zmb-sources>summary{min-height:44px;border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised-2)!important}
@media(pointer:coarse){html[data-tier=free] dialog.zmb-reader .zmb-help{display:inline-block;padding:14px;margin:-14px}}
html[data-tier=free] dialog.zmb-reader .zmb-dismiss{width:44px;height:44px;border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised-2)!important}
html[data-tier=free] dialog.zmb-reader :is(.zmb-stand,.zmb-columns section,.zmb-columns article,.zmb-card){border:0!important;border-radius:var(--z-radius-card,12px)!important;background:var(--z-raised-2)!important;box-shadow:none!important}

@media(max-width:700px){
  /* touch targets: the range chips, Save and the rules link are 44px tall where a finger meets them */
  html:root[data-tier=free] body #main#main.zc-market-page>.zc-market-nav .zc-bookmark.zc-bookmark{width:44px!important;min-width:44px!important;height:44px!important}
  html:root[data-tier=free] body #main.zc-market-page .zc-comparison-tabs button{min-height:44px}
  html:root[data-tier=free] body #main.zc-market-page .pxchart .pxctl .pxtf>.tg{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  /* In flow, but POSITIONED: its touch slop (phone-touch.css) is an absolute ::after and must hang from the button. Left
     static, the slop sized itself against the ticket and took every tap on Yes, No and the Trade link. The button is
     44px tall here, so the slop is the button's own box. */
  html:root[data-tier=free] body #main.zc-market-page .tkpv .zc-rules-button{position:relative!important;inset:auto!important;display:inline-flex;align-items:center;min-height:44px;margin-top:4px}
  html:root[data-tier=free] body #main.zc-market-page .tkpv .zc-rules-button::after{inset:0;width:auto;height:auto;transform:none}
  html:root[data-tier=free] body #main.zc-market-page .lywrap>.pnl.pane[data-pane=gp]>.pane-h{min-height:52px;padding-right:8px}
  /* Advanced on a phone: with the tools in the sheet, its control row is the one row of range chips the Simple view has */
  html:root[data-tier=free][data-view=advanced] body #main#main.zc-market-page .zc-comparison.zc-integrated-tools .pxctl-snap{height:44px;min-height:44px;max-height:44px;padding-block:0;row-gap:0;align-content:center}
  html:root[data-tier=free][data-view=advanced] body #main#main.zc-market-page .zc-comparison.zc-integrated-tools .zc-comparison-plots{padding-top:44px}
  html:root[data-tier=free] body #main#main.zc-market-page>.zmkband.zc-clean-header{padding-bottom:4px!important}
}

/* ───────────────────────── 3. LIVE (Live now, PLAN 2.10) ─────────────────────────
   A game is a raised card: league and clock, the two sides and their scores, the last play on one line, the two prices.
   On the Simple view the whole card is ONE tap target (its Open market button is laid over it, so a keyboard and a screen
   reader still meet a named button); the Ask glyph and the venue row are on the market page. Advanced keeps the card's
   own controls. Data & sources is the page's foot link (live-now.js). */
html[data-tier=free] .zl-page .zl-tile{border:0!important;border-radius:var(--z-radius-card,12px)!important;background:var(--z-raised)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-tier=free] .zl-page .zl-tile:is(:hover,:focus-within){background:var(--z-raised)!important;box-shadow:none!important}
html[data-tier=free] .zl-page .zl-tile .zl-name>b{border:0!important;background:var(--z-raised-2)!important}
html[data-tier=free] .zl-page .zl-tile .zl-mq-b{border:0!important;border-radius:var(--z-radius-ctl,10px)!important;background:var(--z-raised-2)!important;min-height:44px}
html[data-tier=free] .zl-page .zl-foot{display:flex;justify-content:flex-start;margin-top:var(--z-space-section,24px)}
html[data-tier=free] .zl-page .zl-foot>.zl-sources-toggle{min-height:44px;padding:0;border:0!important;background:none!important;color:var(--z-accent);font:500 14px/20px var(--sans,system-ui)}
html[data-tier=free] .zl-page .zl-foot>.zl-sources-toggle:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:3px}
/* the league row is the topic row's kind of chip: a word on the ground, the chosen one on the soft accent, 44px each way */
html[data-tier=free] .zl-page .zl-leagues{gap:4px}
html[data-tier=free] .zl-page .zl-leagues>button{box-sizing:border-box;min-width:44px;min-height:44px;padding:0 14px;border:0!important;border-radius:999px;background:none;color:var(--z-title)!important;font:500 14px/20px var(--sans,system-ui)}
html[data-tier=free] .zl-page .zl-leagues>button:hover{background:var(--z-raised)}
html[data-tier=free] .zl-page .zl-leagues>button[aria-pressed=true]{background:var(--z-accent-soft);font-weight:600}
html[data-tier=free] .zl-page .zl-leagues>button:focus-visible{outline:2px solid var(--z-accent);outline-offset:-2px}
/* While the sources are read (data-zl-wait, live-now.js) what follows the wait is not shown until it stands where it
   will stay: nothing is drawn and then moved when the league row and the list arrive (review: Live now CLS). No fade:
   it is there or it is not. On a phone the league row is its own line under the title, and no line at all when empty. */
html[data-tier=free] .zl-page[data-zl-wait] :is(.zl-soon,.zl-foot){visibility:hidden}
@media(max-width:700px){
  html[data-tier=free] .zl-page .zl-tools{flex:1 0 100%;justify-content:flex-start}
  html[data-tier=free] .zl-page .zl-tools:has(>.zl-leagues:empty){display:none}
}
html[data-tier=free][data-view=simple] .zl-page .zl-tile :is(.z-ask,.zl-venues){display:none!important}
html[data-tier=free][data-view=simple] .zl-page .zl-tile .zl-feed>li{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html[data-tier=free][data-view=simple] .zl-page .zl-tile :is(.zl-mkt,.zl-mkt-foot){position:static}
html[data-tier=free][data-view=simple] .zl-page .zl-tile .zl-mkt-foot{min-height:0;height:0;margin:0;padding:0}
/* with one line of play and no foot row the card holds no blank band (review: 80-90px of empty card on a phone): the feed
   keeps ONE line's height (so a play arriving still never moves a card) and a card no venue lists ends at its last line */
html[data-tier=free][data-view=simple] .zl-page .zl-tile:not(.zl-open)>.zl-feed{height:calc(1.4em + 4px)}
html[data-tier=free][data-view=simple] .zl-page .zl-tile .zl-mkt.zl-mkt-none{min-height:0!important;padding-top:0}
/* the card is one target: its head no longer takes the tap for itself (a 26px strip that opened the play-by-play instead) */
html[data-tier=free][data-view=simple] .zl-page .zl-tile .zl-tile-head{pointer-events:none}
html[data-tier=free][data-view=simple] .zl-page .zl-tile .zl-mkt-go{position:absolute!important;inset:0;z-index:2;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0!important;border-radius:var(--z-radius-card,12px);background:none!important;color:transparent!important;font-size:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-tier=free][data-view=simple] .zl-page .zl-tile .zl-mkt-go:focus-visible{outline:2px solid var(--z-accent);outline-offset:-2px}
html[data-tier=free][data-view=simple] .zl-page .zl-tile:has(.zl-mkt-go:hover){background:var(--z-raised-2)!important}