/* BUFF OS v68 — traffic-light tinting on the exercise library.
   Faint on purpose: enough to read the grid at a glance, not enough to shout. */
.ex-tile { position: relative; }
.ex-tile.tier-g { background: linear-gradient(180deg, rgba(63, 240, 143, .10), rgba(63, 240, 143, .035)), var(--elev2) !important;
  border-color: rgba(63, 240, 143, .26) !important; }
.ex-tile.tier-a { background: linear-gradient(180deg, rgba(240, 180, 90, .10), rgba(240, 180, 90, .035)), var(--elev2) !important;
  border-color: rgba(240, 180, 90, .26) !important; }
.ex-tile.tier-r { background: linear-gradient(180deg, rgba(255, 105, 105, .10), rgba(255, 105, 105, .035)), var(--elev2) !important;
  border-color: rgba(255, 105, 105, .26) !important; }

.et-tier { position: absolute; top: 9px; left: 10px; z-index: 2; padding: 3px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.et-tier.tier-g { color: #3ff08f; background: rgba(63, 240, 143, .14); }
.et-tier.tier-a { color: #f0b45a; background: rgba(240, 180, 90, .14); }
.et-tier.tier-r { color: #ff8585; background: rgba(255, 105, 105, .14); }

/* the legend card where the stretch video used to be */
.v68-legend .v68-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.v68-row { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line2); background: var(--elev2); }
.v68-row b { display: block; font-size: 13.5px; font-weight: 800; margin-bottom: 3px; }
.v68-row span { font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--txt2); }
.v68-row.tier-g { background: rgba(63, 240, 143, .07); border-color: rgba(63, 240, 143, .26); }
.v68-row.tier-g b { color: #3ff08f; }
.v68-row.tier-a { background: rgba(240, 180, 90, .07); border-color: rgba(240, 180, 90, .26); }
.v68-row.tier-a b { color: #f0b45a; }
.v68-row.tier-r { background: rgba(255, 105, 105, .07); border-color: rgba(255, 105, 105, .26); }
.v68-row.tier-r b { color: #ff8585; }
.v68-foot { margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--txt3); }
