/* ---- Sort select ---- */
.sort-select {
  padding: 3px 8px;
  background: var(--border);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color var(--transition);
}
.sort-select:focus { outline: none; border-color: var(--accent); }

/* ---- Ink colors ---- */
.ink-dot { width: 10px; height: 10px; border-radius: 50%; }
.ink-dot-amber    { background: var(--ink-amber); }
.ink-dot-amethyst { background: var(--ink-amethyst); }
.ink-dot-emerald  { background: var(--ink-emerald); }
.ink-dot-ruby     { background: var(--ink-ruby); }
.ink-dot-sapphire { background: var(--ink-sapphire); }
.ink-dot-steel    { background: var(--ink-steel); }

/* ---- Touch drag overlay ---- */
.touch-drag-overlay {
  position: fixed;
  z-index: 998;
  background: color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 2px var(--blue);
  pointer-events: none;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}