/*
 * Move list (<hokito-move-list>, web/src/ui/move-list.js). Tokens only.
 *
 * Desktop: numbered turns in a scrolling column inside the side panel.
 * Phone (below 720 px): a compact horizontal strip that scrolls on its own,
 * with the current move centred; the page itself never scrolls sideways
 * (FR-021). The current move is bold, filled and marked with a triangle, so
 * it does not rely on colour alone (NFR-008).
 */

hokito-move-list,
.move-list {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.move-list__nav,
.move-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.move-list__step {
  flex: 1 1 0;
}

.move-list__nav button,
.move-list__actions button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.move-list__turns {
  display: grid;
  gap: var(--space-1);
  max-height: 24rem;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overscroll-behavior: contain;
}

.move-list__turn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.move-list__number {
  min-width: 3ch;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.move-list__entry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 0;
  min-width: 0;
}

.move-list__move {
  min-height: var(--touch-target);
  padding: var(--space-1) var(--space-2);
  border-color: transparent;
  background: transparent;
  font-family: var(--font-mono);
}

.move-list__move[aria-current] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 700;
}

.move-list__move[aria-current]::before {
  content: "\25B8";
}

.move-list__move[data-replacing] {
  border: 2px dashed var(--color-danger);
}

.move-list__extras:empty {
  display: none;
}

.move-list__action--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 600;
}

.move-list [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.move-list__note:empty {
  display: none;
}

@media (max-width: 719.98px) {
  .move-list__turns {
    display: flex;
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .move-list__turn,
  .move-list__entry {
    flex: 0 0 auto;
  }

  .move-list__turn {
    scroll-snap-align: center;
  }
}