/**
 * Transform / Align / Layer Order / Project rail flyouts. Unlike the Layers panel
 * and the layer-property popovers, these are one-shot action pickers
 * (rotate, flip, align, reorder each complete instantly on click) rather
 * than an ongoing editing session -- so deliberately NOT draggable or
 * persistent; they close after a click, same as a normal dropdown menu.
 * Reuses header.css's .s2h-menu-item/.s2h-menu-sep row styling (already
 * built for the project/hamburger menus, position-independent) with a new
 * position:fixed container positioned via JS against each rail icon,
 * rather than header.css's .s2h-menu (which anchors relative to
 * .s2h-left specifically).
 */

.s2h-rail-flyout {
  position: fixed;
  width: 208px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--s2h-shadow-lg);
  padding: 6px;
  z-index: 9050;
}
.s2h-rail-flyout[hidden] { display: none; }

.s2h-align-flyout { width: 176px; padding: 10px; }
.s2h-align-label {
  padding: 2px 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.s2h-align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.s2h-align-grid .tool-button {
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  flex-direction: column;
  justify-content: center;
}
.s2h-align-grid .tool-button-label { font-size: 10px; }