/* W2 · Тело — сравнение фото и адаптивные режимы. */
.sb-photo-toggle-row,
.sb-photo-delta-row,
#sb-photo-deltas,
.sb-photo-stats-head {
  display: flex;
  align-items: center;
}

.sb-photo-toggle-row {
  justify-content: center;
  gap: var(--w2-s2);
  margin-bottom: var(--w2-s4);
}

.sb-photo-toggle-row-view {
  margin-bottom: var(--w2-s5);
}

.sb-photo-side {
  text-align: center;
}

.sb-photo-side .sb-photo-eyebrow,
.sb-photo-timeline-head {
  margin-bottom: var(--w2-s3);
}

.sb-photo-side .sb-photo-meta {
  margin-top: var(--w2-s3);
}

.sb-photo-delta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 112px;
  gap: var(--w2-s3);
  text-align: center;
}

.sb-photo-delta-row {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--w2-s4);
  margin-top: var(--w2-s4);
}

#sb-photo-deltas {
  flex-wrap: wrap;
  gap: var(--w2-s2);
}

.sb-photo-stats-head {
  justify-content: space-between;
  margin-bottom: var(--w2-s4);
}

.sb-photo-stats-head .sb-card-title {
  margin-bottom: 0;
}

.sb-photo-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--w2-s1);
}

.sb-photo-stats-list .sb-side-row > span:first-child {
  color: var(--w2-text-muted);
  font: 500 14px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

.sb-photo-stats-list .sb-num {
  color: var(--w2-text);
  font: 700 14px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}

#sb-photo-right-content .sb-action-pill {
  width: 100%;
}

.sb-photo-cta > svg {
  width: var(--w2-s7);
  height: var(--w2-s7);
  fill: none;
  stroke: var(--w2-lime);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* PHOTO COMPARISON (center content) */
.sb-photo-compare-grid {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:var(--w2-s4);
  align-items:stretch;
  margin-bottom:var(--w2-s5)
}

.sb-photo-placeholder {
  aspect-ratio:3/4;
  background: var(--w2-surface-raised);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  cursor:pointer;
  position:relative;
  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;
  overflow:hidden
}

.sb-photo-placeholder:hover {
  border-color:rgba(200,241,53,.3);
  box-shadow:0 0 14px rgba(200,241,53,.1)
}

.sb-photo-placeholder.sb-photo-selecting {
  border:2px solid var(--w2-lime);
  box-shadow:0 0 20px rgba(200,241,53,.3);
  animation:sb-photo-pulse 1.2s ease-in-out infinite
}

@keyframes sb-photo-pulse {
  0%,100% {
    box-shadow:0 0 20px rgba(200,241,53,.3)
  }

  50% {
    box-shadow:0 0 32px rgba(200,241,53,.45)
  }

}

.sb-photo-selecting-hint {
  position:absolute;
  right: var(--w2-s2);
  bottom: var(--w2-s2);
  left: var(--w2-s2);
  padding:var(--w2-s2) var(--w2-s3);
  background:rgba(200,241,53,.2);
  backdrop-filter: blur(var(--w2-s2));
  border:1px solid rgba(200,241,53,.4);
  border-radius: var(--w2-s2);
  font:800  12px/1.2 'JetBrains Mono'; font-variant-numeric: tabular-nums;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:center
}

.sb-photo-cta {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--w2-s3);
  width:100%;
  height:100%;
  padding:var(--w2-s4);
  text-align:center
}

.sb-photo-cta-title {
  font:800  14px/1.2 'Inter'; font-variant-numeric: tabular-nums;
  color:rgba(200,241,53,.9)
}

.sb-photo-cta-sub {
  font:500  12px/1.3 'JetBrains Mono'; font-variant-numeric: tabular-nums;
  color: var(--w2-text-muted);
}

.sb-photo-timeline-item.picker-mode {
  border:1px dashed rgba(200,241,53,.3);
  animation:sb-photo-picker-glow 1.6s ease-in-out infinite
}

.sb-photo-timeline-item.picker-mode:hover {
  border-color:rgba(200,241,53,.8);
  box-shadow:0 0 14px rgba(200,241,53,.25)
}

@keyframes sb-photo-picker-glow {
  0%,100% {
    border-color:rgba(200,241,53,.3)
  }

  50% {
    border-color:rgba(200,241,53,.6)
  }

}

.sb-photo-timeline-item.active-start {
  border-color:var(--w2-lime);
  box-shadow:0 0 10px rgba(200,241,53,.35)
}

.sb-photo-timeline-item.active-latest {
  border-color:var(--w2-lime);
  box-shadow:0 0 10px rgba(200,241,53,.35)
}

