/* START HERE, THE AGENT (ask-path.js; Ask v2, 2026-11-10). Palash: "instead of saying what happened, what it moves, and
   what to trade, just have a Zena button saying start here. And when it opens up, I can open up and talk to it. And when
   I talk to it, then it can dynamically point me to specific things that I exactly want ... But it should be really,
   really cool." One pill, one compact panel, one way of pointing at the real page. Tokens only (zena-tokens.css): one
   ink (--z-title) on the page's ground, hairlines, a 12px floor. Motion is position and scale, never alpha; the scrim is
   a constant, present from the first frame and gone in one. Durations and the spring are the motion system's tokens,
   read in ask-path.js.
   THE PILL IS ZENA (2026-11-10, Reid's demo; Palash: "make Start here more prominent, like the AI functionality"). The
   pill, and only the pill, wears Zena's own purple (--zst-zena, the estimate role's hue, so it follows the theme): the
   star is the purple mark, the edge is a purple gradient with a faint halo, and the words stay in the title ink. Open,
   it fills purple with the ground's ink. The panel, the pointer, the ring and the tag stay one ink. On the first visit
   of a session the star turns once (transform only; ask-path.js sets data-zst-cue on the root for that one run), and
   never under reduced motion. */
.zst-pill.zst-pill{--zst-zena:var(--z-estimate,#b18cff);--zst-ground:color-mix(in srgb,var(--zst-zena) 9%,var(--z-surface,#080b10));position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;box-sizing:border-box;height:36px;min-height:36px;margin:0;padding:0 16.5px 0 13.5px;border:0;border-radius:18px;background:var(--zst-ground);box-shadow:0 0 0 3px color-mix(in srgb,var(--zst-zena) 16%,transparent);color:var(--z-title,#f4f6fa);font:600 14px/1 var(--sans,system-ui,sans-serif);font-size:14px!important;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;transition:var(--z-lift-ease,transform .16s ease,box-shadow .16s ease,border-color .16s ease);-webkit-tap-highlight-color:transparent}
/* b3 (production check): THE SPEC WINS. Two things made the drawn pill smaller than this sheet says. (1) Its 13-14px
   label was 12-13px: the rows' own rules outrank it (product-ui.css `.zc-category-bar button{font-size:13px!important}`,
   12px on a phone, and the market row's `#main.zc-market-page .zc-market-nav button{font-size:12px}`), so the size is
   restated above as the one !important in this sheet. (2) Its 1.5px edge was 1px: no rule overrode it, the engine
   rounds a fractional border-width down to a whole pixel. The edge is therefore not a border: it is this ring, a
   1.5px band of the gradient masked to the pill's rim, which paints at 1.5px on every screen. */
.zst-pill.zst-pill::before{content:"";position:absolute;inset:0;box-sizing:border-box;padding:1.5px;border-radius:inherit;background:linear-gradient(115deg,var(--zst-zena),color-mix(in srgb,var(--zst-zena) 42%,var(--z-surface,#080b10)) 52%,var(--zst-zena));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.zst-star.zst-star{display:block;flex:none;width:14px;height:14px;fill:currentColor;stroke:none}
.zst-pill.zst-pill>.zst-star{width:15px;height:15px;fill:var(--zst-zena);transform-origin:50% 50%}
.zst-panel :is(.zst-icon,.zst-chips button) svg{flex:none;width:12px;height:12px}
.zst-panel .zst-send svg{width:16px;height:16px}
/* b3: ONE HOVER IN EVERY ROW. The mode row's `.zc-category-bar>button:hover{background:var(--panel2)}` (market-context.css)
   outranked the pill and swapped its ground for a flat fill on News, Live and Ask, while the market row kept it. The
   pill's hover now outranks both rows and states its own ground: it lifts, the rim turns solid purple, the halo grows. */
.zst-pill.zst-pill.zst-pill:is(:hover,:focus-visible){transform:var(--z-lift,translateY(-3px));background:var(--zst-ground);box-shadow:0 0 0 4px color-mix(in srgb,var(--zst-zena) 26%,transparent),var(--z-lift-shadow,0 10px 24px -12px rgba(0,0,0,.7));text-decoration:none}
/* open, the rim is the same solid purple as the fill (review: the resting gradient's dark band showed through as a muddy edge) */
.zst-pill.zst-pill:is(:hover,:focus-visible,:active,[aria-expanded=true])::before{background:var(--zst-zena)}
.zst-pill.zst-pill.zst-pill:active{transform:scale(var(--scale-press,.96))}
.zst-pill.zst-pill:focus-visible{outline:2px solid var(--z-title,#f4f6fa);outline-offset:3px}
.zst-pill.zst-pill.zst-pill[aria-expanded=true]{background:var(--zst-zena);color:var(--z-surface,#080b10)}
.zst-pill.zst-pill[aria-expanded=true]>.zst-star{fill:currentColor}
@media(prefers-reduced-motion:no-preference){
  :root[data-zst-cue] .zst-pill.zst-pill:not([aria-expanded=true]){animation:zst-cue-pill .9s cubic-bezier(.2,.7,.2,1) .7s 1 both}
  :root[data-zst-cue] .zst-pill.zst-pill:not([aria-expanded=true])>.zst-star{animation:zst-cue-star .9s cubic-bezier(.2,.7,.2,1) .7s 1 both}
}
@keyframes zst-cue-pill{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
@keyframes zst-cue-star{0%{transform:rotate(0) scale(1)}45%{transform:rotate(90deg) scale(1.5)}100%{transform:rotate(180deg) scale(1)}}
/* in the mode row it leads the right cluster (left of Live now and the Watchlist); in the market view's row it stands
   at the right, before the Ask arrow */
:root .zc-category-bar>.zst-pill.zst-pill{align-self:center;margin-left:auto;margin-right:8px}
:root .zc-category-bar>.zst-pill~:is(.zc-live-now,.zc-watchlist){margin-left:0!important}
.zc-market-nav .zst-pill{align-self:center;margin-left:auto}
@media(max-width:700px){.zst-pill.zst-pill{height:34px;min-height:34px;padding:0 13px 0 11px;font-size:13px!important}}
/* phones: the mode row is a grid (product-ui.css, news-keycard.css). The pill takes its own column at the right of the
   modes, then the bookmark, then Live now, all on the one row, so the page gains no bar. At phone widths the modes read
   "News", "Markets" and "Ask" and Live now is its red dot; their full names stay for a screen reader. */
@media(max-width:700px){
  :root .zc-board-header .zc-category-bar:has(>.zst-pill){grid-template-columns:minmax(0,1fr) auto auto auto}
  :root .zc-category-bar>.zst-pill.zst-pill{grid-column:2;grid-row:1;justify-self:end;margin:0}
  :root .zc-category-bar>.zst-pill~.zc-live-now{grid-column:4}
  :root .zc-category-bar>.zst-pill~.zc-live-now+.zc-watchlist{grid-column:3}
}
@media(max-width:430px){
  :root .zc-category-bar:has(>.zst-pill)>.zc-mode-switch>:is(.zc-all,.zc-mode-end){font-size:0!important}
  :root .zc-category-bar:has(>.zst-pill)>.zc-mode-switch>.zc-all::before{content:"News";content:"News"/"";font-size:12px}
  :root .zc-category-bar:has(>.zst-pill)>.zc-mode-switch>.zc-mode-end::before{content:"Markets";content:"Markets"/"";font-size:12px}
  :root .zc-category-bar>.zst-pill~.zc-live-now{font-size:0!important;padding-left:2px;padding-right:2px}
  /* lf-a (review #11): where the row also holds Live markets' View menu, the pill is its star alone (its name stays in
     aria-label), so the modes keep their words instead of being scrolled down to "s" */
  :root .zc-category-bar:has([data-zc-view])>.zst-pill.zst-pill{width:34px;padding:0;gap:0}
  :root .zc-category-bar:has([data-zc-view])>.zst-pill>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* review (320): at 340px and under the pill is its star alone in every row (its name stays for a screen reader), so the
   market row's Ask arrow and the mode row's own controls stay on the screen: nothing in those rows may overflow */
@media(max-width:340px){
  .zst-pill.zst-pill.zst-pill{width:34px;padding:0;gap:0}
  .zst-pill.zst-pill>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* the panel: a compact chat. It never draws an answer card and never covers what it points at. */
.zst-panel{position:fixed;z-index:262;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));box-sizing:border-box;display:grid;gap:12px;width:368px;max-width:calc(100vw - 32px);padding:16px;border:1px solid var(--z-title,#f4f6fa);border-radius:14px;background:var(--z-surface,#080b10);color:var(--z-title,#f4f6fa);box-shadow:0 18px 40px -16px #000;font:400 15px/23px var(--sans,system-ui,sans-serif);letter-spacing:0}
.zst-panel[data-corner=bl]{right:auto;left:24px}
/* free space (ask-path.js seek()): its left and bottom are set on the element, and it still grows upward */
.zst-panel[data-corner=free]{right:auto}
.zst-panel *{box-sizing:border-box}
.zst-panel>header{display:flex;align-items:center;gap:8px}
.zst-title{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font:600 15px/21px var(--sans,system-ui,sans-serif)}
.zst-panel svg:not(.zst-star){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zst-icon{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--z-hairline-strong,#3a4452);border-radius:6px;background:none;color:inherit;cursor:pointer;transition:var(--z-lift-ease,border-color .16s ease)}
.zst-icon:is(:hover,:focus-visible){border-color:var(--z-title,#f4f6fa)}
.zst-panel :is(button,textarea):focus-visible{outline:2px solid var(--z-title,#f4f6fa);outline-offset:2px}
.zst-log{display:grid;gap:10px}
.zst-q{justify-self:end;max-width:88%;margin:0;padding:6px 12px;border:1px solid var(--z-hairline-strong,#3a4452);border-radius:12px;font:500 14px/20px var(--sans,system-ui,sans-serif);overflow-wrap:anywhere}
.zst-say{margin:0;font:600 16px/23px var(--sans,system-ui,sans-serif);text-wrap:pretty}
.zst-chips{display:flex;flex-wrap:wrap;gap:8px}
.zst-chips button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px 0 12px;border:1px solid var(--z-hairline-strong,#3a4452);border-radius:17px;background:none;color:inherit;font:500 13px/18px var(--sans,system-ui,sans-serif);white-space:nowrap;cursor:pointer;transition:var(--z-lift-ease,transform .16s ease,box-shadow .16s ease,border-color .16s ease)}
.zst-chips button: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));border-color:var(--z-title,#f4f6fa)}
.zst-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--z-title,#f4f6fa);border-radius:10px}
.zst-form textarea{display:block;width:100%;min-height:22px;max-height:66px;margin:0;padding:0;resize:none;border:0;outline:0;background:none;color:inherit;font:400 15px/22px var(--sans,system-ui,sans-serif)}
.zst-panel .zst-form textarea:focus-visible{outline:none}
.zst-form:focus-within{outline:2px solid var(--z-title,#f4f6fa);outline-offset:2px}
.zst-form textarea::placeholder{color:var(--z-title,#f4f6fa);opacity:1}
.zst-send{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--z-title,#f4f6fa);border-radius:8px;background:var(--z-title,#f4f6fa);color:var(--z-surface,#080b10);cursor:pointer}
.zst-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){
  .zst-panel,.zst-panel[data-corner]{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;max-height:40dvh;overflow:auto;gap:10px;padding:12px}
  /* b3 (production check, 390): the sheet's one line of chips says it scrolls. Both edges fade (a constant mask, not a
     state): the left over the sheet's own 12px padding, so the first chip is whole at rest; the right over 36px that the
     last chip can be drawn clear of. A swipe settles on a chip's leading edge. Never a hard cut mid-word. */
  .zst-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:4px 36px 4px 12px;scroll-snap-type:x proximity;scroll-padding-left:12px;-webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 36px),transparent)}
  .zst-chips button{flex:none;scroll-snap-align:start}
  .zst-chips::-webkit-scrollbar{display:none}
  .zst-say{font:600 15px/21px var(--sans,system-ui,sans-serif)}
}

/* pointing: a constant scrim with a cut-out, the ring on the cut-out, Zena's star on its corner, the tag on its free
   side. The layer takes no pointer: the page under it scrolls and clicks, and the lit target does what it does. */
.za-layer{position:fixed;inset:0;z-index:258;pointer-events:none}
.za-scrim{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none}
.za-scrim path{fill:#03050a;fill-opacity:.72}
.za-ring{position:fixed;box-sizing:border-box;border:2px solid var(--z-title,#f4f6fa);border-radius:10px;pointer-events:none}
.zst-pointer{position:fixed;left:0;top:0;display:block;width:26px;height:26px;color:var(--z-title,#f4f6fa);pointer-events:none;will-change:transform}
.zst-pointer .zst-star.zst-star{width:26px;height:26px;stroke:var(--z-surface,#080b10);stroke-width:1}
.zst-tag{position:fixed;max-width:calc(100vw - 16px);padding:5px 10px;border-radius:6px;background:var(--z-title,#f4f6fa);color:var(--z-surface,#080b10);font:600 13px/18px var(--sans,system-ui,sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.zst-tag[hidden]{display:none}
/* the corner button is not kept anywhere this sheet is linked: Ask is on the cards and in this pill */
#zenaVisualLauncher{display:none!important}
/* the explanation (2026-11-10, Palash: "explain this specific graphic ... in a very nice format"): the bold lead above,
   then short lines, the label left and the element's own figures set apart on the right, in the title ink */
.zst-lines{display:grid;gap:6px;margin:0;padding:10px 0 0;border-top:1px solid var(--z-hairline-strong,#3a4452)}
.zst-lines>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:baseline}
.zst-lines dt{margin:0;font:400 13px/18px var(--sans,system-ui,sans-serif);color:var(--z-title,#f4f6fa)}
.zst-lines dd{margin:0;font:600 14px/19px var(--sans,system-ui,sans-serif);color:var(--z-title,#f4f6fa);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-wrap:pretty}
@media(max-width:700px){
  .zst-panel:has(.zst-lines){max-height:62dvh}
  .zst-lines{gap:4px;padding-top:8px}
  .zst-lines>div{grid-template-columns:84px minmax(0,1fr);gap:8px}
  .zst-lines dd{font:600 13px/18px var(--sans,system-ui,sans-serif)}
}