/* ================================================================
   PRACTICE BARS — target difficulty + accuracy bar styles
   ================================================================ */

/* ── Shared ──────────────────────────────────────────────────── */

/* The title and the readout sit on one line and push apart. That fits the wide
   page, where there is room for both; in the Colab rail the whole bar is inside
   a ~400px column and "Old 55.0 -> New 70.0" beside a title is more than the
   line holds, so the two crushed into each other mid-word. Wrapping costs a
   line only when it has to, and the row-gap keeps the readout from sitting on
   top of the track when it does. */
.bar-header-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  row-gap: 2px;
}

/* ── Target difficulty bar ───────────────────────────────────── */

.target-difficulty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex: 1;
}

.target-difficulty-title {
  font-size: 13px;
  color: var(--text);
}

.target-difficulty-track {
  position: relative;
  width: 100%;
  height: 10px;
}

.target-difficulty-delta {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
}

.target-difficulty-delta.up {
  background: linear-gradient(90deg, rgb(var(--ok-rgb) / 0.95), rgb(var(--ok-rgb) / 0.45));
}

.target-difficulty-delta.down {
  background: linear-gradient(90deg, rgb(var(--danger-rgb) / 0.95), rgb(var(--danger-rgb) / 0.45));
}

.target-difficulty-marker {
  position: absolute;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
}

.target-difficulty-line {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgb(var(--tint-rgb) / calc(0.95 * var(--tint-k)));
}

.target-difficulty-number {
  display: none;
}

.target-difficulty-number-old {
  top: -20px;
}

.target-difficulty-number-new {
  top: 12px;
}

.target-difficulty-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}

/* ── Accuracy bar ────────────────────────────────────────────── */

/* This rule loads AFTER styles/components.css, so at equal specificity its
   display:flex silently beat `.hidden` (2026-09-06: the box stayed on screen
   with the previous concept's title). The compound selector below restores
   the hide. */
.ewma-accuracy.hidden {
  display: none;
}

.ewma-accuracy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ewma-accuracy-label {
  font-size: 13px;
  color: var(--text);
}

.ewma-accuracy-meta {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.ewma-accuracy-track {
  position: relative;
  width: 100%;
  height: 10px;
}

.ewma-accuracy-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
}