/* =========================================================================
   dual.fit/new/strength — ONLY what this page adds on top of v3 and
   /new/convert's page layer (.nhero, .step, .step__panel).

   The hero is Brian's recording in a handset. The step visuals are set
   cards: v3's glass .hcard drawing a lift's sets the way the player lists
   them.
   ========================================================================= */

/* ---- the set card ------------------------------------------------------- */
.hcard.scard {
  width: min(380px, calc(100vw - 64px));
  padding: 20px;
  border-radius: 20px;
  flex-direction: column;
  gap: 16px;
  text-align: left;
  background: rgba(30, 30, 32, 0.85);
}
.hcard .scard__head {
  flex-direction: column;
  gap: 6px;
}
.scard .hcard__title {
  white-space: normal;
  font-size: 16px;
}
.hcard .scard__rx {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.hcard .scard__rows {
  flex-direction: column;
  gap: 8px;
}
.hcard .scard__row {
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--glass-08);
  font-size: 16px;
  line-height: 1.2;
}
.hcard .scard__n {
  width: 22px;
  height: 22px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-15);
  font-family: var(--font-mono);
  font-size: 12px;
}
.hcard .scard__w {
  align-items: baseline;
  gap: 8px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.scard__w i,
.scard__w s {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}
.hcard .scard__k {
  flex-direction: column;
  gap: 2px;
  color: var(--grey-chip);
}
.scard__k em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.hcard .scard__v {
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* A logged set: the app's green tick at the row's end. */
.hcard .scard__row.is-done {
  background: rgba(72, 153, 102, 0.22);
}
.hcard .scard__tick,
.hcard .scard__arrow {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.scard__tick {
  color: #6fd393;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* A lowered set: the player's orange down arrow (SetTableV2). */
.scard__arrow {
  color: var(--orange);
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M19 12l-7 7-7-7'/%3E%3C/svg%3E");
}
.hcard .scard__row.is-down .scard__w {
  color: #ffb07e;
}
.hcard .scard__effort {
  gap: 8px;
  flex-wrap: wrap;
}
.hcard .scard__effort > span {
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--glass-10);
  font-size: 15px;
}
.hcard .scard__effort > span.is-on {
  background: var(--orange);
  font-weight: 500;
}

/* ---- hero --------------------------------------------------------------
   /new/convert's stage (handset, a card either side). Its result card sits
   lower than this clip's payoff, so lift it level with the drawer. */
.nhero__stage .hcard--result {
  top: 200px;
}

/* ---- the step panels hold a card, not a handset ------------------------- */
.step__panel .hcard.scard {
  margin: 0 24px;
}

/* ---- for coaches -------------------------------------------------------- */
.scoach {
  padding: 96px 0 40px;
}
.scoach__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.scoach .sec__h {
  font-size: clamp(28px, 3vw, 44px);
}
.scoach .prose {
  max-width: 620px;
  font-size: 18px;
  color: #d9d9d9;
}
.scoach .rcard__step {
  align-self: center;
  font-size: 15px;
}

@media (max-width: 900px) {
  /* /new/convert tucks its result card over the handset's lower edge; here
     that edge is the drawer the clip is about, so the card sits below it. */
  .nhero__stage .hcard--result {
    margin-top: 0;
  }
  .scoach {
    padding: 56px 0 24px;
  }
  .scoach .prose {
    font-size: 16px;
  }
}