/* panel.css — Eval bar fill + panel-specific overrides */

/* ============================================================
   Eval bar — vertical White/Black advantage indicator.
   White = bottom of the bar; fill grows upward with White's lead.
   The bar mount (#eval-bar) is sized and bordered in style.css;
   panel.css owns only the fill layer and transition.
   ============================================================ */

#eval-bar {
  position: relative;
  overflow: hidden;
}

/* Black half: fills entire bar (dark = black) */
#eval-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--eval-bar-black); /* chess-semantic near-black, theme-independent */
}

/* White fill: grows from the bottom according to --fill (0–100%) */
#eval-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--fill, 50%);
  background: var(--eval-bar-white); /* chess-semantic near-white, theme-independent */
  transition: height var(--motion-base) var(--ease-out);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Reduced-motion: instant snap (global rule covers this, but be explicit) */
@media (prefers-reduced-motion: reduce) {
  #eval-bar::after {
    transition: none;
  }
}

/* ============================================================
   Quality display — icon + text inline, aligned.
   ============================================================ */

.quality {
  display: flex;
  align-items: center;
  gap: 0.35em;
}

/* The icon wrapper: vertically centered, inherits color */
.quality-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* Size matches the font-size of .quality (1.15rem) */
  width: 1.15em;
  height: 1.15em;
}

.quality-icon svg {
  width: 100%;
  height: 100%;
}

/* The text part — capitalized (inherited from .quality in style.css) */
.quality-label {
  text-transform: capitalize;
}

/* ============================================================
   PV line — numbered move tokens.
   ============================================================ */

/* Move number prefixes (e.g. "1. ", "15… ") */
.pv-num {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* Each individual SAN move token */
.pv-move {
  color: var(--text-secondary);
  cursor: default;
}

.pv-move:hover {
  color: var(--text);
}

/* Depth caption appended after the PV */
.pv-depth {
  color: var(--muted);
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  margin-left: 0.25em;
}

/* ============================================================
   Best move — light polish
   ============================================================ */

.best-move {
  color: var(--accent);
}

/* Retrospective block ("what you should have played") — separated from the
   current-position best by a subtle divider. */
.retro-block {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

/* Move + 2nd-best on one baseline-aligned row. */
.best-move-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Compact "· or Nf3 (+0.2)" 2nd-best entry. */
.best-second {
  color: var(--muted);
  font-size: 0.85em;
}
.best-second:empty {
  display: none;
}