/* The live set card: the app's set card (workout_set_card.dart, the set bay,
   the lanes and the card foot), point for point. The bay itself is painted
   by js/bay-paint.js. */

.setcard {
  --sc-w: 100%;
  position: relative;
  width: var(--sc-w);
  max-width: 380px;
  border-radius: var(--r-l);
  border: 0.5px solid rgba(174, 174, 178, 0.16);
  background: linear-gradient(180deg, rgba(24, 24, 28, 0.55) 0%, rgba(15, 15, 18, 0.85) 30%, rgba(0, 0, 0, 0.92) 75%, rgba(0, 0, 0, 0.96) 100%);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.42), 0 3px 9px -2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40), 0 40px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.setcard::before, .setcard::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 3;
}
.setcard::before { top: 0; height: 0.7px; background: linear-gradient(90deg, transparent 0%, rgba(174, 174, 178, 0.10) 18%, rgba(174, 174, 178, 0.18) 50%, rgba(174, 174, 178, 0.10) 82%, transparent 100%); }
.setcard::after { bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.55) 20%, rgba(0, 0, 0, 0.55) 80%, transparent 100%); }

.sc-head {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 46px;
  padding: 16px 6px 0 16px;
}
.sc-verdict { display: grid; justify-items: center; gap: 8px; width: 20px; }
.sc-rule { font: 700 9.5px/1 var(--font); letter-spacing: 0.08em; color: var(--text-3); font-variant-numeric: tabular-nums; min-height: 9.5px; }
.sc-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff 0%, var(--led-active-glow) 22%, var(--led-active) 60%, #00a050 100%);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.55), 0 0 2px rgba(0, 230, 118, 0.9);
  transition: background var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.setcard[data-verdict="recalibrate"] .sc-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, #ffab40 22%, #ff9100 60%, #b86200 100%); box-shadow: 0 0 8px rgba(255, 145, 0, 0.55), 0 0 2px rgba(255, 145, 0, 0.9); }
