/* reveal
   Split from the single v22 stylesheet. Everything here is scoped to
   .card.reveal and this form's own class prefix (rule 14: a change made for one
   card form is scoped to that form, by class). */
.card.drag .cardface,.card.drag .thread{transition:none}

/* ------------------------------------------------------------------ *
   The Reveal
 * ------------------------------------------------------------------ */
.card.reveal .vizsec{padding:18px 0}
/* The run into the filing. `flex:1` so this is the slot that absorbs the
   panel slack, which is what `setup` is for -- the job The Price gives its
   photo and The Poll its sparkline. `.rv-spark` is new; grepped first
   (rule 17). Scoped to this form (rule 14). */
.rv-spark{flex:1;min-height:0;display:block;width:100%}
.rv-spark svg{width:100%;height:100%;display:block;overflow:visible}
.rv-spark path{fill:none;stroke:var(--muted);stroke-width:1.5;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}

/* `.rv-prompt` has no type of its own any more: it is the stack's `question`
   slot and the layout block sets it, with the other three forms' questions.

   `.rv-stage` is gone with it, and that is the load-bearing half. It grouped
   the figure, the rail, Lock in and the result into ONE child of the form
   root, and the shared stack orders the root's own children -- so those four
   rows were invisible to it and could not be sequenced against the question
   and the note. Flattened, they are four rows carrying four `data-slot`s.
   What it took with it was `justify-content:center`, which centred the group
   inside whatever height it had; nothing centres now, on either mode, which
   is what the sequence wanted anyway -- the mode that cancelled the centring
   was doing it because the centring was wrong, not because the mode was
   unusual. The 16px step is the same one `.revealviz` already set between its
   own rows, so the rhythm does not change (rule 15: one step, not two). */

/* The guess, before. The largest thing on the card until there is an answer. */
.rv-value{font-size:var(--fs-guess);font-weight:700;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--ink);
  transition:color .18s ease-out}
.rv-value.up{color:var(--up)}
.rv-value.dn{color:var(--down)}

.rv-slot{position:relative;padding:14px 0 0}
/* The rail the input draws on and the markers share, so a marker at 8.74%
   lands exactly where the thumb would. */
.rv-track{position:relative;height:8px;border-radius:4px;background:var(--line);margin:0 0 8px}
.rv-range{position:absolute;left:0;right:0;top:14px;width:100%;height:8px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;z-index:2;cursor:grab;
  /* a drag on the rail must not take the feed with it */
  touch-action:none}
.rv-range:active{cursor:grabbing}
.rv-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:var(--line)}
.rv-range::-moz-range-track{height:8px;border-radius:4px;background:var(--line)}
.rv-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--ink);border:0;margin-top:-9px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.rv-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--ink);border:0}
.rv-range:focus-visible{outline:2px solid var(--muted);outline-offset:6px;border-radius:4px}

.rv-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}

/* Markers exist only after the lock. Before it, showing where the answer sits
   would be the card answering its own question. */
.rv-mark{position:absolute;top:50%;transform:translate(-50%,-50%);opacity:0;
  pointer-events:none;transition:opacity .3s ease-out,left .5s cubic-bezier(.16,1,.3,1)}
.rv-mark i{display:block;width:3px;height:22px;border-radius:2px;background:var(--muted);margin:0 auto}
.rv-mark em:empty{display:none}
.rv-mark em{position:absolute;left:50%;top:-24px;white-space:nowrap;
  font-style:normal;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums}
/* The second lane, taken only when a label would otherwise land on top of the
   one beside it. */
.rv-mark.lane1 em{top:-44px}
.rv-mark.rv-actual i{background:var(--up);width:4px;height:28px}
.rv-mark.rv-actual em{color:var(--up);top:26px}
.rv-mark.rv-actual.lane1 em{top:46px}
.rv-mark.rv-actual.dn i{background:var(--down)}
.rv-mark.rv-actual.dn em{color:var(--down)}
.rv-mark.rv-you i{background:var(--ink)}
.rv-mark.rv-you em{color:var(--ink)}
/* Sample data, and subordinate on the evidence as well as in the hierarchy. */
.rv-mark.rv-crowd i{background:var(--edge);width:2px;height:16px}
.rv-mark.rv-crowd em{color:var(--dim);font-size:10px}

.revealviz.locked .rv-range{opacity:0;pointer-events:none}
.revealviz.locked .rv-mark{opacity:1;transition-delay:.15s}
/* Locking changes what the card SAYS and nothing about where it says it.

   These four rules used to live here and each one moved the layout:
   `.rv-slot{padding-top:58px}`, `.rv-track{margin-bottom:34px}`,
   `.rv-lock{display:none}` and `.rv-value{display:none}`, with `.rv-result`
   arriving underneath. Measured on the sibling form -- the same pattern, the
   same four rules -- the picture lost 81.7px of its 153.9 and every row
   between it and the footnote rose by the same amount. The reader answers a
   question and the card rearranges itself around the answer, so the thing
   they were looking at is not the thing they are looking at.

   The reveal is the two marks on the rail and the figure changing. Both were
   already in place: the marks are absolutely positioned inside the track, so
   the 58px and the 34px were visual room rather than containment, and the
   figure is the same box the guess was shown in. What was additive was the
   block underneath -- and its two sentences are the reader's own result, which
   fits in the button that asked for it. */

.rv-lock{appearance:none;-webkit-appearance:none;width:100%;padding:15px 16px;border:0;
  border-radius:14px;background:var(--ink);color:var(--lock-ink);cursor:pointer;
  font:700 16px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.01em;
  transition:transform .12s ease-out,opacity .18s ease-out}
.rv-lock:hover{opacity:.9}
.rv-lock:active{transform:scale(.985)}

/* Not drawn on the face in either state. The outcome is the figure, the error
   is the button, the crowd is a mark on the rail; the explain paragraph and
   the methodology are what Read more is for. Kept in the markup because the
   detail view reads it. */
.rv-result{display:none;flex-direction:column;gap:9px}
/* 1 the market, 2 your guess against it, 3 the crowd, 4 why, 5 methodology. */
.rv-outcome{font-size:clamp(26px,7.4vw,32px);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:var(--stance);font-variant-numeric:tabular-nums}
.rv-yours{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rv-lines{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.rv-lines b{color:var(--muted);font-weight:600}
.rv-explain{font-size:13px;line-height:1.5;color:var(--dim)}

/* No margin-top:auto -- the stack's `note` slot sets it, once, for every
   prompt-first form (rule 17). */
.rv-foot{padding-top:14px;display:flex;flex-direction:column;gap:3px;
  border-top:1px solid var(--line)}
.rv-when{font-size:12.5px;color:var(--muted)}
.rv-note{font-size:12.5px;color:var(--dim)}
.rv-again{display:none;align-self:flex-start;margin-top:5px;appearance:none;-webkit-appearance:none;
  background:none;border:0;padding:0;color:var(--muted);cursor:pointer;
  font:600 12px/1 "IBM Plex Sans",system-ui,sans-serif;
  text-decoration:underline;text-underline-offset:3px}
/* Prototype only: shown when the renderer is opened with ?dev=1, so the
   production card has no way to un-answer itself. */
body.devtools .revealviz.locked .rv-again{display:inline-block}
.rv-again:hover,.rv-again:focus-visible{color:var(--ink)}