/* Однотонные участки движений: одинаковый фон всей строки в обеих темах. */
.movement-area-row,
.movement-area-legend__item {
  --movement-area-color: hsl(var(--movement-area-hue) 62% 58%);
  background: color-mix(in srgb, var(--movement-area-color) 15%, var(--surface));
}
.movement-area-row:hover {
  background: color-mix(in srgb, var(--movement-area-color) 23%, var(--surface));
}
.movement-area-row > td:first-child {
  box-shadow: inset 0.22rem 0 var(--movement-area-color);
}
.movement-area-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.movement-area-swatch {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 0.65rem;
  border-radius: 0.15rem;
  background: var(--movement-area-color);
}
.movement-area-distance { display: block; white-space: nowrap; }
.movement-area-overview p { margin: 0.25rem 0; }
.movement-area-overview .section-header { margin-bottom: 0; }
.movement-area-overview code { overflow-wrap: anywhere; }
.movement-area-legend summary { cursor: pointer; margin-top: 0.5rem; }
.movement-area-legend__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.movement-area-legend__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.65rem;
  color: var(--text);
}
.movement-area-legend__item code { font-size: 0.72rem; }
.movement-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.movement-actions .button { white-space: nowrap; }