.setcard[data-verdict="hold"] .sc-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, #e6edf6 30%, #cfddee 62%, #8ea2bb 100%); box-shadow: 0 0 8px rgba(207, 221, 238, 0.45), 0 0 2px rgba(207, 221, 238, 0.8); }
.setcard[data-mode="deload"] .sc-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, var(--deload-glow) 22%, var(--deload) 60%, #1565c0 100%); box-shadow: 0 0 8px rgba(66, 165, 245, 0.6), 0 0 2px rgba(66, 165, 245, 0.9); }
.setcard[data-mode="boost"] .sc-led { background: radial-gradient(circle at 38% 32%, #ffffff 0%, var(--flare) 22%, var(--core) 60%, #a62c00 100%); box-shadow: 0 0 8px rgba(255, 69, 0, 0.6), 0 0 2px rgba(255, 69, 0, 0.9); }
.sc-cut { width: 1px; align-self: stretch; margin: 2px 14px 2px 14px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.7) 80%, transparent); box-shadow: 1px 0 0 rgba(174, 174, 178, 0.10); }
.sc-name { flex: 1; font: 700 12px/1.25 var(--font); letter-spacing: 0.125em; text-transform: uppercase; color: var(--text); }
.sc-apply {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: rgba(174, 174, 178, 0.38);
  transition: color var(--dur-normal) var(--ease-entering), transform var(--dur-fast) var(--ease-entering);
}
.sc-apply svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-apply.is-charged { color: var(--temper); filter: drop-shadow(0 0 6px rgba(255, 107, 61, 0.45)); }
.sc-apply.is-charged svg { stroke: url(#temper) currentColor; }
.sc-apply:active { transform: scale(0.92); }
.sc-apply:disabled { cursor: default; }

.sc-bay { position: relative; margin-top: 14px; }
.sc-mouth { position: absolute; top: -9px; left: 0; right: 0; height: 9px; display: flex; justify-content: center; pointer-events: none; }
.sc-pull {
  width: 72px;
  height: 9px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(24, 24, 28, 0.9), rgba(10, 10, 10, 0.98));
  box-shadow: inset 0 0.5px 0 rgba(174, 174, 178, 0.18);
  clip-path: inset(0 0 0 0 round 9px 9px 0 0);
}
.sc-compartment { position: relative; width: 100%; touch-action: pan-y; cursor: ew-resize; }
.sc-compartment canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-figure { filter: url(#iron-grade); }
.sc-groove { height: 1.5px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.72) 90%, transparent); box-shadow: 0 1px 0 rgba(174, 174, 178, 0.10); }

.sc-lanes { display: flex; height: 140px; }
.sc-rib { width: 1.5px; flex: none; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72) 10%, rgba(0, 0, 0, 0.72) 90%, transparent); box-shadow: 0.5px 0 0 rgba(174, 174, 178, 0.10); }
.sc-lane { position: relative; flex: 1; min-width: 0; overflow: hidden; touch-action: pan-y; cursor: ns-resize; outline-offset: -2px; isolation: isolate; }
.sc-lane .sc-face { z-index: 0; }
.sc-lane .sc-rungs { z-index: 1; }
.sc-lane .sc-flanks { z-index: 2; }
.sc-lane .sc-ember { z-index: 3; }
.sc-lane .sc-label, .sc-lane .sc-suggest { z-index: 4; }
.sc-lane canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sc-rungs { position: absolute; inset: 0; }
.sc-rung {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  font: 700 24px/1.1 var(--font);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: transform;
  transform-origin: 50% 50%;
}
.sc-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: grid;
  place-items: center;
  font: 700 9px/1 var(--font);
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-shadow: 0 0.8px 0 rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.sc-suggest {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 8px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: -0.02em;
  color: var(--glow);
  text-shadow: 0 0 9px rgba(255, 69, 0, 0.45);
  animation: suggest-in var(--dur-normal) var(--ease-entering);
}
.sc-suggest:active { transform: scale(0.86); }
.sc-arrow { font-family: var(--font); font-weight: 700; }
.sc-suggest-value { background: linear-gradient(90deg, var(--core) 0%, var(--glow) 50%, var(--core) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2400ms linear 2; }
@keyframes suggest-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.sc-foot { background: linear-gradient(180deg, rgba(24, 24, 28, 0.55) 0%, rgba(15, 15, 18, 0.88) 55%, rgba(24, 24, 28, 0.40) 100%); }
.sc-readout { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 14px 20px; min-height: 50px; }
.sc-readout-label { font: 700 10px/1 var(--font); letter-spacing: 0.14em; color: var(--text-3); }
.sc-readout-values { display: inline-flex; align-items: center; gap: var(--s-2); }
.sc-readout-next { display: inline-flex; align-items: center; gap: 4px; font: 700 11px/1 var(--font-mono); color: var(--glow); text-shadow: 0 0 9px rgba(255, 69, 0, 0.45); animation: wipe-in var(--dur-normal) var(--ease-entering); }
@keyframes wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.sc-readout-value { font: 500 15px/1 var(--font); letter-spacing: -0.025em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sc-divider { display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(174, 174, 178, 0.12) 20%, rgba(174, 174, 178, 0.12) 80%, transparent 100%); }
.sc-modes { position: relative; display: flex; }
.sc-mode {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) 12px;
  font: 700 10px/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  text-shadow: 0 0.8px 0 rgba(255, 255, 255, 0.07);
  transition: color var(--dur-normal) var(--ease-entering), background-color var(--dur-fast) var(--ease-entering);
}
.sc-mode svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: color var(--dur-normal) var(--ease-entering); }
.sc-mode[data-mode="boost"] svg { fill: currentColor; stroke: none; }
.sc-mode:active { background: rgba(174, 174, 178, 0.05); }
.sc-mode[aria-pressed="true"] { color: rgba(255, 255, 255, 0.95); }
.sc-mode[data-mode="deload"][aria-pressed="true"] svg { color: var(--deload); }
.sc-mode[data-mode="boost"][aria-pressed="true"] svg { color: var(--core); }
.sc-split { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 25%, rgba(0, 0, 0, 0.6) 75%, transparent); box-shadow: 0.5px 0 0 rgba(174, 174, 178, 0.08); }

.setcard-still { display: none; width: 100%; max-width: 380px; border-radius: var(--r-l); }
html:not(.js) .setcard-still { display: block; }
html:not(.js) .setcard, html:not(.js) .exhibit-caption { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sc-suggest, .sc-readout-next, .sc-suggest-value { animation: none; }
  .sc-suggest-value { background: none; color: var(--glow); -webkit-background-clip: border-box; background-clip: border-box; }
}