/* Before/after slider */
.sb-photo-slider {
  position:relative;
  width:100%;
  max-width: 440px;
  margin:0 auto var(--w2-s4);
  aspect-ratio:3/4;
  border-radius: var(--w2-s4);
  overflow:hidden;
  border: 1px solid var(--w2-line);
  cursor:ew-resize;
  background:rgba(0,0,0,.4);
  user-select:none
}

.sb-photo-slider .sl-start-wrap,.sb-photo-slider .sl-latest-wrap {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat
}

.sb-photo-slider .sl-latest-wrap {
  clip-path:inset(0 0 0 50%);
  -webkit-clip-path:inset(0 0 0 50%)
}

.sb-photo-slider .sl-handle {
  position:absolute;
  top:0;
  bottom:0;
  width:3px;
  background:rgba(200,241,53,.75);
  box-shadow:0 0 16px rgba(200,241,53,.5);
  transform:translateX(-50%);
  cursor:ew-resize;
  z-index:3
}

.sb-photo-slider .sl-grip {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width: var(--w2-s8);
  height: var(--w2-s8);
  border-radius:50%;
  background:rgba(200,241,53,.9);
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 14px rgba(200,241,53,.5);
  cursor:ew-resize
}

.sb-photo-slider .sl-grip svg {
  width: var(--w2-s3);
  height: var(--w2-s3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.sb-photo-slider .sl-line {
  display:none
}

.sb-photo-slider .sl-label {
  position:absolute;
  top: var(--w2-s3);
  padding: var(--w2-s1) var(--w2-s3);
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  border-radius: var(--w2-s2);
  font: 800 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.1em;
  z-index:2
}

.sb-photo-slider .sl-label-start {
  left: var(--w2-s3);
  color:#fff
}

.sb-photo-slider .sl-label-latest {
  right: var(--w2-s3);
  color:var(--w2-lime)
}

.sb-photo-slider-meta {
  display:flex;
  justify-content:space-between;
  gap:var(--w2-s6);
  margin:var(--w2-s3) auto 0;
  padding:0 var(--w2-s1);
  max-width: 620px;
  white-space:nowrap
}

.sb-photo-slider-meta .sb-photo-meta {
  flex:0 0 auto
}

.sb-photo-slider-meta .sb-photo-meta:last-child {
  text-align: right;
}

.sb-photo-placeholder img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px
}

.sb-photo-empty-icon,
.sb-inline-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-photo-empty-icon {
  width: var(--w2-s7);
  height: var(--w2-s7);
  color: var(--w2-text-quiet);
}

.sb-inline-icon {
  width: var(--w2-s4);
  height: var(--w2-s4);
  margin-right: var(--w2-s1);
  vertical-align: -.18em;
}

.sb-photo-upload-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w2-s9);
  height: 64px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s2);
  background: var(--w2-surface-raised);
}

.sb-photo-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-photo-upload-list {
  display: flex;
  flex-direction: column;
  gap: var(--w2-s3);
}

.sb-photo-upload-row {
  display: flex;
  align-items: center;
  gap: var(--w2-s3);
  padding: var(--w2-s3);
  border: 1px solid var(--w2-line);
  border-radius: var(--w2-s3);
  background: var(--w2-surface-raised);
}

.sb-photo-upload-file {
  min-width: 0;
  flex: 1;
}

.sb-photo-upload-file > div:first-child {
  overflow: hidden;
  margin-bottom: var(--w2-s1);
  color: var(--w2-text);
  font: 700 12px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-photo-upload-file > div:last-child {
  color: var(--w2-text-quiet);
  font: 500 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}

.sb-photo-upload-angles {
  display: flex;
  flex-shrink: 0;
  gap: var(--w2-s1);
}

.sb-photo-diff-card {
  background:rgba(200,241,53,.06);
  border:1px solid rgba(200,241,53,.18);
  border-radius:8px;
  padding:var(--w2-s3) var(--w2-s3);
  text-align:center;
  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
}

.sb-photo-diff-card:hover {
  background:rgba(200,241,53,.1);
  border-color:rgba(200,241,53,.3);
  box-shadow:0 0 12px rgba(200,241,53,.1)
}

.sb-photo-diff-val {
  font:800  14px/1 'JetBrains Mono';
  color:var(--w2-lime);
  font-variant-numeric:tabular-nums
}

.sb-photo-diff-lbl {
  font:500  12px/1 'JetBrains Mono'; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.4);
  margin-top:var(--w2-s1);
  text-transform:uppercase;
  letter-spacing:.1em
}

.sb-photo-diff-range {
  font:500  12px/1.4 'JetBrains Mono';
  color:rgba(255,255,255,.3);
  text-align:center;
  margin-top:var(--w2-s3);
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  display:flex;
  flex-direction:column;
  gap:var(--w2-s1)
}

