/* Компоненты ui/: штанга (.bb-), одометр (.odo-), шторка (.sheet-). Запасные токены — те же, что в style.css. */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms;
  --t-ui: 240ms;
  --t-sheet: 480ms;
  --bg: #000; --surface: #111; --surface-2: #1c1c1c; --line: #2a2a2a;
  --text: #fff; --muted: #b4b4b4; --faint: #8a8a8a; --primary: #fff; --on-primary: #000;
  --plate-25: #d12b2b; --plate-20: #1f5fd1; --plate-15: #f2c22c; --plate-10: #2fa44f;
  --plate-5: #f1f0ea; --plate-2_5: #2a2a2a; --plate-1_25: #b9bcc2; --bar: #c9ccd1;
}

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Штанга */
.bb { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bb-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bb-bar { fill: var(--bar); }
.bb-collar { fill: var(--bar); stroke: var(--line); stroke-width: 3; }
.bb-plate {
  transform: translateX(var(--x));
  transform-box: fill-box; transform-origin: center;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out);
}
.bb-enter, .bb-exit { transform: translateX(calc(var(--x) + var(--dx))) scale(.92); opacity: 0; }
.bb-plate[data-kg="5"] rect, .bb-plate[data-kg="2_5"] rect { stroke: var(--faint); stroke-width: 3; }
.bb-caption { margin: 0; font-size: 13px; line-height: 1.3; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

/* Одометр */
.odo { display: inline-flex; align-items: baseline; line-height: 1; font-variant-numeric: tabular-nums; }
.odo-digits { display: inline-flex; height: 1em; }
.odo-col, .odo-sep {
  display: inline-block; height: 1em; overflow: clip;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out);
}
.odo-col { min-width: 1ch; text-align: center; }
.odo-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform var(--t-ui) var(--ease-out); }
.odo-digit { display: block; height: 1em; line-height: 1; }
.odo-enter, .odo-exit { transform: scale(.9); opacity: 0; }

/* Шторка */
.sheet {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible;
}
.sheet[open] { display: flex; align-items: flex-end; justify-content: center; }
.sheet::backdrop { background: transparent; }
.sheet-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 62%, transparent); opacity: 0; transition: opacity var(--t-sheet) var(--ease-out); }
.sheet-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 86dvh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform var(--t-sheet) var(--ease-drawer);
}
.sheet-open .sheet-panel { transform: none; }
.sheet-open .sheet-scrim { opacity: 1; }
.sheet-closing .sheet-panel { transition-duration: 280ms; transition-timing-function: var(--ease-in-out); }
.sheet-closing .sheet-scrim { transition-duration: 280ms; transition-timing-function: var(--ease-in-out); }
.sheet-return .sheet-panel, .sheet-return .sheet-scrim { transition-duration: 240ms; transition-timing-function: var(--ease-out); }
.sheet-dragging .sheet-panel, .sheet-dragging .sheet-scrim { transition: none; }
.sheet-grip { display: grid; place-items: center; padding: 10px 0 2px; touch-action: none; }
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--line); }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 16px; touch-action: none; }
.sheet-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.sheet-close { width: 48px; height: 48px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-press); }
.sheet-close:active { transform: scale(.92); background: var(--surface-2); }
.sheet-x { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: flex; flex-direction: column; gap: 12px; padding: 6px 16px 18px; }

@media (prefers-reduced-motion: reduce) {
  .bb-plate, .odo-col, .odo-sep, .odo-strip, .sheet-panel, .sheet-close { transition-property: opacity, background-color; }
  .bb-enter, .bb-exit { transform: translateX(var(--x)); }
  .odo-enter, .odo-exit { transform: none; }
  .sheet-panel { transform: none; }
}