/* "Levels ahead of price" panel (/s/<slug>, src/lib/level-odds.ts +
   src/routes/symbol.tsx). Own file, loaded only on symbol pages (see
   layout.tsx's hasLevelOdds prop) — sizing/hover chrome comes from the
   shared .instrument-svg / .instrument-point rules in style.css, this file
   only adds what's specific to the vertical ladder: tick styling, the
   dir-up/dir-dn color split (reuses the site's existing
   --instrument-up/--instrument-dn tokens, same colors the probability
   surface chart already uses for the identical up/down convention) and the
   entrance animation. */

.level-odds-center-line {
  stroke: var(--text-dim);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.level-odds-center-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  fill: var(--text);
}

.level-odds-tick {
  stroke-width: 1.5;
}

.level-odds-mark.dir-up .level-odds-tick {
  stroke: var(--instrument-up);
}

.level-odds-mark.dir-dn .level-odds-tick {
  stroke: var(--instrument-dn);
}

.level-odds-mark-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: var(--text-dim);
}

.level-odds-mark-price {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  fill: var(--text);
}

.level-odds-mark-pct {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
}

.level-odds-mark.dir-up .level-odds-mark-pct {
  fill: var(--instrument-up);
}

.level-odds-mark.dir-dn .level-odds-mark-pct {
  fill: var(--instrument-dn);
}

.level-odds-mark:hover .level-odds-tick,
.level-odds-mark:focus-visible .level-odds-tick,
.level-odds-mark.is-active .level-odds-tick {
  stroke-width: 2.5;
}

.level-odds-mark:focus-visible {
  outline: none;
}

/* --- entrance animation: marks fly in toward their resting position ------
   A fixed pixel offset (not proportional to the mark's real distance) is
   deliberate — the point is legible motion on load, not a physically
   accurate trajectory. Disabled outright under prefers-reduced-motion,
   same convention as every other animated element on the site
   (public/instruments.js's own draw-in effect, public/style.css's
   pulse-dot, etc.) — the mark still renders at its FINAL position with no
   animation, so the reduced-motion state is never missing content. */
.level-odds-mark {
  opacity: 0;
  animation: level-odds-in-up 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-odds-mark.dir-dn {
  animation-name: level-odds-in-dn;
}

@keyframes level-odds-in-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes level-odds-in-dn {
  from {
    opacity: 0;
    transform: translateY(-28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-odds-mark {
    animation: none;
    opacity: 1;
  }
}

.level-odds-closed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 30px 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}