/* Ask Zena entries (ask-entry.js). Ask v2, Palash 2026-11-10: "just have like a very clean little arrow thing ... say Ask
   Zena like once in the biggest key card, and then for everything else, just have like a little arrow where you can click
   on. So like a user can pattern match." One glyph: Zena's star and a north-east arrow in a 40 by 28 hairline box. The
   News lead key card is the one labelled instance (the same box, 32px high, with the words "Ask Zena" between the star
   and the arrow). Tokens only: the page's surface, the strong hairline at rest and the title ink on hover, one ink for
   the star, the words and the arrow (no purple: purple is the Zena estimate alone), 13px type. It rises like everything
   clickable (--z-lift, --z-lift-shadow, --z-lift-ease) and its arrow moves 2px up and right; pointer-less screens and
   reduced motion keep the edge, not the move (zena-tokens.css). On touch the box keeps its size inside a 44 by 44 hit
   area. The class is doubled so a surface's own button rule (".zc-market-nav button") never restyles it. */
.z-ask.z-ask{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;box-sizing:border-box;width:40px;height:28px;min-height:28px;margin:0;padding:0;border:1px solid var(--z-hairline-strong,#3a4452);border-radius:6px;background:var(--z-surface,#080b10);color:var(--z-title,#f4f6fa);font:500 13px/1 var(--sans,system-ui,sans-serif);letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;cursor:pointer;transition:var(--z-lift-ease,transform .16s ease,box-shadow .16s ease,border-color .16s ease);-webkit-tap-highlight-color:transparent}
.z-ask.z-ask>svg{display:block;flex:none;pointer-events:none}
.z-ask.z-ask>.z-ask-star{width:12px;height:12px;fill:currentColor;stroke:none}
.z-ask.z-ask>.z-ask-arrow{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--zm-quick,150ms) var(--zm-enter,cubic-bezier(.05,.39,.42,.94))}
.z-ask.z-ask>.z-ask-label{color:var(--z-title,#f4f6fa)}
.z-ask.z-ask.z-ask-lead{width:auto;height:32px;min-height:32px;gap:7px;padding:0 11px 0 10px}
.z-ask.z-ask:is(:hover,:focus-visible),:is(.zw-continue-cell,.zc-event,.zl-mkt):focus-within .z-ask.z-ask{border-color:var(--z-title,#f4f6fa)}
.z-ask.z-ask:is(:hover,:focus-visible){transform:var(--z-lift,translateY(-3px));box-shadow:var(--z-lift-shadow,0 10px 24px -12px rgba(0,0,0,.7))}
.z-ask.z-ask:is(:hover,:focus-visible)>.z-ask-arrow{transform:translate(2px,-2px)}
.z-ask.z-ask:focus-visible{outline:2px solid var(--z-title,#f4f6fa);outline-offset:2px}
.z-ask.z-ask:active{transform:scale(var(--scale-press,.96))}
@media(prefers-reduced-motion:reduce){.z-ask.z-ask:is(:hover,:focus-visible)>.z-ask-arrow{transform:none}}
@media(pointer:coarse){.z-ask.z-ask::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}}
/* a glyph that only marks its card (the whole card is the button): it takes no pointer of its own */
span.z-ask.z-ask{pointer-events:none}

/* The corner button is retired wherever this sheet is linked (the terminal): Ask is on the cards themselves. */
#zenaVisualLauncher{display:none!important}
.zv-guide:not([data-surface=landing]){bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--zv-visible-bottom,0px));max-height:min(790px,calc(var(--zv-visible-height,100dvh) - 32px - env(safe-area-inset-bottom,0px)))}
@media(max-width:700px){.zv-guide:not([data-surface=landing]){bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--zv-visible-bottom,0px));max-height:calc(var(--zv-visible-height,100dvh) - 16px - env(safe-area-inset-bottom,0px))}}

/* The News lead key card, the one labelled instance: at the card's top right, on the kicker's line, centred on it, so it
   adds no height to the card and never sits over the headline. A header drawn without a kicker keeps its width clear. */
html[data-news-view] .zw-page[data-news-keycard] .zw-focus>.zw-story-header{position:relative}
html[data-news-view] .zw-page[data-news-keycard] .zw-story-header>.z-ask{position:absolute;top:-8px;right:0;z-index:1}
html[data-news-view] .zw-page[data-news-keycard] .zw-story-header:not(:has(.zw-story-kicker))>.zw-story-copy>h2{padding-right:128px}

/* Continue reading: the glyph at the tile's top right, on the headline's first line; the headline keeps clear of it. */
.zw-continue-cell{position:relative;display:flex;flex-direction:column;min-width:0}
.zw-continue-cell>.zw-continue-item{align-self:stretch;flex:1}
.zw-continue-cell>.z-ask{position:absolute;top:12px;right:12px;z-index:1}
.zw-continue-cell>.zw-continue-item>strong{padding-right:48px}

/* Live markets cards: at the end of the title row, right of the bookmark. The foot keeps What's happening and outcomes. */
:root .zc-overview .zc-event-heading>.z-ask.z-ask{grid-column:5;grid-row:1;align-self:start;justify-self:end;margin:0}
:root .zc-overview .zc-event-heading:has(>.z-ask){grid-template-columns:34px minmax(0,1fr) auto 28px 40px}

/* The market view's header row: right of the Start here pill. */
.zc-market-nav .z-ask.z-ask{align-self:center;flex:none;margin-left:8px}
.zc-market-nav .z-ask.z-ask:hover{text-decoration:none}

/* Live now games: at the right of the market's foot, before Open market. */
.zl-mkt-foot>.z-ask{margin:0 0 0 auto}
.zl-mkt-foot>.z-ask+*{margin-left:8px}

/* The search palette: the glyph is the field's Ask button, and the Ask row's mark. */
.zn-query-row .z-ask.z-ask{margin:0 4px}
.zn-search-art>.z-ask-star{display:block;width:18px;height:18px;margin:auto;fill:var(--z-title,#f4f6fa)}
