/* HoloInvestor · Pokédex i retning 8 «Snur hvis» (body[data-page="pokedex"]).
   Lenkes bare fra pokedex.html. Svaret, neste steg og knappene har stilen sin i components.css; her står søket,
   lista med nummer og antall kort og luften rundt dem. Bare tokens, radius 0, ingen skygge og ingen nye hårstreker. */

body[data-page="pokedex"] [hidden] { display: none !important; }
body[data-page="pokedex"] main:focus { outline: none; }

/* Søket: feltet og knappen på én linje, og hintet under (som søkesiden) */
body[data-page="pokedex"] .pkm-sok { display: grid; gap: 6px; margin: 0 0 var(--lin4); }
body[data-page="pokedex"] .pkm-linje { display: flex; flex-wrap: wrap; gap: var(--lin2); align-items: stretch; }
body[data-page="pokedex"] .pkm-felt { flex: 1 1 200px; min-width: 0; max-width: none; }
body[data-page="pokedex"] .pkm-linje .knapp { flex: 0 0 auto; }
body[data-page="pokedex"] .pkm-sok .felt-hint { margin: 0; }

/* overskriften over lista, som over kortene på utforsk */
body[data-page="pokedex"] .pkm-tittel {
  margin: 0; font: 600 13px/28px var(--f-tall); letter-spacing: .06em; text-transform: uppercase; color: var(--blekk-2);
}
body[data-page="pokedex"] .pkm-katalog { padding-top: var(--lin4); }
body[data-page="pokedex"] .pkm-vis-alle { margin: var(--lin3) 0 0; }

/* Lista: nummeret og navnet som krysslenke til venstre, antallet kort til høyre, med en hårstrek under hver rad.
   Fra 720 px står radene i to kolonner, så en lang liste ikke blir en smal søyle på en bred skjerm. */
body[data-page="pokedex"] .pkm-liste {
  display: grid; gap: 0; margin: var(--lin3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linje);
}
body[data-page="pokedex"] .pkm-liste li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--lin1) var(--lin3);
  padding: 9px 0; border-bottom: 1px solid var(--linje); min-width: 0;
}
body[data-page="pokedex"] .pkm-liste li .krysslenke { flex: 1 1 0; min-width: 0; }
body[data-page="pokedex"] .pkm-nr {
  flex: 0 0 4ch; font: 400 15px/24px var(--f-tall); color: var(--blekk-2); font-variant-numeric: lining-nums tabular-nums;
}
body[data-page="pokedex"] .pkm-antall {
  font: 400 15px/24px var(--f-tall); color: var(--blekk-2); font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 720px) {
  body[data-page="pokedex"] .pkm-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--lin4); }
}

/* neste steg står i spaltebredden, som på utforsk */
body[data-page="pokedex"] .pkm-neste {
  width: calc(100% - 2 * var(--marg)); max-width: calc(1200px - 2 * var(--marg));
  margin-left: auto; margin-right: auto; margin-bottom: var(--lin5);
}