/* exerciseDeckOfCards.css — the vertical card-stack mechanics and the deck-card chrome SHARED by
   every card type it renders (exerciseCard.js, circuitCard.js, and its own rest/past cards):
   compact/top/timer/counter/status/name. Component-exclusive additions live in that
   component's own file (exerciseCard.css, circuitCard.css). Extracted from index.css
   2026-07-27. Inherits design tokens, glass-card/button/flex
   foundations and color scheme from index.css, loaded first. */

/* Standalone rest marker card in the live deck. Dashed/faded look is deliberately scoped to the
   collapsed state (:not(.in-focus)) — a focused rest is a primary card like any other and gets the
   shared solid-border/full-opacity .in-focus treatment below, not this waiting-in-line look. */
.exercise-deck-card.rest-card:not(.in-focus) {
  border-style: dashed;
  opacity: 0.9;
  cursor: pointer;
}
/* Only where the pointer can hover; see the collapsed card's hover below for why. */
@media (hover: hover) {
  .exercise-deck-card.rest-card:not(.in-focus):hover {
    opacity: 1;
    border-color: var(--primary);
  }
}
.rest-card-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rest-card-inner .deck-card-counter {
  color: var(--primary);
}
/* The focused rest card ADDS this button to the row it already draws — it does not
   redraw the duration at 42px underneath, which made a very tall card out of the one line the row
   had already said. Starting the timer is reachable from here and nowhere else. */
