/* W2 · Тело — показатели, события, фото-прогресс и диалоги. */
#screen-transform,
#screen-transform * {
  font-variant-numeric: tabular-nums;
}

#screen-transform {
  color: var(--w2-text);
  background: var(--w2-bg);
  font-family: 'Inter', sans-serif;
}

#screen-transform :is(.sb-card-title, .sf-settings-head, .sb-hist-day-head) {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sb-body .sf-settings-head {
  display: flex;
  align-items: center;
  gap: var(--w2-s2);
  margin-bottom: var(--w2-s3);
  color: var(--w2-text-quiet);
}

.sb-body .sf-settings-head::before {
  content:'';
  width: var(--w2-s1);
  height: var(--w2-s1);
  border-radius: 50%;
  background: var(--w2-text-quiet);
}

.sb-body .sf-col-div {
  height:1px;
  background: var(--w2-line);
  margin: var(--w2-s5) 0;
}

.sb-last-measurement {
  display: grid;
  gap: var(--w2-s2);
  padding: var(--w2-s3);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s3);
  background: var(--w2-surface-raised);
}

.sb-last-measurement > div:first-child,
.sb-last-measurement > div:last-child {
  color: var(--w2-text-quiet);
  font: 700 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.sb-last-measurement > div:first-child {
  text-transform: uppercase;
}

.sb-last-measurement > div:nth-child(2) {
  color: var(--w2-text);
  font-size: 14px;
  font-weight: 700;
}

.sb-body .sf-ppl-list {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3)
}

.sb-body .sf-ppl-row {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s4);
  min-height: var(--w2-s9);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s3);
  background: var(--w2-surface);
  cursor: pointer;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.sb-body .sf-av-wrap {
  position:relative;
  width:var(--w2-s7);
  height:var(--w2-s7);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center
}

.sb-body .sf-av-ring {
  position:absolute;
  inset: calc(-1 * var(--w2-s1));
  width: calc(100% + var(--w2-s2));
  height: calc(100% + var(--w2-s2));
  transform:rotate(-90deg);
  overflow:visible;
  pointer-events:none
}

.sb-body .sf-av-ring-bg {
  fill:none;
  stroke:rgba(200,241,53,.09);
  stroke-width:2.2
}

.sb-body .sf-av-ring-fg {
  fill:none;
  stroke:var(--w2-lime);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-dasharray:100.531;
  stroke-dashoffset:100.531;
  filter:drop-shadow(0 0 3px rgba(200,241,53,.55))
}

.sb-body .sf-ppl-row:not(.active) .sf-av-ring {
  display:none
}

.sb-body .sf-ppl-row.active .sf-av-ring-fg {
  animation:sfAvRingFill 1.4s cubic-bezier(.22,.9,.28,1) .2s forwards
}

.sb-body .sf-av {
  position:relative;
  z-index:1;
  width:var(--w2-s7);
  height:var(--w2-s7);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font:800  14px/1 'Inter'; font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
  background: var(--w2-surface-raised);
  border: 1px solid var(--w2-line);
  color: var(--w2-text-muted);
}

.sb-body .sf-ppl-body {
  display:flex;
  flex-direction:column;
  flex:1;
  gap:var(--w2-s1);
  min-width:0
}

.sb-body .sf-ppl-name {
  font:800  14px/1 'Inter'; font-variant-numeric: tabular-nums;
  color: var(--w2-text);
  letter-spacing:0
}

.sb-body .sf-ppl-bw {
  font:500  12px/1 'JetBrains Mono'; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--w2-text-quiet);
}

.sb-body .sf-ppl-row:hover {
  background: var(--w2-surface-raised);
  border-color: rgba(255, 255, 255, .14);
}

.sb-body .sf-ppl-row.active {
  border-color: rgba(200, 241, 53, .3);
  background: rgba(200, 241, 53, .055);
  box-shadow: inset 3px 0 0 var(--w2-lime);
}

.sb-body .sf-ppl-row.active .sf-av {
  background: rgba(200, 241, 53, .12);
  border-color: var(--w2-lime);
  color: var(--w2-lime);
  box-shadow: 0 0 12px rgba(200, 241, 53, .18);
}

.sb-body .sf-ppl-row.vlad .sf-av {
  border-radius: var(--w2-s2);
}

.sb-body .sf-ppl-row.active .sf-ppl-bw {
  color:rgba(200,241,53,.65)
}

.screen.sb-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - var(--w2-s9));
  margin: 0;
  padding: 0;
}

.screen.sb-body:not(.active) {
  display:none
}

