/* ================================================================
   ARENA UNLOCK TIMER — stopwatch + target time inside the unlock card

   Mount: <div id="arena-unlock-timer"> inside the .arena-unlock-card.
   Controller: practice/arena-unlock-timer.js.

   Kept in its own file so the timer can be removed without touching
   arena-unlock.css when the real concept-graph flow ships.
   ================================================================ */

.arena-unlock-timer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(var(--tint-rgb) / calc(0.04 * var(--tint-k)));
  border: 1px solid rgb(var(--tint-rgb) / calc(0.12 * var(--tint-k)));
}

.arena-unlock-timer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.arena-unlock-timer-elapsed {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  line-height: 1;
}

.arena-unlock-timer--over .arena-unlock-timer-elapsed {
  color: var(--warn);
}

.arena-unlock-timer-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.arena-unlock-timer-btn {
  padding: 7px 14px;
  font-size: 12px;
  border-radius: 7px;
  border: 1px solid rgb(var(--tint-rgb) / calc(0.18 * var(--tint-k)));
  background: rgb(var(--tint-rgb) / calc(0.05 * var(--tint-k)));
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
}

.arena-unlock-timer-btn:hover {
  background: rgb(var(--tint-rgb) / calc(0.1 * var(--tint-k)));
}

.arena-unlock-timer-btn[hidden] { display: none; }

.arena-unlock-timer-start {
  background: rgb(var(--ok-rgb) / 0.18);
  border-color: rgb(var(--ok-rgb) / 0.55);
}
.arena-unlock-timer-start:hover { background: rgb(var(--ok-rgb) / 0.32); }

.arena-unlock-timer-hint {
  font-size: 11px;
  color: var(--color-muted);
  line-height: 1.4;
  min-height: 14px;
}

/* Persisted-preference toggles that sit to the right of the timer controls.
   - auto-submit-wrong: read by arena-unlock.js inside the onOver callback.
   - auto-start:        read by arena-unlock-timer.js inside resetForExercise. */
.arena-unlock-timer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--color-muted);
  cursor: pointer;
  user-select: none;
  background: rgb(var(--tint-rgb) / calc(0.03 * var(--tint-k)));
  border: 1px solid rgb(var(--tint-rgb) / calc(0.12 * var(--tint-k)));
}

.arena-unlock-timer-toggle:hover {
  background: rgb(var(--tint-rgb) / calc(0.06 * var(--tint-k)));
  color: var(--white);
}

.arena-unlock-timer-toggle input[type=checkbox] {
  margin: 0;
  cursor: pointer;
  accent-color: rgb(var(--ok-rgb) / 0.8);
}