.rest-card-start {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
/* Group Matrix Grid for Active Session */
.group-matrix-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 600px) {
  .group-matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
.participant-log-card {
  padding: 12px;
  border-radius: var(--border-radius-md);
  background: rgba(39, 39, 42, 0.3);
  border: 1px solid var(--border-color);
}
.participant-log-card.completed {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.03);
}
.participant-card-header {
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 6px;
}
.participant-card-header h5 {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.participant-header-status {
  font-size: 11px;
}
.participant-card-header.completed-all .participant-header-status {
  color: var(--primary);
  font-weight: 600;
} /* Set Rows styling for the touch steppers */
.active-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.active-set-row:last-child {
  border-bottom: none;
}
.set-index-col {
  width: 24px;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-muted);
}
.stepper-control-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stepper-input-wrapper {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  height: 30px;
}
.stepper-input-wrapper input {
  width: 46px;
  border: none;
  background: transparent;
  color: var(--text-main);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  outline: none;
}
.step-btn {
  background: transparent;
  color: var(--text-muted);
  width: 24px;
  height: 100%;
  font-size: 11px;
  transition: background 0.1s ease;
}
.step-btn:hover {
  background: var(--border-color);
  color: var(--text-main);
}
.stepper-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 4px;
  font-weight: 600;
}
.set-check-col {
  width: 32px;
  display: flex;
  justify-content: flex-end;
}
.set-checkbox-btn {
  background: transparent;
  border: 1.5px solid var(--text-muted);
  color: transparent;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.set-checkbox-btn.checked {
  background: var(--primary-gradient);
  border-color: transparent;
  color: var(--on-primary);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
} /* Footer layout for session overlay */
/* Cards stack vertically and overlap: the in-focus card is full-size (stats + one-tap
   signals), while the rest collapse to a peeking top row. This keeps a long plan compact
   on a gym-floor phone — as many upcoming cards as fit show their name + count. */
.exercise-vertical-list {
  display: flex;
  flex-direction: column;
  padding: 8px 6px 14px;
  perspective: 1400px;
  /* How far each collapsed card slides up over the one before it. ONE value for every viewport:
     the peeking row exists to be read, and the compact row needs 29px of a 37px
     card, so anything tighter than this hides the thing the stack is for. It was -28px on a phone
     until 2026-08-18 on the reasoning that vertical space is scarcer there — true, and it bought
     20px per card by showing 11px of a row that needs 29. The only card a trainer could read was
     the past card, which is LAST in the deck with nothing stacked on it. */
  --deck-collapsed-overlap: -8px;
}
.exercise-deck-card {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  /* Fully opaque (card tint over the solid view background) so overlapping deck cards never
     bleed through each other. Tinted states below layer their colour over this same base. */
  background-color: var(--bg-color);
  background-image: linear-gradient(var(--card-bg), var(--card-bg));
  cursor: pointer;
  transform-origin: center top;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.3s ease,
    background 0.2s, margin 0.3s ease, opacity 0.3s ease;
} /* Collapsed cards slide up over the one below (negative margin) so only the top row peeks,
   tilted back for a physical-deck depth cue. The depth comes from the scale/tilt/shadow, not
   from element opacity — a translucent card here let the overlapped card below bleed through. */
.exercise-deck-card:not(.in-focus) {
  margin-bottom: var(--deck-collapsed-overlap, -28px);
  transform: scale(0.955) rotateX(6deg);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 1;
}
/* A mouse lifts the card it points at. Only where the pointer CAN hover: Chrome sets :hover on the
   element a finger presses (Blink's gesture_manager.cc, ShowPress and TapDown), and on a phone it
   stays there after the finger lifts. A press-and-hold is how the plan peek (planPeek.js) begins,
   so the card the trainer pulled from could stay half-lifted after the plan sprang back: 5px wider
   than its neighbours, tilted differently, its border against the walkthrough's ring. Reported by
   Simon on a Galaxy S23 Ultra, 2026-10-13, as a card border that stayed distorted after a pull.
   tests/e2e/test_plan_peek_open.py holds a card in :hover on a phone profile and checks it. */
@media (hover: hover) {
  .exercise-deck-card:not(.in-focus):hover {
    opacity: 1;
    transform: scale(0.975) rotateX(3deg);
  }
}
.exercise-deck-card:last-child {
  margin-bottom: 0;
}
/* The in-focus card pops forward, full-size, with breathing room around it */
.exercise-deck-card.in-focus {
  margin: 6px 0 10px;
  transform: none;
  opacity: 1;
  position: relative;
  z-index: 5;
  background-image: linear-gradient(var(--primary-light), var(--primary-light)),
    linear-gradient(var(--card-bg), var(--card-bg));
  border-color: var(--primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 16px var(--primary-light);
  animation: cardFocusIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The ACTIVE card: the one the trainer is looking at, which a client switch and a
   reload come back to. A thin outline and a coloured left edge, and nothing else — no button, no
   change of size, so the stack does not move when the mark moves. Outline and ::before take no
   layout room and leave box-shadow to the open card and to the themes. */
.exercise-deck-card.is-active {
  outline: 1px solid var(--primary);
  outline-offset: -1px;
}
.exercise-deck-card.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  background: var(--primary);
  pointer-events: none;
}
/* Each navigation re-renders the focus card, so this entrance plays on every switch */
@keyframes cardFocusIn {
  from {
    transform: translateY(12px) rotateX(-14deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}
.exercise-deck-card.completed:not(.in-focus) {
  border-color: rgba(16, 185, 129, 0.3);
}
/* The past card's own look. Since 2026-09-30 the live deck does not draw one — it holds one
   session's plan and nothing else, and the previous session is reached sideways instead. The card
   itself (pastDeckCard.js) is kept whole for the client's history view, which is to stop drawing
   its own records and mount these cards instead, so its styles are kept with it.

   A past card takes its colour from the THEME's own past token, not from a violet written in here.
   The hardcoded #8b5cf6 was nebula's primary spelled out: in midnight it painted
   nebula's violet over an emerald app, and in nebula itself it painted the accent — so the session
   the trainer is running and the session they ran in July wore the same colour. The badge in the
   corner already read `--temporal-past`; now the card it sits on agrees with it. */
.exercise-deck-card.past-session {
  border-color: color-mix(in srgb, var(--temporal-past) 30%, transparent);
  background-image: linear-gradient(
      color-mix(in srgb, var(--temporal-past) 14%, transparent),
      color-mix(in srgb, var(--temporal-past) 14%, transparent)
    ), linear-gradient(var(--card-bg), var(--card-bg));
} /* Tapped past card expands in place — pops forward like the focus card (overriding the
   collapsed-stack transform), but keeps its purple identity instead of the cyan live-focus
   treatment. Higher specificity than .exercise-deck-card:not(.in-focus) so the pop wins. */
.exercise-deck-card.past-session.past-expanded {
  margin: 6px 0 10px;
  transform: none;
  opacity: 1;
  z-index: 5;
  border-color: color-mix(in srgb, var(--temporal-past) 50%, transparent);
  background-image: linear-gradient(
      color-mix(in srgb, var(--temporal-past) 16%, transparent),
      color-mix(in srgb, var(--temporal-past) 16%, transparent)
    ), linear-gradient(var(--card-bg), var(--card-bg));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 14px
    color-mix(in srgb, var(--temporal-past) 18%, transparent);
  animation: cardFocusIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.deck-history-collapse {
  margin-left: auto;
  color: var(--temporal-past);
  font-size: 12px;
}
.deck-history-sets {
  gap: 4px;
  margin-top: 4px;
}
.deck-history-set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}
.deck-history-set-row strong {
  color: var(--temporal-past);
  width: 26px;
  flex-shrink: 0;
}
.deck-history-load {
  color: inherit;
  font-weight: 600;
}
.deck-history-note {
  font-style: italic;
  margin-left: auto;
}
.deck-history-meta {
  margin-top: 8px;
  font-size: 11px;
} /* A launched future-day session is a plan, not a live workout — tint its exercise names amber
   to match the future colour coding on the dashboard (mirrors the purple past history). */
.exercise-deck-card.future-session .deck-card-name,
.exercise-deck-card.future-session .deck-card-name-inline {
  color: var(--temporal-future);
}
.exercise-deck-card.future-session:not(.in-focus) {
  background: rgba(251, 191, 36, 0.04);
} /* --- Circuit card: a grouped block of exercises with a round counter --- */
.deck-card-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}
.deck-card-name-inline {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12px;
}
/* One head row for every state, so a card looks like itself however open it is. The
   FOCUSED card still has to be read at arm's length mid-set, so its name grows — the row, the order
   and the tag's place stay put, which is what makes the three states one design. */
.exercise-deck-card.in-focus .deck-card-name-inline {
  font-size: 14px;
  font-weight: 700;
}
.deck-card-compact-target {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}
/* The focused card is read at arm's length mid-set, so its target line grows with its name — the
   same treatment, on the same row, rather than a block of stat tiles further down the card that
   said these numbers a second time. */
.exercise-deck-card.in-focus .deck-card-compact-target {
  font-size: 15px;
}
/* Per-card ⏱ timer affordance — starts the floating countdown for this exercise/circuit */
.deck-card-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.deck-card-timer:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.deck-card-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}
.deck-card-status {
  font-size: 11px;
  padding: 2px 7px;
  font-weight: 700;
}
.deck-card-status-upcoming {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}
.deck-card-status-past {
  background: color-mix(in srgb, var(--temporal-past) 20%, transparent);
  color: var(--temporal-past);
}
.deck-card-name {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* Fast Adjust plan bar styling */
.fast-adjust-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin: 10px 0;
}
.body-daylight .fast-adjust-bar {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.fast-adjust-bar button {
  font-size: 11px !important;
  padding: 6px 12px !important;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Set-row steppers on a phone — bigger targets for a sweaty thumb. */
@media (max-width: 600px) {
  .active-set-row {
    gap: 12px !important;
    padding-top: 4px;
    padding-bottom: 10px !important;
  }
  .active-set-row .step-btn {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }
  .active-set-row .input-set-weight,
  .active-set-row .input-set-reps {
    height: 38px !important;
    font-size: 15px !important;
  }
  .active-set-row .input-set-weight {
    width: 58px !important;
  }
  .active-set-row .input-set-reps {
    width: 48px !important;
  }
  .active-set-row .set-checkbox-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }
}