/* Pokemon IV calculator - scoped to .ivc, uses the wiki's own custom properties. */
.ivc { margin: 1.2rem 0; font-size: .95rem; }

.ivc-controls,
.ivc-ivs {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: flex-end;
  padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--content-bg); margin-bottom: .7rem;
}
.ivc label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.ivc label input[type="text"],
.ivc label input[type="number"] {
  font: inherit; padding: .35rem .5rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text);
}
.ivc label input[type="text"] { min-width: 15rem; }
.ivc label input[type="number"] { width: 5rem; }
.ivc label input[type="range"] { width: 16rem; accent-color: var(--accent); }
.ivc-mega { flex-direction: row !important; align-items: center; gap: .45rem !important; }

.ivc-presets { display: flex; gap: .4rem; flex-wrap: wrap; }
.ivc-presets button,
.ivc-mon {
  font: inherit; font-size: .85rem; padding: .3rem .6rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text);
}
.ivc-presets button:hover,
.ivc-mon:hover { border-color: var(--accent); color: var(--accent); }
.ivc-mon.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.ivc-list {
  display: flex; flex-wrap: wrap; gap: .35rem; max-height: 8.5rem; overflow-y: auto;
  padding: .6rem; border: 1px solid var(--border-soft); border-radius: var(--radius);
  margin-bottom: .7rem;
}
.ivc-none { color: var(--muted); font-style: italic; }

.ivc-summary {
  padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: .9rem;
  background: var(--content-bg); border: 1px solid var(--border);
}

.ivc-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ivc-panels h3 { margin: 0 0 .4rem; font-size: 1rem; }
.ivc-panels table { width: 100%; border-collapse: collapse; }
.ivc-panels td { padding: .28rem .5rem; border-bottom: 1px solid var(--border-soft); }
.ivc-panels td:last-child {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 700; white-space: nowrap;
}

@media (max-width: 760px) {
  .ivc-panels { grid-template-columns: 1fr; }
  .ivc label input[type="range"] { width: 100%; }
  .ivc label input[type="text"] { min-width: 0; width: 100%; }
}