/* Today's scores: a smooth curve of the day's finished trips with your mark.
   Sits on the results screen between the tally and the result card. */

.standing {
  margin: 0 0 16px;
  padding: 12px 14px 14px;
  background: var(--panel);
  color: var(--ink);
  border: var(--panel-border);
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
}
.standing-title { margin: 0 0 4px; font: 800 1.15rem/1.1 "Big Shoulders Display", "Arial Narrow", sans-serif; letter-spacing: 0.02em; }
.standing-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.standing-line { margin: 6px 0 0; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.standing.early .standing-chart { display: none; }
.standing.early .standing-line { margin: 2px 0 0; text-align: left; font-weight: 600; }

.st-area { fill: var(--accent); opacity: 0.16; }
.st-beat { fill: var(--accent); opacity: 0.38; }
.st-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.st-axis { stroke: var(--muted); stroke-width: 1; opacity: 0.6; }
.st-tick { fill: var(--muted); font: 600 11px/1 var(--font-body, sans-serif); }
.st-you line { stroke: var(--ink); stroke-width: 2; }
.st-you circle { fill: var(--accent); stroke: var(--panel); stroke-width: 2.5; }
.st-you text { fill: var(--ink); font: 800 12px/1 var(--font-body, sans-serif); }

/* the entrance: curve draws, fill rises, then your marker drops in */
.standing.enter { animation: fade-up 0.35s ease-out both; }
.standing.enter .st-curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: st-draw 0.9s ease-out 0.15s forwards; }
.standing.enter .st-area { opacity: 0; animation: st-fill-area 0.6s ease-out 0.6s forwards; }
.standing.enter .st-beat { opacity: 0; animation: st-fill-beat 0.5s ease-out 1.1s forwards; }
.standing.enter .st-you { opacity: 0; transform: translateY(-10px); animation: st-drop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 1.05s forwards; }
@keyframes st-draw { to { stroke-dashoffset: 0; } }
@keyframes st-fill-area { to { opacity: 0.16; } }
@keyframes st-fill-beat { to { opacity: 0.38; } }
@keyframes st-drop { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .standing.enter, .standing.enter * { animation: none !important; }
  .standing.enter .st-curve { stroke-dashoffset: 0; }
  .standing.enter .st-area { opacity: 0.16; }
  .standing.enter .st-beat { opacity: 0.38; }
  .standing.enter .st-you { opacity: 1; transform: none; }
}