.series-order-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.1rem;
  padding: .8rem 1rem;
  color: var(--muted);
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / .08), transparent 60%), rgb(var(--surface-rgb) / .72);
  border-radius: 1rem;
  font-size: .74rem;
}

.series-order-guide p { margin: 0; }
.series-order-guide strong { color: var(--ink); }
.series-order-guide-icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent-ink); border-radius: 50%; background: var(--fire); font-size: 1rem; }
.series-order-status { min-width: 7.5rem; color: var(--faint); text-align: right; }
.series-order-status.is-saving { color: var(--accent-light); }
.series-order-status.is-success { color: var(--success); }
.series-order-status.is-error { color: #ff9fb8; }

.series-grid[data-series-order-list] .series-card { position: relative; }
.series-order-handle {
  position: absolute;
  z-index: 6;
  top: .65rem;
  right: .65rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  border: 1px solid rgb(255 255 255 / .2);
  background: rgb(var(--canvas-rgb) / .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgb(0 0 0 / .3);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.series-order-handle:hover { color: var(--accent-ink); border-color: transparent; background: var(--sun); }
.series-order-handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.series-order-handle:active { cursor: grabbing; }
.series-order-handle svg { width: 19px; fill: currentColor; }
.series-card.is-dragging { opacity: .46; transform: scale(.985); }
.series-card.is-drag-target { border-color: var(--sun); box-shadow: 0 0 0 2px rgb(var(--sun-rgb) / .35); }
.series-grid.is-saving .series-order-handle { cursor: progress; }

@media (max-width: 700px) {
  .series-order-guide { grid-template-columns: auto minmax(0, 1fr); }
  .series-order-status { grid-column: 2; min-width: 0; text-align: left; }
}

@media (max-width: 540px) {
  .series-order-guide { align-items: start; padding: .7rem; font-size: .65rem; }
  .series-order-handle { top: .45rem; right: .45rem; width: 44px; height: 44px; }
}