/* Actions slide left from the anchored FAB and return in reverse order. */
.portal-quick-actions {
  --action-step: calc(var(--portal-fab-size) + var(--space-2));
  position: relative; width: var(--portal-fab-size); height: var(--portal-fab-size);
  transition: width 380ms cubic-bezier(.34,1.2,.64,1);
}
.portal-quick-actions.is-open { width: calc(var(--portal-fab-size) + var(--actions-count, 0) * var(--action-step)); }
.portal-quick-actions[hidden], .portal-quick-actions__menu[hidden] { display: none; }
.portal-quick-actions__toggle {
  position: absolute; right: 0; top: 0; z-index: 1; display: grid; place-items: center;
  width: var(--portal-fab-size); height: var(--portal-fab-size); padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--card-surface); color: var(--muted);
  box-shadow: var(--shadow-soft); cursor: pointer;
  transition: transform var(--motion-fast);
}
.portal-quick-actions__toggle:active { transform: scale(.94); }
.portal-quick-actions__toggle:disabled { opacity: .6; cursor: wait; }
.portal-quick-actions__toggle svg {
  width: var(--portal-fab-icon-size); height: var(--portal-fab-icon-size); fill: currentColor; stroke: none;
  transition: transform 380ms cubic-bezier(.34,1.2,.64,1);
}
.portal-quick-actions__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.portal-quick-actions__menu { position: absolute; inset: 0; pointer-events: none; }
.portal-quick-actions__action {
  position: absolute; right: 0; top: 0; width: var(--portal-fab-size); height: var(--portal-fab-size);
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit;
  cursor: pointer; pointer-events: none; opacity: 0; transform-origin: center;
  transform: translate3d(0, 0, 0) scale(.4);
  transition: transform 380ms cubic-bezier(.34,1.2,.64,1), opacity 380ms ease-out;
  transition-delay: calc(var(--action-close-order) * 30ms);
}
.portal-quick-actions.is-open .portal-quick-actions__action {
  pointer-events: auto; opacity: 1;
  transform: translate3d(calc((var(--action-order) + 1) * var(--action-step) * -1), 0, 0) scale(1);
  transition-delay: calc(var(--action-order) * 50ms);
}
.portal-quick-actions__circle {
  display: grid; place-items: center; width: var(--portal-fab-size); height: var(--portal-fab-size); flex: 0 0 var(--portal-fab-size);
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card-surface); color: var(--muted);
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-fast);
}
.portal-quick-actions__circle svg { display: block; width: var(--portal-fab-icon-size); height: var(--portal-fab-icon-size); fill: currentColor; stroke: none; }
.portal-quick-actions__icon {
  position: relative; display: grid; place-items: center;
  width: var(--portal-fab-icon-size); height: var(--portal-fab-icon-size);
}
.portal-quick-actions.is-open .portal-quick-actions__action:focus-visible .nav__icon-layer--fill {
  clip-path: ellipse(140% 160% at 50% 100%);
}
@media (hover: hover) and (pointer: fine) {
  .portal-quick-actions.is-open .portal-quick-actions__action:hover .nav__icon-layer--fill {
    clip-path: ellipse(140% 160% at 50% 100%);
  }
}
.portal-quick-actions__action::after {
  content: attr(aria-label); position: absolute; bottom: calc(100% + var(--space-2)); left: 50%;
  width: max-content; max-width: 180px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: var(--card-surface); color: var(--ink);
  font-size: var(--type-caption); font-weight: var(--weight-medium); line-height: 1.4; text-align: center;
  box-shadow: var(--shadow-soft); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 0);
}
.portal-quick-actions.is-open .portal-quick-actions__action:is(:hover, :focus-visible)::after {
  opacity: 1; visibility: visible;
}
.portal-quick-actions__action:active .portal-quick-actions__circle { transform: scale(.94); }
.portal-quick-actions__action:focus-visible { outline: none; }
.portal-quick-actions__action:focus-visible .portal-quick-actions__circle,
.portal-quick-actions__toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--space-1); }
@media (prefers-reduced-motion: reduce) {
  .portal-quick-actions, .portal-quick-actions__toggle, .portal-quick-actions__toggle svg,
  .portal-quick-actions__action, .portal-quick-actions__action::after, .portal-quick-actions__circle { transition: none; }
}
