/* poll
   Split from the single v22 stylesheet. Everything here is scoped to
   .card.poll and this form's own class prefix (rule 14: a change made for one
   card form is scoped to that form, by class). */
/* ------------------------------------------------------------------ *
   The Poll
 * ------------------------------------------------------------------ */
.card.poll .vizsec{padding:18px 0}
/* .pollviz's base layout (display, width, flex-direction, height, min-height,
   gap, padding-top) is one rule now, back at its first declaration. */

/* the day the call is about.

   The Move's chart, drawn by the same `splitPlot` in js/viz.js and not by a
   second implementation that resembles it -- two copies of one path cut at the
   prior close, and that close ruled across the plot.

   **Drawn, not replayed.** The wipe below is the same rule The Move carries on
   `.rp-svg`, on this form's own variable -- and `lineChart` is passed
   `reveal:false`, so it stamps `--pl-p` at 100% and the wipe has nothing left
   to play. That is the difference between the two callers stated as a
   parameter rather than as a missing stylesheet rule: The Move passes
   `reveal:true` and drives the identical property from its own script over
   eight seconds.

   On a card you answer, the chart is the context the question is asked
   against: it has to be finished before the reader arrives, or the card makes
   them wait 900ms to be allowed to answer. The wipe that used to be here, and
   the 1.05s hold on the move badge, were both that wait.

   The fallback is 100% and not The Move's 0%, on purpose. A Move whose script
   never runs is a bug that shows as a blank plot; The Poll has no script on
   its chart at all, so the value it falls back to has to be the finished one
   or a stamp that failed to land would silently draw nothing.

   Inset by margin rather than padding. `.pl-ref` is absolutely positioned and
   its containing block is the padding box, so with `padding:0 15px` the rule
   ran 15px past the plot at each end -- which is `.rp-wrap`'s reason for using
   margins too. Same content width either way; the difference is only what
   left:0 means. */
.pl-spark{position:relative;flex:1;min-height:70px;width:auto;margin:0 15px 12px}
.pl-svg{display:block;width:100%;height:100%;overflow:visible;
  clip-path:inset(0 calc(100% - var(--pl-p,100%)) 0 0)}
/* Two colours, one path, cut at the level rather than coloured per segment.
   `--up`/`--down` here and not `--stance`, and that is not the same call as
   the one the option bars make below: a bar is a guess about a day and carries
   no direction, but this IS the day, and which side of yesterday it traded is
   the fact the question is about. */
