.actx {
  position: fixed;
  z-index: 400;
  min-width: 190px;
  max-height: calc(100vh - var(--sp-200));
  overflow: auto;
  padding: var(--sp-075);
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-overlay);
}
.actx button:not(.actx-slot):not(.segment > button) {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  border-radius: calc(var(--r) - var(--sp-075));
  padding: var(--sp-100) var(--sp-150);
  font-size: var(--fs-s);
  color: var(--ink);
}
.actx button:not(.actx-slot):not(.segment > button):hover:not([disabled]),
.actx-row:hover > button,
.actx button.open:not(.actx-slot),
.actx-row:has(:focus-visible) > button { background: var(--acc-weak); color: var(--acc-ink); }
.actx button:not(.actx-slot):not(.segment > button)[disabled] { color: var(--ink-dis); }
.actx button.danger:not(.actx-slot):not(.segment > button) { color: var(--danger-ink); }
.actx button.danger:not(.actx-slot):not(.segment > button):hover:not([disabled]) {
  background: var(--danger-weak); color: var(--danger-ink);
}
.actx-sep {
  height: var(--bw);
  margin: var(--sp-075) var(--sp-100);
  background: var(--line);
}
.actx-head {
  padding: var(--sp-100) var(--sp-150) var(--sp-050);
  font-size: var(--fs-xs);
  color: var(--ink3);
}
.actx-node { padding: var(--sp-050) var(--sp-100); }
.actx-node:has(> :empty:only-child) { display: none; }
.actx-toggle > .switch { flex: none; pointer-events: none; }
.actx-label { flex: 1 1 auto; min-width: 0; }
.actx-warn { flex: none; display: inline-flex; color: var(--warn-ink); }
.actx button > .ic { flex: none; color: var(--ink2); }
.actx button:hover:not([disabled]) > .ic { color: inherit; }
.actx-keys { flex: none; padding-left: var(--sp-300); color: var(--ink3); font-size: var(--fs-xs);
             font-variant-numeric: tabular-nums; }
.actx-value { flex: none; display: inline-flex; align-items: center; gap: var(--sp-050);
              padding-left: var(--sp-300); color: var(--ink3); font-variant-numeric: tabular-nums; }
.actx:has(.opt-line) { min-width: 320px; }
.actx-node .opt-line { padding: var(--sp-075) var(--sp-075) var(--sp-100); }
.actx-node .segment { display: flex; width: 100%; }
.actx-node .segment > button { flex: 1 1 auto; }
.actx-node > .dash-facts { max-width: 320px; }
.actx-swatch {
  flex: none;
  width: var(--sp-150);
  height: var(--sp-150);
  border-radius: var(--r-full);
}
/* The chosen item — a check (15.641, 23.10: «поменяй галочку выбора во всём интерфейсе деоса на галочку
   непосредственно, а не на точку») */
.actx-check { display: inline-grid; flex: none; place-items: center; color: var(--acc-ink); }

.actx-row { position: relative; display: flex; align-items: center; }
.actx-row > button { padding-right: var(--sp-150); }
.actx-tail {
  position: absolute;
  right: var(--sp-075);
  top: 50%;
  display: flex;
  gap: var(--sp-050);
  transform: translate(0, -50%);
}
.actx-row:not(:hover) > .actx-tail > .actx-slot:not(.active) { display: none; }
html[data-by="key"] .actx-row:has(:focus-visible) > .actx-tail > .actx-slot,
.actx.measuring .actx-row > .actx-tail > .actx-slot { display: grid; }
.actx.measuring .actx-label, .actx.measuring .actx-tail { flex: none; width: max-content; }
@starting-style {
  .actx-tail > .actx-slot { opacity: 0; transform: scale(.6); }
}
.actx-slot {
  display: grid;
  place-items: center;
  width: var(--h-btn-sm);
  height: var(--h-btn-sm);
  padding: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-full);
  background: var(--slot, var(--card));
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform var(--dur-pop) var(--ease-out), opacity var(--dur-pop) var(--ease-out);
}
.actx-slot.on-dark { color: var(--ink-on-dark); border-color: transparent; }
.actx-slot.on-light { color: var(--ink-on-light); border-color: transparent; }
.actx-slot:hover:not([disabled]) { transform: scale(1.12); }
.actx-slot.active { box-shadow: 0 0 0 var(--bw) var(--card), 0 0 0 calc(var(--bw) * 3) var(--acc); }
.actx-slot.add { border-style: dashed; background: var(--card); color: var(--ink2); }
.actx-slot.born { animation: actx-born var(--dur-fold) var(--ease-out); }
@keyframes actx-born {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
[data-motion="calm"] .actx-tail,
[data-motion="calm"] .actx-slot { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .actx-tail, .actx-slot { transition: none; animation: none; }
}