/* v20 — телефон: сцена прилипает сверху (набор всегда на виду), полка — карусель,
   внизу док «Протокол · Отримати КП», протокол и КП — нижние листы. */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.layout { padding: 0 16px; }
.intro { padding: 4px 0 14px; }
.kin { font-size: clamp(28px, 8.8vw, 38px); }
.lead { font-size: 15px; }

.stage {
  position: sticky; top: 0; z-index: 5;
  height: min(46svh, 380px); margin: 0 -16px; border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 6px 16px -10px rgb(0 0 0 / 0.35);
}
.hint-d { display: none; }

/* полка — горизонтальная карусель с привязкой, свайп по карточкам листает */
.shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 2px 16px 10px; scroll-padding: 0 16px;
  scrollbar-width: none; touch-action: pan-x pan-y;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf li { scroll-snap-align: start; }

.cta-d { display: none; }
.proof { display: none; }

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.dock-proof {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px;
  border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); font-weight: 600; font-size: 14px;
}
.dock-proof b { font-variant-numeric: tabular-nums; }
.dock .btn { width: 100%; }

.sheet {
  position: fixed; inset: auto 0 0 0; max-height: 82svh; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom));
  animation: up 0.32s cubic-bezier(.2,.8,.2,1);
}
.sheet#sheet { max-height: 54svh; z-index: 30; box-shadow: 0 -10px 30px rgb(0 0 0 / 0.18); }
.sheet#sheet::backdrop { background: rgb(0 0 0 / 0.12); }
@keyframes up { from { transform: translateY(100%); } }
.sheet-h h2 { font-size: 18px; }

.swatches { gap: 6px; }
.sw { width: 42px; height: 42px; }