.sb-grid {
  display:grid;
  grid-template-columns: minmax(224px, 16vw) minmax(0, 1fr) minmax(264px, 19vw);
  overflow:hidden;
  position:relative;
  flex:1 1 0;
  min-height:0
}

.sb-grid::before,.sb-grid::after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background: var(--w2-line);
  z-index:5;
  pointer-events:none
}

.sb-grid::before {
  left:16vw
}

.sb-grid::after {
  right:19vw
}

/* Columns — same padding as training */
.sb-col {
  padding: var(--w2-s5);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent
}

.sb-col-mid {
  padding: var(--w2-s5) var(--w2-s7);
}

/* Mode toggle buttons */
#sb-mode-btns {
  display:flex;
  flex-direction:column;
  gap:var(--w2-s3)
}

.sb-mode-btn {
  display:flex;
  align-items:center;
  gap:var(--w2-s3);
  padding:var(--w2-s3) var(--w2-s4);
  min-height: var(--w2-s9);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s3);
  background: var(--w2-surface);
  cursor:pointer;
  transition:color 200ms ease-out,background-color 200ms ease-out,border-color 200ms ease-out,box-shadow 200ms ease-out,transform 200ms ease-out,opacity 200ms ease-out;
  font:800  14px/1 'JetBrains Mono'; font-variant-numeric: tabular-nums;
  color: var(--w2-text-muted);
  margin-bottom: var(--w2-s1);
}

.sb-mode-btn .sb-mode-ico {
  width: var(--w2-s6);
  height: var(--w2-s6);
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.sb-mode-copy {
  min-width: 0;
  flex: 1;
}

.sb-mode-label {
  color: var(--w2-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.sb-mode-trail,
.sb-mode-pin {
  display: inline-flex;
  align-items: center;
}

.sb-mode-trail {
  gap: var(--w2-s2);
  margin-left: auto;
}

.sb-mode-pin {
  gap: var(--w2-s1);
  color: var(--w2-text-quiet);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.sb-mode-pin svg,
.sb-mode-arrow {
  width: var(--w2-s4);
  height: var(--w2-s4);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-mode-arrow {
  color: var(--w2-text-quiet);
  transition: color 180ms ease-out, transform 180ms ease-out;
}

.sb-mode-btn.active .sb-mode-arrow {
  color: var(--w2-lime);
  transform: translateX(var(--w2-s1));
}

.sb-mode-btn:hover {
  background: var(--w2-surface-raised);
  border-color: rgba(255, 255, 255, .14);
}

.sb-mode-btn.active {
  border-color: rgba(200, 241, 53, .3);
  background: rgba(200, 241, 53, .055);
  box-shadow: inset 3px 0 0 var(--w2-lime);
  color: var(--w2-lime);
}

.sb-card {
  background: var(--w2-surface);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s5);
  padding: var(--w2-s4);
  margin-bottom: var(--w2-s4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 12px 28px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition:color 200ms ease-out,background-color 200ms ease-out,border-color 200ms ease-out,box-shadow 200ms ease-out,transform 200ms ease-out,opacity 200ms ease-out
}

.sb-card:hover {
  border-color: rgba(200, 241, 53, .18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 14px 32px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.sb-side-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--w2-s1) var(--w2-s1);
  border-radius:4px;
  transition:background .2s
}

.sb-side-row:hover {
  background:rgba(200,241,53,.05)
}

.sb-num {
  font-variant-numeric:tabular-nums
}

.sb-log-history {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  min-height: var(--w2-s8);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s2);
  background: var(--w2-surface-raised);
  color: var(--w2-text-muted);
  font:500  14px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  transition:color 180ms ease-out,background-color 180ms ease-out,border-color 180ms ease-out,box-shadow 180ms ease-out,transform 180ms ease-out,opacity 180ms ease-out;
  box-sizing:border-box
}

.sb-log-history:hover {
  border-color:rgba(200,241,53,.3);
  background:rgba(200,241,53,.06);
  color:var(--w2-lime);
  box-shadow:0 0 10px rgba(200,241,53,.08)
}

.sb-log-history svg {
  stroke:currentColor;
  width:var(--w2-s4);
  height:var(--w2-s4)
}
@media(max-width:500px) {
  .sb-body .sb-ring-goal-input {
    min-width:calc(var(--w2-s9) + var(--w2-s2));
    min-height:var(--w2-s8)
  }

  .sb-body .sb-meas-eye {
    min-width:var(--w2-s8);
    min-height:var(--w2-s8);
    justify-content:center
  }

  .sb-body .sb-meas-sort {
    min-height:var(--w2-s8)
  }
}