/* circuitCard.css — the circuit/giant-set card: round badge, per-movement rows, the feedback
   trio, rest rows, complete-round button. Extracted from index.css 2026-07-27.
   Inherits design tokens, glass-card/button/flex foundations, the
   shared deck-card chrome (exerciseDeckOfCards.css) and color scheme from index.css, loaded first —
   this file adds only what circuitCard.js exclusively owns. */

/* Subtle accent-tinted pill with bright accent text — emphasised but not a loud solid block,
   so the label keeps strong contrast against the badge. */
.circuit-round-badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ONE LINE PER MOVEMENT, name and target in the same phrase.
   Three shapes were tried in front of the maintainer. Right-aligned targets left short names a
   hand's width from their own numbers ("hard to read … kadar so tako daleč odmaknjeni od imena
   vaje"). Columns sized to the longest name closed that gap but made every card start its numbers
   somewhere else, and left the round badge aligned to nothing ("izgled je malce neroden … števec
   round je neusklajen"). A column that has to line up with a badge above it is a table pretending
   to be a summary.
   So there is no column: the target follows the name the way the exercise card already writes its
   own ("S4 × R6 × 60kg"), and nothing has to be aligned with anything. */
.circuit-ex-list {
  margin-top: 4px;
  gap: 1px;
}
.circuit-ex-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 6px;
}
.circuit-ex-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}
/* The name tinted by feedback logged for this exercise (circuitCard.js's getExerciseSignalColor) —
   a colour only the running code knows, handed over as a custom property. */
.circuit-ex-name.has-signal-color {
  color: var(--signal-color);
}
.circuit-ex-target {
  display: inline-flex;
  align-items: baseline;
  flex-shrink: 0;
  gap: 6px;
}
/* Reps/weight read in the accent colour so they pop. */
.circuit-ex-reps {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
/* The separator that makes name and target read as one phrase rather than two columns. Quiet: it is
   punctuation, not information. */
.circuit-ex-sep {
  opacity: 0.4;
  font-size: 11px;
}

/* THE CARD IN FOCUS IS THIS SAME LIST, grown to be read at arm's length mid-set: size
   is the only thing that changes between the states, the way the head row's name already grows and
   nothing else moves. It used to be a second template — a title bar of its own, rows in
   another size, the movements written out again — so a circuit looked like two different cards
   depending on whether the trainer was standing on it. */
.exercise-deck-card.in-focus .circuit-ex-name {
  font-size: 14px;
  font-weight: 700;
  opacity: 1;
}
.exercise-deck-card.in-focus .circuit-ex-reps {
  font-size: 15px;
}
/* A row rules itself off from the next only on the card being worked: everywhere else the list is
   read as one block and the lines would be drawn for nothing. */
.exercise-deck-card.in-focus .circuit-ex-row {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* The feedback trio stretches across the full row so there's no empty right-hand gutter and
   the buttons stay gym-floor sized. */
.circuit-ex-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
/* The same three actions as a standalone exercise card, so they LOOK the same (reported 2026-08-22:
   "comparing the Assault Bike card with the Leg & Hinge circuit shows 2 incompatible button
   styles"). The look now comes from `.deck-action-*` in exerciseCard.css, which these rows carry as
   well — a second set of colours here was two things to keep in agreement, and they had already
   drifted: grey and 32px tall against coloured and 40px, for the same tap with the same meaning.
   What stays is what is genuinely true of a row inside a circuit rather than of a card: it shares
   its width with two siblings. */
.circuit-sig {
  flex: 1;
  padding: 0 8px;
  gap: 5px;
}
.circuit-sig > span {
  font-size: 12px;
  font-weight: 700;
}

/* Rest is part of the work — the "Rest" label reads like a movement's name and the duration like a
   rep count (mono, accent), so a rest row is as visible as an exercise row. */
.circuit-ex-rest .circuit-ex-name > i {
  color: var(--primary);
}
/* The control that starts THIS rest, added to the row on the focused card. The whole
   row used to be that button, which is a live control on a card the trainer may only be reading. */
.circuit-break-play {
  margin-left: auto;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: var(--primary);
  cursor: pointer;
}
.circuit-break-play:hover {
  background: var(--primary-light);
}

/* Reps actually done, where the target is "as many as you can". It replaces that row's target in
   place on the focused card, so the number stays where the row already said it. */
.circuit-failure-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.circuit-failure-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
}
.circuit-failure-stepper .stepper-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.circuit-failure-input {
  width: 38px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.circuit-complete-btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}