/* ── Page wrapper ── */
.page-home {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

/* ── Site header ── */
.site-header {
  margin-bottom: var(--space-8);
}

.site-title {
  font-family: var(--font-body);
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.site-tagline {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Search section ── */
.search-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Results section ── */
.results-section {
  margin-top: var(--space-6);
}

.results-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  min-height: 16px;
}

/* ── Search hint ── */
.search-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-top: var(--space-2);
}

/* ── Results list ── */
.results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}


/* ── Move table ── */
.move-table {
  width: 100%;
  border-collapse: collapse;
}

@keyframes sprite-bounce {
  0%  { transform: translateY(0);    animation-timing-function: steps(1, end); }
  50% { transform: translateY(-5px); animation-timing-function: steps(1, end); }
}

.move-table__row--clickable,
.move-table__row--clickable td,
.move-table__row--clickable td * {
  cursor: pointer;
}

.move-table__row--clickable:hover td {
  background: var(--row-color, var(--bg-card));
}

.move-table tbody tr:hover .move-table__pokemon-link img {
  animation: sprite-bounce 0.35s infinite;
}

.move-table__chain + .move-table__chain > tr:first-child > td {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.move-table td {
  padding: var(--space-1) var(--space-3);
  vertical-align: middle;
}

.move-table__row--multi td {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.move-table td:first-child { padding-left: 0; }

.move-table thead th:first-child,
.move-table td:first-child {
  padding-left: 0;
}

.move-table__pokemon {
  white-space: nowrap;
}

.move-table__pokemon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.move-table__pokemon-link img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.move-table__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.move-table__pokemon-link:hover .move-table__name { color: var(--text-secondary); }

.move-table__row--ghost .move-table__name {
  color: var(--text-muted);
  font-weight: 400;
}

.move-table__methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.move-table__move {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}


.move-table__move-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.move-table__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.move-table__th {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
  padding: 0 var(--space-3) var(--space-2);
}

/* Inline TM info inside common panel */
.common-tm-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.common-tm-status {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.common-tm-status--repeatable { color: #52b87a; }
.common-tm-status--unique     { color: #d4884e; }

.common-tm-locs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.common-tm-loc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
}

.common-tm-loc img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* ── Empty state ── */
.empty-state {
  padding: var(--space-8) 0;
}

.empty-state__text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}