.sb-photo-timeline-strip {
  display:flex;
  gap:var(--w2-s3);
  overflow-x:auto;
  padding:var(--w2-s2) 0
}

.sb-photo-timeline-item {
  width: 72px;
  min-width: 72px;
  height: 96px;
  min-height: 96px;
  border-radius: var(--w2-s3);
  border: 1px solid var(--w2-line);
  overflow:hidden;
  cursor:pointer;
  flex-shrink:0;
  background: var(--w2-surface-raised);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  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;
  position:relative
}

.sb-photo-timeline-date {
  font:500  10px/1.2 'JetBrains Mono'; font-variant-numeric: tabular-nums;
  color:rgba(255,255,255,.4);
  margin-top:var(--w2-s1);
  text-align:center
}

.sb-photo-timeline-item.active .sb-photo-timeline-date {
  color:var(--w2-lime)
}

.sb-photo-timeline-item:hover {
  border-color:rgba(255,255,255,.15)
}

.sb-photo-timeline-item.active {
  border-color:var(--w2-lime);
  box-shadow:0 0 8px rgba(200,241,53,.3)
}

.sb-photo-timeline-item img {
  width:100%;
  /* Не проценты, а остаток от зоны даты: у дат с годом («1 фев 2025») две
     строки, при height:75% им оставалось меньше двух строк и низ срезался
     краем ячейки (M-27, приёмка 15.08.2026). */
  height: calc(100% - 34px);
  border-radius: var(--w2-s2) var(--w2-s2) 0 0;
  object-fit: cover;
  transition: opacity 200ms ease-out;
}

.sb-photo-timeline-item img.is-lazy {
  opacity: 0;
}

/* Один мягкий вход за загрузку; контроллер ставит .w2-no-enter при повторном визите. */
#screen-transform.active:not(.w2-no-enter) .sb-col-left,
#screen-transform.active:not(.w2-no-enter) .sb-col-mid,
#screen-transform.active:not(.w2-no-enter) .sb-col-right {
  opacity: 0;
  animation: w2BodyEnter 360ms cubic-bezier(.2, .9, .2, 1) forwards;
}

#screen-transform.active:not(.w2-no-enter) .sb-col-mid {
  animation-delay: 80ms;
}

#screen-transform.active:not(.w2-no-enter) .sb-col-right {
  animation-delay: 160ms;
}

@keyframes w2BodyEnter {
  from { opacity: 0; transform: translateY(var(--w2-s3)); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .screen.sb-body {
    display: block;
  }

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

  .sb-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .sb-grid::before,.sb-grid::after {
    display: none;
  }

  .sb-col {
    padding: var(--w2-s4);
    overflow-y: visible;
  }

  .sb-col-left,
  .sb-col-mid {
    border-bottom: 1px solid var(--w2-line);
  }

  .sb-body .sf-ppl-list,
  #sb-mode-btns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #sb-radar,
  .sb-radar-wrap {
    max-width: 640px;
  }

  .sb-meas-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sb-meas-table {
    min-width: 540px;
  }

  #sb-hero-rings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sb-photo-slider {
    max-width: 420px;
  }
}

@media (max-width: 500px) {
  /* Планшетное правило выше держит таблицу замеров на min-width:540px и включает
     боковую прокрутку карточки. На телефоне строки перестроены в карточный вид
     (design-w2-body-history.css) — распорка больше не нужна и мешала: карточка
     всё равно прокручивалась вбок на +200 (приёмка 15.08.2026). */
  #sb-meas-table {
    min-width: 0;
  }

  .sb-meas-card {
    overflow-x: hidden;
  }

  .sb-col {
    padding: var(--w2-s3);
  }

  .sb-body .sf-ppl-list,
  #sb-mode-btns {
    grid-template-columns: 1fr;
  }

  #sb-hero-rings,
  .sb-photo-compare-grid {
    grid-template-columns: 1fr;
  }

  .sb-photo-compare-grid > :nth-child(2) {
    min-width: 0;
  }

  .sb-hist-ev {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sb-hist-ev-val {
    grid-column: 2 / -1;
  }

  .sb-m2-grid {
    grid-template-columns: 1fr;
  }

  .sb-m2-field.full {
    grid-column: auto;
  }

  .sb-m2-footer,
  .sb-m2-del-actions {
    flex-direction: column;
  }

  .sb-m2-footer > *,
  .sb-m2-del-actions > * {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-transform *,
  .sb-pin-overlay *,
  .sb-m2-overlay *,
  .sb-m2-del-overlay * {
    scroll-behavior: auto;
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }

}