/* RUN BAR — the progress box beside the floating timer (practice/run-bar.js).

   Seth, 2026-10-11: "the timer is a rectangle that's floating with rounded
   corners. To the right of it is the progress bar ... 'X drills for Y' ...
   also a rectangle with rounded corners ... around the outer edges of the
   rectangle the progress is filling around the rectangle as the user is
   solving the drills."

   #practice-notch is the row: the timer tab (styles/run-mode.css floats it),
   then this box, the same height. The fill is an SVG rect on the box's edge
   (run-bar.js sizes it), drawn clockwise from the top-left corner by
   stroke-dashoffset. Token-only colours (styles/watch.py). */

html.dd-run .practice-notch {
  align-items: stretch;
  display: flex;
  gap: 10px;
  top: 10px;
}

.run-bar {
  align-items: center;
  background: var(--surface-2);
  border-radius: 16px;   /* = RADIUS in run-bar.js */
  box-shadow: 0 6px 20px var(--shadow-soft);
  display: none;
  max-width: min(520px, 50vw);
  min-width: 240px;
  padding: 0 22px;
  position: relative;
}
html.dd-run .run-bar:not([hidden]) {
  display: flex;
}

.run-bar-ring {
  height: 100%;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: 100%;
}
.run-bar-rim,
.run-bar-trace {
  fill: none;
  stroke-width: 3;   /* = STROKE in run-bar.js */
}
.run-bar-rim {
  stroke: var(--border);
}
.run-bar-trace {
  filter: drop-shadow(0 0 3px rgb(var(--accent-rgb) / 0.55));
  stroke: var(--accent);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 750ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke 300ms ease;
}
.run-bar-trace.is-snap {
  transition: none;
}
.run-bar.is-empty .run-bar-trace,
.run-bar.is-open .run-bar-trace {
  opacity: 0;
}
.run-bar.is-met .run-bar-trace {
  filter: drop-shadow(0 0 4px rgb(var(--ok-rgb) / 0.6));
  stroke: var(--ok);
}

.run-bar-text {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-bar-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.run-bar.is-met .run-bar-count {
  color: var(--ok);
}

/* ---- A SOLVE: the box bumps, the count pops; the target: a burst ---------- */
/* The XP pop (run-bar.js, a `pop` bar): the change rises off the box and fades. */
.run-bar-delta {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  font: 700 13px/1.3 var(--ui-font, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ok);
  background: var(--surface-2);
  border: 1px solid rgb(var(--ok-rgb) / 0.55);
  box-shadow: 0 4px 14px var(--shadow-soft);
  opacity: 0;
  pointer-events: none;
}
.run-bar-delta.is-down { color: var(--danger); border-color: rgb(var(--danger-rgb) / 0.55); }
.run-bar-delta.is-on { animation: run-bar-delta 1700ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes run-bar-delta {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  25% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}
.run-bar.is-tick {
  animation: run-bar-tick 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes run-bar-tick {
  0% { box-shadow: 0 6px 20px var(--shadow-soft), 0 0 0 0 rgb(var(--accent-rgb) / 0.45); transform: scale(1); }
  30% { transform: scale(1.04); }
  100% { box-shadow: 0 6px 20px var(--shadow-soft), 0 0 0 14px rgb(var(--accent-rgb) / 0); transform: scale(1); }
}
.run-bar-count.is-pop {
  animation: run-bar-pop 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes run-bar-delta-still {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes run-bar-pop {
  0% { color: var(--accent); transform: scale(1.5); }
  100% { transform: scale(1); }
}
.run-bar.is-goal {
  animation: run-bar-goal 1100ms ease-out;
}
@keyframes run-bar-goal {
  0% { box-shadow: 0 6px 20px var(--shadow-soft), 0 0 0 0 rgb(var(--ok-rgb) / 0.6); transform: scale(1); }
  20% { transform: scale(1.07); }
  45% { transform: scale(0.99); }
  100% { box-shadow: 0 6px 20px var(--shadow-soft), 0 0 0 26px rgb(var(--ok-rgb) / 0); transform: scale(1); }
}
.run-bar.is-turn {
  animation: run-bar-turn 700ms ease-out;
}
@keyframes run-bar-turn {
  from { box-shadow: 0 6px 20px var(--shadow-soft), 0 0 0 6px rgb(var(--accent-rgb) / 0.35); }
  to { box-shadow: 0 6px 20px var(--shadow-soft), 0 0 0 0 transparent; }
}

/* ---- NEXT COURSE (the other kind of practice): under the box -------------- */
.run-next {
  font-size: 13px;
  padding: 6px 12px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  white-space: nowrap;
}
.run-next[hidden] {
  display: none;
}

/* ---- A PHONE: one row across the width, the clock smaller, Pause an icon --- */
@media (max-width: 560px) {
  html.dd-run .practice-notch {
    gap: 8px;
    width: calc(100vw - 24px);
  }
  html.dd-run .practice-notch-tab {
    flex: none;
    gap: 8px;
    padding: 6px 10px;
  }
  html.dd-run .practice-notch-clock {
    font-size: 24px;
    letter-spacing: 0.5px;
  }
  html.dd-run .practice-notch-stop {
    padding: 7px 9px;
  }
  html.dd-run .practice-notch-stop::after,
  html.dd-run .practice-notch-stop.is-resume::after {
    content: none;
  }
  .run-bar {
    flex: 1;
    max-width: none;
    min-width: 0;
    padding: 6px 14px;
  }
  .run-bar-text {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .run-bar-trace {
    transition: none;
  }
  .run-bar.is-tick,
  .run-bar.is-goal,
  .run-bar.is-turn,
  .run-bar-count.is-pop {
    animation: none;
  }
  .run-bar-delta.is-on { animation: run-bar-delta-still 1700ms steps(1, end); }
}

/* The task in front of the learner: its XP price before it starts
   (practice/run-bar.js showPrice; Math Academy's "+N XP" on a task). */
.run-bar-price {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--muted);
  pointer-events: none;
}
.run-bar-delta.is-on ~ .run-bar-price { visibility: hidden; }