.pl-line{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.pl-line.up{stroke:var(--up)}
.pl-line.dn{stroke:var(--down)}
/* The prior close, ruled and stationary -- the only fixed thing on the plot,
   and what makes "above or below yesterday" readable without arithmetic.
   Matches .rp-ref because it is the same mark. */
.pl-ref{position:absolute;left:0;right:0;border-top:1px dashed var(--edge);
  transform:translateY(-50%);pointer-events:none}
.pl-ref span{position:absolute;left:0;top:5px;font-size:var(--fs-11);color:var(--dim);
  letter-spacing:0;text-transform:none;white-space:nowrap}
/* The move, on the plot. The headline says it once; without it here the chart
   is a shape with no size, and the reader is calling on the wrong thing.
   It arrives with the plot rather than a second after it: it is a label on the
   line, and a label that lands late reads as an event. */
.pl-move{position:absolute;right:0;transform:translateY(-50%);
  font-size:var(--fs-13);font-weight:700;letter-spacing:var(--ls-n01);color:var(--stance);
  background:var(--panel);padding:1px 5px;border-radius:5px}

/* The question, and the button that explains how it settles. No type of its
   own: it is the stack's `question` slot and the layout block sets it. It was
   13px here and 15px on the other three forms, which is the difference
   between a deadline label and a question -- and it was a deadline label,
   because the question itself was in the headline. */
.pl-when{display:flex;align-items:center;gap:7px;padding:0 15px 8px}
.pl-info{appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;
  border:1px solid var(--edge);border-radius:50%;background:none;color:var(--dim);
  font:600 10px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;padding:0}
.pl-info:hover,.pl-info:focus-visible{color:var(--ink);border-color:var(--muted)}
.pl-note{padding:0 15px 10px;font-size:var(--fs-12);line-height:1.45;color:var(--dim)}

.pl-opts{display:flex;flex-direction:column;gap:10px;padding:0 15px;
  margin-bottom:36px}
/* 36px reserved always -- .pl-tally's own 26px plus the flex gap it costs
   `.pollviz` when it is a rendered flex item -- and cancelled the instant
   `.pl-tally` actually shows (below), so the two never both apply. Formcheck
   caught the first version of this: giving `.pl-tally` permanent layout via
   `visibility:hidden` kept it matching `[data-slot="commit"]` with a real
   `offsetParent`, so the "reader can reach a 44px control" probe found a
   26px-tall commit target on the UNANSWERED card, before the reader had
   picked anything. `.pl-tally` goes back to `display:none` -- exactly what
   it was before this file changed, and exactly what keeps it invisible to
   that probe -- and the reservation moves to a margin nothing measures the
   commit control against. */
/* `position:relative` makes this row the containing block for `.pl-track`
   below (rule: a change made for the reveal is scoped to the box it reveals
   in, not spent on a taller box). padding-bottom is 32px in BOTH states --
   14px of margin plus the 10px gap and 8px bar the fill used to gain only at
   the call, back when `.pl-track` was a flow child. Reserving it here instead
   of animating it in is what stops the option rows growing when the poll is
   answered (see `.pl-track` below). */
.pl-opt{appearance:none;-webkit-appearance:none;text-align:left;width:100%;
  display:flex;flex-direction:column;gap:10px;position:relative;
  background:#141517;border:1px solid transparent;border-radius:14px;
  padding:15px 16px 32px;color:var(--ink);font:inherit;cursor:pointer;
  transition:background .18s ease-out,border-color .18s ease-out,transform .12s ease-out}
.pl-opt:hover{background:#1B1C20;border-color:#26272B}
.pl-opt:focus-visible{outline:2px solid var(--muted);outline-offset:2px}
.pl-opt:active{transform:scale(.985);background:#202126}
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pl-head b{font-size:var(--fs-19);font-weight:700;letter-spacing:var(--ls-n01)}
.pl-fig{display:flex;align-items:center;gap:9px}

/* none of the result exists until the call is made */
.pl-fig strong,.pl-track,.pl-you{opacity:0}
/* Absolutely positioned inside the padding-bottom `.pl-opt` reserves above --
   drawn where the reveal used to grow the row into, rather than growing it.
   Fading from empty to filled costs the row nothing: this is the same fix
   forms/price.css uses for the guess marks on `.pr-track`, applied to a bar
   instead of two points. Never `max-height`, which was the animated growth
   that shrank the chart above -- `.pr-shot`'s 153.9px -> 72.2px on The Price
   is `.pl-spark`'s own `flex:1` problem here, one level along. */
.pl-track{position:absolute;left:16px;right:16px;bottom:14px;height:8px;
  border-radius:4px;background:var(--line);overflow:hidden;
  transition:opacity .3s ease-out}
.pl-track i{display:block;height:100%;width:0;border-radius:4px;background:var(--dim)}
.pl-fig strong{font-size:var(--fs-19);font-weight:700;letter-spacing:var(--ls-n01);
  font-variant-numeric:tabular-nums;transition:opacity .3s ease-out .1s}
.pl-you{display:inline-flex;align-items:center;gap:4px;font-style:normal;
  font-size:var(--fs-11);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);transition:opacity .3s ease-out .1s}
.pl-tick{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

.pollviz.called .pl-opt{cursor:default}
.pollviz.called .pl-opt:hover{background:#141517;border-color:transparent}
.pollviz.called .pl-opt:active{transform:none}
.pollviz.called .pl-fig strong{opacity:1}
.pollviz.called .pl-track{opacity:1}
.pollviz.called .pl-track i{width:var(--w);transition:width .78s cubic-bezier(.16,1,.3,1) calc(.1s + var(--d))}
/* Neither direction nor identity belongs in a poll bar.
   --up/--down were wrong because a call is not a day: "Keeps running" is not
   an up move, it is a guess about one. --brand was wrong for the same reason
   one level along -- it is the issuer's colour, and TSLA's issuer colour is
   red, so the bullish option drew in the down palette. The leader is simply
   the brighter bar. */
.pollviz.called .pl-opt.lead .pl-track i{background:var(--ink)}
.pollviz.called .pl-opt.lead .pl-fig strong{color:var(--ink)}
.pollviz.called .pl-opt:not(.lead){background:#111214}
.pollviz.called .pl-opt:not(.lead) .pl-fig strong{color:var(--muted)}
.pollviz.called .pl-opt.picked{border-color:var(--edge)}
.pollviz.called .pl-opt.picked .pl-you{opacity:1}

/* the count, and the way back out. Changing a call is a deliberate act, not
   something a second tap on the other bar should do by accident.

   Fourth instance of the same bug (AGENTS.md rule 18): this row was
   `display:none` until `.called`, which is what The Price's result block did
   before it was fixed, and what The Price Gap and The Reveal each fixed
   separately afterward. `display:none` removes the row -- and the flex gap
   above it -- from the stack entirely, so committing an answer added a whole
   row's height where none had been. The space is reserved instead, on
   `.pl-opts` above, rather than on this element: `.pl-tally` itself stays
   `display:none` here so a probe for "can the reader reach a big enough
   commit control" still finds none on the unanswered card, which is the
   correct answer -- the commit on this form is the option buttons, not this
   row (`data-slot="commit"` here is about stack ORDER, not about being a
   pressable target). */
.pl-tally{display:none;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 15px 0;font-size:var(--fs-12);color:var(--dim)}
.pollviz.called .pl-tally{display:flex}
.pollviz.called .pl-opts{margin-bottom:0}
.pl-change{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  color:var(--muted);font:600 12px/1 "IBM Plex Sans",system-ui,sans-serif;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pl-change:hover,.pl-change:focus-visible{color:var(--ink)}

/* No margin-top:auto -- the stack's `note` slot sets it (rule 17). */
.pl-foot{padding:13px 15px 0;margin-left:15px;margin-right:15px;
  border-top:1px solid var(--line);padding-left:0;padding-right:0;
  display:flex;flex-direction:column;gap:3px}
.pl-prompt{font-size:var(--fs-13);font-weight:600;color:var(--muted)}
.pollviz.called .pl-prompt{color:var(--ink)}
.pl-cap{font-size:var(--fs-12);color:var(--dim)}

/* The plot has no motion left to reduce -- it is drawn finished for everybody,
   which is what a reduced-motion reader was being given here anyway. The
   option bars still animate on the pick, so that half stays. */
@media (prefers-reduced-motion:reduce){
  .pl-track i,.pl-track,.pl-count{transition:none}
}