/* ============================================================================
   reps-skin.css — additive polish for the workout-overview drill list that the
   Reps runner shows inside the Shot Lab (tracker.html is embedded by the Reps
   SPA as `../tracker.html?embed=1`).

   WHY: on a phone the picked workout dropped an 11-row flat list under the
   cards — thin rule on the left, drill names in grey, and a shouting all-caps
   gold "10 MAKES" / "REPS" on every row. It read like a debug dump next to the
   rest of the app.

   WHAT THIS DOES — CSS ONLY, purely additive:
     · groups the rows into ONE card (app recipe: --lab-card, --lab-line, 14px)
     · gives the card its own quiet header so it stops looking orphaned
     · drill NAME becomes primary, target becomes a small rounded chip
     · 44px comfortable row height, hairline separators
     · light touch on the workout option cards above it

   RULES IT KEEPS:
     · no display:none on anything functional
     · no position/layout changes on interactive elements (.wopt stays a plain
       flex button; only its padding/typography move)
     · every value is either an app token (var(--lab-*)) or a literal fallback,
       so if a token ever disappears the rows simply fall back to legible text
     · loaded LAST, so it wins on equal specificity without any !important
   ========================================================================== */

/* ---------------------------------------------------------------- card ---- */
.wdrills {
  /* was: bare rows hanging off a 2px left rule */
  border-left: 0;
  margin: 10px 0 4px;
  padding: 0;
  gap: 0;
  background: #1E1A24;                 /* fallback if the token is missing   */
  background: var(--lab-card, #1E1A24);
  border: 1px solid #322D3B;
  border: 1px solid var(--lab-line, #322D3B);
  border-radius: 14px;
  border-radius: var(--lab-radius-card, 14px);
  overflow: hidden;
}

/* Quiet header so the panel reads as "the drills in the workout you picked"
   instead of a loose list floating under the Freestyle option. ::before only —
   it does not affect the existing `.wdrills:empty{display:none}` guard. */
.wdrills::before {
  content: "In this workout";
  display: block;
  padding: 11px 14px 9px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9A9A9A;
  color: var(--lab-muted, #9A9A9A);
  border-bottom: 1px solid #322D3B;
  border-bottom: 1px solid var(--lab-line, #322D3B);
}

/* ----------------------------------------------------------------- row ---- */
.wdrills .wdrill-row {
  align-items: center;                 /* was baseline — chips sat off-centre */
  gap: 12px;
  min-height: 44px;                    /* comfortable tap/scan height         */
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.3;
}

.wdrills .wdrill-row + .wdrill-row {
  border-top: 1px solid rgba(255, 255, 255, .05);
}
html[data-theme="light"] .wdrills .wdrill-row + .wdrill-row {
  border-top-color: rgba(0, 0, 0, .06);
}

/* NAME = primary. First span is the drill name (tracker.html builds the row as
   [<span>name</span>, <span class="t">target</span>]). Scoped by :not(.t) so a
   future extra span can never be mistaken for the name. */
.wdrills .wdrill-row > span:not(.t) {
  min-width: 0;
  font-weight: 600;
  letter-spacing: .005em;
  color: #EDEDED;
  color: var(--lab-text, #EDEDED);
}

/* TARGET = secondary. Small rounded chip instead of bare shouting gold caps. */
.wdrills .wdrill-row .t {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;              /* was .08em                           */
  line-height: 1;
  color: #F8D24B;
  color: var(--lab-goldink, #F8D24B);
  background: rgba(248, 210, 75, .10);
  background: color-mix(in srgb, var(--lab-goldink, #F8D24B) 12%, transparent);
  border: 1px solid rgba(248, 210, 75, .18);
  border: 1px solid color-mix(in srgb, var(--lab-goldink, #F8D24B) 22%, transparent);
}

/* ------------------------------------------------- workout option cards ---- */
/* Opportunistic only. Same selectors the file already ships; no structural or
   positional change — padding, radius and type weight so the picker matches
   the card rhythm of the rest of the app. */
.wload .wopts { gap: 10px; }

.wload .wopt {
  min-height: 62px;
  padding: 13px 14px;
  border-radius: 14px;
  border-radius: var(--lab-radius-card, 14px);
  background: #1E1A24;
  background: var(--lab-card, #1E1A24);
}

.wload .wopt-title {
  font-size: 14.5px;
  font-weight: 700;                    /* was 800 — less shout               */
  letter-spacing: .005em;
}

.wload .wopt-meta {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Group label ("Today" / "Your workouts") sits closer to its own group. */
.wload .wgroup { margin: 16px 0 6px; }
.wload .wgroup:first-child { margin-top: 0; }