.float-bar {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  max-width: calc(100% - var(--sp-150) * 2 - var(--stage-cover, 0px) - var(--stage-cover-left, 0px));
  pointer-events: none;
  z-index: 2;
}
.float-bar.top-left { top: var(--sp-150); left: calc(var(--sp-150) + var(--stage-cover-left, 0px)); }
.float-bar.bottom-left { bottom: var(--sp-150); left: calc(var(--sp-150) + var(--stage-cover-left, 0px)); }
.float-bar.top-right { top: var(--sp-150); right: calc(var(--sp-150) + var(--stage-cover, 0px));
                        justify-content: flex-end; }
.float-bar.bottom-right { bottom: var(--sp-150); right: calc(var(--sp-150) + var(--stage-cover, 0px));
                           justify-content: flex-end; }
/* A pill at the bottom centre of a tile (15.530: «Редактировать» on a cover) */
.float-bar.bottom-center { bottom: var(--sp-150); left: 50%; transform: translateX(-50%); justify-content: center; }
.float-bar.top-left:has(~ .float-bar.top-right) {
  max-width: calc(100% - var(--sp-150) * 3 - var(--h-btn) * 2 - var(--sp-075)
                 - var(--stage-cover, 0px) - var(--stage-cover-left, 0px));
}
.float-group {
  display: flex;
  gap: var(--sp-075);
}
.float-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--h-btn);
  height: var(--h-btn);
  padding: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--sh-raised);
  pointer-events: auto;
  cursor: pointer;
}
.float-btn:hover:not([disabled]) { background: var(--acc-weak); color: var(--acc-ink); }
.float-btn.on { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); }
.float-btn[disabled] { color: var(--ink-dis); cursor: default; }
.float-reveal { display: flex; flex-direction: row-reverse; gap: var(--sp-075); }
.float-reveal > .float-btn.more {
  opacity: 0; visibility: hidden; transform: translateX(var(--sp-075));
  transition: opacity var(--dur-pop) var(--ease-out) .25s,
              transform var(--dur-pop) var(--ease-out) .25s,
              visibility 0s linear .41s;
}
.float-reveal:hover > .float-btn.more,
.float-reveal:focus-within > .float-btn.more {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
@media (hover: none) {
  .float-reveal > .float-btn.more { opacity: 1; visibility: visible; transform: none; }
}
html[data-motion="calm"] .float-reveal > .float-btn.more { transition: none; }
.float-reveal.over { position: relative; flex-direction: row; }
.float-reveal-more {
  position: absolute; left: 0; top: calc(100% + var(--sp-075)); z-index: 2;
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--sp-075) * -1));
  transition: opacity var(--dur-pop) var(--ease-out) .25s,
              transform var(--dur-pop) var(--ease-out) .25s,
              visibility 0s linear .41s;
}
.float-reveal.over:hover > .float-reveal-more,
.float-reveal.over:focus-within > .float-reveal-more {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
html[data-motion="calm"] .float-reveal-more { transition: none; }
.float-reveal-more.float-group.joined {
  padding: var(--sp-075);
  border-radius: var(--r);
  box-shadow: var(--sh-overlay);
}
.float-btn.text {
  width: auto;
  grid-auto-flow: column;
  gap: var(--sp-075);
  padding: 0 var(--sp-100);
  font-size: var(--fs-s);
  white-space: nowrap;
}
.float-group.joined {
  gap: var(--sp-025);
  padding: var(--sp-025);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  box-shadow: var(--sh-raised);
  pointer-events: auto;
}
.float-group.joined > .float-btn, .float-group.joined > .float-reveal > .float-btn {
  height: calc(var(--h-btn) - var(--sp-025) * 2 - var(--bw) * 2);
  border: none;
  border-radius: calc(var(--r-s) - var(--sp-025));
  background: none;
  box-shadow: none;
}
.float-group.joined > .float-btn:not(.text), .float-group.joined > .float-reveal > .float-btn {
  width: calc(var(--h-btn) - var(--sp-025) * 2 - var(--bw) * 2);
}
.float-group.joined > .float-btn:hover:not([disabled]), .float-group.joined > .float-reveal > .float-btn:hover:not([disabled]) { background: var(--acc-weak); }
.float-group.joined > .float-btn.on, .float-group.joined > .float-reveal > .float-btn.on,
.float-group.joined > .float-btn.on:hover:not([disabled]), .float-group.joined > .float-reveal > .float-btn.on:hover:not([disabled]) {
  background: var(--acc); color: var(--acc-fg);
}
.float-sep {
  flex: none;
  align-self: stretch;
  width: var(--bw);
  margin: var(--sp-075) var(--sp-050);
  background: var(--line);
}
.float-toolbar {
  position: absolute;
  top: var(--sp-150);
  left: calc(var(--sp-150) + var(--stage-cover-left, 0px));
  right: calc(var(--sp-150) + var(--stage-cover, 0px));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-100) var(--sp-150);
  pointer-events: none;
}
.float-toolbar-start, .float-toolbar-end { flex: none; display: flex; min-width: 0; max-width: 100%; }
.float-toolbar-end { gap: var(--sp-075); }
.float-toolbar-start > .float-group.joined, .float-toolbar-end > .float-group.joined { flex-wrap: wrap; }
.float-toolbar-middle {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.float-toolbar-middle > * { max-width: 100%; pointer-events: auto; }
.float-badge {
  position: absolute;
  top: calc(-1 * var(--sp-075));
  right: calc(-1 * var(--sp-075));
  min-width: var(--sp-200);
  height: var(--sp-200);
  padding: 0 var(--sp-050);
  border-radius: var(--r-full);
  background: var(--acc);
  color: var(--acc-fg);
  font-size: var(--fs-xs);
  text-align: center;
}

.float-panel {
  position: absolute;
  z-index: 2;
  max-width: min(280px, 40%);
  max-height: 50%;
  overflow: auto;
  padding: var(--sp-100);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-raised);
}
.float-panel:empty { display: none; }
.float-panel.bottom-right { right: calc(var(--sp-150) + var(--stage-cover, 0px)); bottom: var(--sp-150); }
.float-panel.bottom-left { left: calc(var(--sp-150) + var(--stage-cover-left, 0px)); bottom: var(--sp-150); }

.float-lasso { --pop-origin: left center; }
.float-lasso > .segment {
  height: var(--h-btn);
  background: linear-gradient(var(--a-200), var(--a-200)), var(--card);
  box-shadow: 0 0 0 var(--bw) var(--line);
}
.float-bar:has(> .float-lasso.pop-live) { z-index: 4; }
.float-lasso > .segment.icons > button { min-width: var(--h-btn); padding: 0; }