/* ─────────────────────────────────────────────────────────────────
   kortkoll, appen i ramverkets språk

   Laddas EFTER appens egen <style>, så den här filen vinner. Det är med
   flit: appens 700 rader layout lämnas orörda, och det som skrivs om är
   bara ytan, radier, ytor, skuggor, typroller. Ingen regel här rör
   display, grid, flex eller position; går något sönder är det ett fel
   här, inte i layouten under.

   Ramverkets grammatik, tillämpad:
   · mjuka ytor (--radie) i stället för skarpa lådor
   · knappar och chips som pillerformer
   · panelkänsla: paper + line-soft + panel-inset
   · mono för all metadata, Goblin bara för rubriker och chrome
   · EN accent för tillstånd, innehållsfärgerna rör vi inte
   ───────────────────────────────────────────────────────────────── */

/* ─── Den målade maskoten ─────────────────────────────────────
   Ersätter vektorgengaren där den finns. Den bär sin egen rök i alfakanalen,
   så den behöver ingen ram och ingen bakgrund, bara plats. */
.maskot{ width:100%; height:100%; object-fit:contain; display:block; }
.avatar .maskot{ object-position:center 38%; transform:scale(1.35); }
.bnr .mask .maskot{ object-fit:contain; object-position:right bottom; }
/* Glöden runt maskoten följer läget, som resten av accenten. */
.avatar .maskot,.bnr .mask .maskot{
  filter:drop-shadow(0 0 10px rgba(155,92,255,.45));
}
:root[data-theme="pink"] .avatar .maskot,
:root[data-theme="pink"] .bnr .mask .maskot{
  filter:drop-shadow(0 0 10px rgba(194,24,91,.35));
}

/* ─── Chrome: header, flikar, sök ─────────────────────────────── */
header{ border-bottom:1px solid var(--line-soft); }
header nav button{
  border-bottom:none; border-radius:var(--radie-pill);
  padding:7px 13px; margin-bottom:0;
}
header nav button[aria-current="true"]{
  background:var(--slime-bg); color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
}
.sokrad{
  border-top:none; margin:0 0 10px; padding:9px 14px;
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radie-pill); box-shadow:var(--panel-inset);
}
.sokrad:focus-within{ box-shadow:var(--panel-inset), var(--glow); }
/* Placeholdern innehåller "M2a 250", en identifierare, och unicase-Goblin
   suddar just den skillnaden. Landningssidan sätter sina exempel i brödfonten,
   så samma här. */
.sokrad input::placeholder{ font-family:var(--brod); font-size:14px; letter-spacing:0; }
.sokrad button{ border-radius:50%; border-color:var(--line-soft); }
.qpanel{
  border:1px solid var(--line-soft); border-radius:var(--radie);
  overflow:hidden; box-shadow:var(--shadow);
}
.qrad img,.qrad .sw{ border-radius:6px; }
.avatar{ border-radius:50%; }

/* ─── Knappar och chips: pillerformer ─────────────────────────── */
.btn,.chip,.fbtn,.setchip{
  border-radius:var(--radie-pill);
  border-color:var(--line-soft);
  background:var(--paper);
  box-shadow:var(--panel-inset);
}
/* Chipsen bär ORD ("Dölj vanliga trainers", "Billigast först"), monospace
   gjorde dem breda och taggiga, med i och m lika breda. Siffror och koder
   behåller mono nedan; det är där likbredden gör nytta. */
.chip,.setchip{ font-family:var(--brod); font-weight:500; letter-spacing:0; }
.chip i,.setchip i{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.chip[aria-pressed="true"],.fbtn[aria-pressed="true"],.setchip[aria-pressed="true"]{
  background:var(--slime-bg); color:var(--accent);
  border-color:var(--accent); box-shadow:var(--glow);
}
/* Den primära knappen är ramverkets glansiga pill. */
.btn.solid{
  color:var(--accent-ink);
  background:linear-gradient(180deg, var(--accent-mjuk), var(--accent) 45%, var(--accent-d));
  border-color:transparent;
  box-shadow:inset 0 1px rgba(255,255,255,.55), inset 0 -6px 12px rgba(0,0,0,.12), var(--glow);
}
.chip.t b{ border-radius:50%; }

/* ─── Paneler och block ───────────────────────────────────────── */
.filt,.stat,.codebox,.pack,.detail,.bytkalla,.butikrad,.arthead,.matahead,
.snabbstat,.klist,.empty,.komm,.buyhead,.forts,.dyr,.vrad{
  border-radius:var(--radie);
  border-color:var(--line-soft);
  box-shadow:var(--panel-inset);
}
.filt{ overflow:hidden; }
.filt .rad{ border-color:var(--line-soft); }
.detail{ box-shadow:var(--panel-inset), var(--shadow); }
.bar,.pbar,.pack .pbar{ border-radius:var(--radie-pill); overflow:hidden; }
.bar i,.pbar i,.pack .pbar i{ border-radius:var(--radie-pill); }

/* ─── Metadata i mono ─────────────────────────────────────────── */
/* Mono är för **metadata**, inte för prosa, det är ramverkets egen regel.
   Första försöket satte .note i mono också, och då blev varje förklarande
   stycke i appen en vägg av skrivmaskin. Brödtexten stannar i systemfonten. */
.artmeta,.matameta,.fhint,.kvar,.sam,.dexnr,.gnr{
  font-family:var(--mono); font-size:11.5px; line-height:1.6;
}
.note{ font-family:var(--brod); }
.metarad,.empty,.fhint{ font-family:var(--brod); }
.artmeta b{ font-weight:700; }
.lbl{ font-family:var(--brod); font-weight:600; letter-spacing:.1em; }

/* Rubriken bär märkets prick i stället för att bara vara versal accent. */
h3::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:9px;
  vertical-align:2px; background:var(--accent); border-radius:50%;
  box-shadow:var(--glow);
}

/* ─── Kortbrickan ─────────────────────────────────────────────── */
.kk .bild{ border-radius:12px; border-color:var(--line-soft); }
.kk .bild .nr{ border-radius:0 0 8px 0; }
.kk .bild .rar{ border-radius:0 0 0 8px; }
.kk .dubbel,.kk .bytemark{ border-radius:8px 0 0 0; }
.cell{ border-radius:10px; }

/* ─── Pärmuppslaget ───────────────────────────────────────────── */
.upps{ border-radius:var(--radie); border-color:var(--line-soft); box-shadow:var(--panel-inset); }
.sid{ border-radius:12px; }
.ficka{ border-radius:6px; }

/* ─── Bannern ─────────────────────────────────────────────────── */
.bnr{ border-radius:var(--radie); overflow:hidden; }
.samhero{ border-radius:var(--radie); }

/* ─── Pokédex och teman ───────────────────────────────────────── */
.dexruta{ border-radius:12px; border-color:var(--line-soft); }
.dexbild{ border-radius:8px; }
.tema{ border-radius:var(--radie); border-color:var(--line-soft); box-shadow:var(--panel-inset); }
.tema .band{ border-radius:var(--radie-pill); overflow:hidden; }

/* ─── Fält ────────────────────────────────────────────────────── */
textarea,.joinin,.sok,.butiksok,input[type="text"],input[type="search"],input[type="number"]{
  border-radius:14px; border-color:var(--line-soft);
  background:var(--paper); box-shadow:var(--panel-inset);
}
.filt .sok{ border-radius:var(--radie-pill); }

/* ─── Mosaiken: samlingen som en vägg ─────────────────────────
   Kant i kant, ingen text, inga ramar. Bilderna ska få vara bilderna, allt
   annat är kanterna på en tabell, och en tabell är precis vad den här vyn
   finns för att slippa vara. Panelen bryter ut ur .pane-paddingen. */
.mosaikrad{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mosaikval{ margin-bottom:12px; }
.mosaik{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:3px;
  margin:0 -14px;            /* ut ur panelens padding, full bredd */
}
.mosaik.tat{ grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:2px; }
.mosruta{
  position:relative; aspect-ratio:5/7; padding:0; overflow:hidden;
  background:var(--raise); display:block; border-radius:0;
  transition:transform .12s ease, filter .12s ease;
}
.mosruta img{ width:100%; height:100%; object-fit:cover; display:block; }
.mosruta:hover,.mosruta:focus-visible{ transform:scale(1.06); z-index:2;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)); outline:none; }
.mos-n{ position:absolute; right:0; bottom:0; padding:1px 5px;
  font-family:var(--mono); font-size:9px; font-weight:700;
  background:var(--accent); color:var(--accent-ink); }

/* ─── Kortbladet ──────────────────────────────────────────────
   Helskärm över allt annat. Bilden först, fakta under, och sist de tre
   trådarna vidare, samma pokémon, samma konstnär, samma färg. */
.blad{
  position:fixed; inset:0; z-index:60; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--ground); padding:0 14px 40px;
}
.blad[hidden]{ display:none; }
.bladtopp{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px;
  padding:12px 0; background:var(--ground);
  border-bottom:1px solid var(--line-soft); margin-bottom:16px;
}
.bladinnehall{ max-width:900px; margin:0 auto; }
/* Kortet ska visa kortet, inte fylla skärmen. Höjdtaket är det som gör
   jobbet: namn, pris och knappar ska rymmas ovanför vecket, annars öppnar man
   ett kort och ser bara en bild man redan kände igen. */
.bladbild{
  max-width:min(300px,64vw); margin:0 auto 20px;
  border-radius:var(--radie); overflow:hidden;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75);
}
.bladbild img{ display:block; width:auto; max-width:100%;
  max-height:min(46vh,420px); margin-inline:auto; }
/* Bred skärm: bilden vid sidan av fakta i stället för ovanpå. Remsorna
   nedanför spänner över båda spalterna, och eftersom de gör det finns ingen
   tom spalt att fylla, så bilden ligger STILLA. Den var klistrad ett tag och
   åkte med hela vägen ner genom grannremsorna, vilket bara var i vägen. */
@media (min-width:820px){
  .bladinnehall{ display:grid; grid-template-columns:300px 1fr;
    gap:8px 34px; align-items:start; }
  .bladbild{ margin:0; }
  .bladinnehall > h3, .bladinnehall > .bladremsa{ grid-column:1 / -1; }
}
.bladbild .sw.stor{ display:block; width:100%; aspect-ratio:5/7; background:var(--c);
  position:relative; }
/* Siluetten i bladet och grannremsan. Plattan bakom är typfärgad, ofta ljus,
   så skuggan är mörk här, som riktiga Vem är det?, oavsett läge. */
.bladbild .silu,.gbild .silu{
  position:absolute; left:15%; top:12%; width:70%; height:70%;
  object-fit:contain; image-rendering:pixelated;
  filter:brightness(0) opacity(.45); pointer-events:none;
}
.bladnamn{ font-size:22px; font-weight:700; line-height:1.2; margin-bottom:4px; }
.bladfakta{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0; }
.bladpris{ display:flex; flex-direction:column; gap:2px; margin:14px 0; }
.bladpris b{ font-family:var(--mono); font-size:22px; font-weight:700; }
.bladtext .toolrow{ margin:12px 0; }
/* Antal och betalt, detaljradens rad2, fast i bladets språk. */
.bladrad2{ align-items:center; }
.bladrad2 .kr{
  width:5.4em; padding:6px 8px; font-size:13px; text-align:right;
  font-family:var(--mono); color:var(--ink);
  background:var(--raise); border:1px solid var(--line-soft); border-radius:8px;
}
.bladrad2 #bladAntal{ min-width:1.6em; text-align:center; }

/* Grannarna: en remsa man drar i sidled, aldrig ett rutnät som växer nedåt. */
.bladremsa{
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px; margin:0 -14px; padding-inline:14px;
  -webkit-overflow-scrolling:touch;
}
.bladremsa::-webkit-scrollbar{ display:none; }
/* Grannbrickan: bild, namn, set · nummer, pris, plus. Bredden är satt så två
   brickor och kanten av en tredje syns, remsan ska se ut som att den fortsätter,
   annars vet man inte att den går att dra i. */
.grann{
  flex:0 0 auto; width:152px; display:flex; flex-direction:column; gap:7px;
  padding:8px; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radie); box-shadow:var(--panel-inset);
}
.grann.agd{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line-soft)); }
.gbild{ position:relative; padding:0; display:block; border-radius:10px; overflow:hidden; }
.gbild img,.gbild .sw{
  width:100%; aspect-ratio:5/7; object-fit:cover; display:block; background:var(--raise);
}
.gbild .sw{ background:var(--c); }
.gmark{
  position:absolute; top:6px; right:6px; padding:2px 7px; border-radius:var(--radie-pill);
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.04em;
  background:var(--ground); color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
.gmark.har{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--glow); }
.gmark.onsk{ color:var(--accent); }
.gtext{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gtext b{ font-size:12.5px; font-weight:700; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gset{ font-size:10px; color:var(--ink-3); }
.gpris{ display:flex; align-items:center; gap:6px; margin-top:3px; }
.gpris b{ font-size:13px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.gpris i{ font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Plusset sist i raden, alltid samma plats: den knappen ska sitta där tummen
   redan är, inte flytta med prisets längd. */
.gplus{
  margin-left:auto; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line-soft); background:var(--raise); color:var(--ink-2);
  font-size:17px; line-height:1; box-shadow:var(--panel-inset);
}
.gplus:hover,.gplus:focus-visible{ border-color:var(--accent); color:var(--accent);
  box-shadow:var(--glow); outline:none; }
.grann.agd .gplus{ color:var(--accent); border-color:var(--accent); }

/* ─── Vyraden på Samling ──────────────────────────────────────
   Tre ingångar till samma samling. Kort och inte knappar, för de leder till
   *sidor*, en pillerknapp lovar en handling, ett kort lovar ett ställe. */
.vyval{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin:16px 0 4px; }
.vyknapp{
  text-align:left; padding:12px 14px; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:var(--radie);
  box-shadow:var(--panel-inset); transition:border-color .12s ease, box-shadow .12s ease;
}
.vyknapp:hover,.vyknapp:focus-visible{ border-color:var(--accent); box-shadow:var(--glow); outline:none; }
.vyknapp b{ display:block; font-size:14.5px; font-weight:700; margin-bottom:3px; }
.vyknapp i{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.45; }

.tillbaka{ margin-bottom:12px; }

/* ─── Tre tal i rad ───────────────────────────────────────────
   Mono och tabellsiffror, som allt annat räknat i appen. */
.talrad3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:6px; }
.t3{ padding:12px 10px; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radie); box-shadow:var(--panel-inset); text-align:center; }
.t3 b{ display:block; font-family:var(--mono); font-size:24px; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1.1; }
.t3 i{ display:block; font-style:normal; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }

/* ─── Fördelningsrader ────────────────────────────────────────
   Etikett, band, tal. Bandets bredd är andel av den största raden och inte av
   summan: en lista på tolv rader hade annars blivit tolv streck. */
.fdel-lista{ display:flex; flex-direction:column; gap:5px; margin-bottom:6px; }
.fdrad{ display:grid; grid-template-columns:minmax(64px,26%) 1fr auto; gap:10px;
  align-items:center; }
.fdnamn{ font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.fdband{ height:8px; background:var(--line-soft); border-radius:var(--radie-pill);
  overflow:hidden; }
.fdband i{ display:block; height:100%; background:var(--c); border-radius:var(--radie-pill); }
.fdtal{ font-family:var(--mono); font-size:11.5px; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.fdtal i{ font-style:normal; color:var(--ink-3); margin-left:6px; }

/* ─── Flest av ────────────────────────────────────────────────
   Kortet som ansikte för arten, antalet som siffra ovanpå. */
.artgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px;
  margin-bottom:8px; }
.artruta{ position:relative; padding:0; display:flex; flex-direction:column; gap:4px; }
.artruta img,.artruta .sw{ width:100%; aspect-ratio:5/7; object-fit:cover; display:block;
  border-radius:8px; border:1px solid var(--line-soft); background:var(--raise); }
.artruta .sw{ background:var(--c); }
.artruta b{ position:absolute; top:0; right:0; padding:2px 6px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:var(--accent); color:var(--accent-ink); border-radius:0 8px 0 8px; }
.artruta .an{ font-size:10.5px; line-height:1.3; color:var(--ink-2); text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.artruta:hover .an,.artruta:focus-visible .an{ color:var(--accent); }

/* ─── Värdepanelen ────────────────────────────────────────────
   Ett stort tal, en förändring, tre räknare, en kurva. Talet är mono som allt
   annat räknat, inte en pixelfont: appen har tre typroller och en fjärde bara
   för att en siffra ska imponera vore en fjärde för mycket. */
.vpanel{ padding:16px 14px 14px; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:var(--radie-stor);
  box-shadow:var(--panel-inset), var(--shadow); margin-bottom:20px; }
.vtopp{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vund{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px; }
.vdatum{ font-size:11px; color:var(--ink-3); flex:0 0 auto; }
.vstort{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(40px,12vw,68px); letter-spacing:-.045em; line-height:1;
  margin:14px 0 6px; }
.vstort span{ font-size:.4em; letter-spacing:0; color:var(--accent); margin-left:8px; }
.vdelta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:11.5px;
  color:var(--ink-3); }
.vpill{ padding:3px 10px; border-radius:var(--radie-pill); font-family:var(--mono);
  font-size:11.5px; font-weight:700; }
.vpill.upp{ color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ok) 40%, transparent); }
.vpill.ner{ color:var(--warn); background:color-mix(in srgb, var(--warn) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 40%, transparent); }
.vrakn{ display:flex; gap:0; margin:16px 0 4px; border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); }
.vrakn span{ flex:1; padding:10px 6px; text-align:center; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); }
.vrakn span + span{ border-left:1px solid var(--line-soft); }
.vrakn b{ display:block; font-size:19px; color:var(--ink); letter-spacing:-.02em; }

/* Kurvan. preserveAspectRatio="none" gör att den fyller bredden på vilken skärm
   som helst, en graf ska följa fönstret, inte behålla en proportion. Alla streck
   bär vector-effect:non-scaling-stroke, annars sträcks tjockleken med skalningen
   och stavarna blir tunna på en bred skärm och klumpiga på en smal. */
.vgrafram{ margin:14px 0 2px; }
.vgraf{ width:100%; height:150px; display:block; overflow:visible; }
.vrut{ stroke:var(--line-soft); stroke-width:1; vector-effect:non-scaling-stroke; }
.vstav{ stroke:var(--accent); stroke-width:1; opacity:.42;
  vector-effect:non-scaling-stroke; }
.vlinje{ fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke;
  stroke-linejoin:round; stroke-linecap:round; }
.vaxel{ display:flex; justify-content:space-between; font-size:9.5px; color:var(--ink-3);
  padding-top:5px; border-top:1px solid var(--line-soft); }
.vtom{ margin:16px 0 6px; padding:16px 14px; border:1px dashed var(--line);
  border-radius:var(--radie); font-size:12.5px; line-height:1.6; color:var(--ink-3); }
.vfonster{ margin-top:8px; }
.vfot{ margin-top:10px; font-size:11.5px; }

/* ─── Samlingsöversiktens statkort ────────────────────────────
   Landningssidans statkort-grammatik på översiktens värdepanel:
   // etikett i mono, ett stort mono-tal, delta som pill, EN metarad.
   Layouten under (index.html .varde) lämnas orörd, bara ytan skrivs om. */
.varde{ background:var(--paper); border-color:var(--line-soft);
  border-radius:var(--radie-stor); box-shadow:var(--panel-inset), var(--shadow);
  padding:16px 16px 14px; }
.varde .kr{ font-family:var(--mono); font-size:clamp(30px,9vw,40px); letter-spacing:-.04em; }
.varde .kr .vpill{ font-size:12px; vertical-align:middle; margin-left:6px; }
.varde .un{ font-family:var(--mono); }
.varde .fdel{ border-radius:var(--radie-pill); }

/* Metaraden, sektionens siffror på en rad, i stället för ett stycke prosa. */
.metarad{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  margin:-4px 0 12px; line-height:1.6; }

/* Tomtext är prosa, inte chrome, Goblin på hela meningar går inte att ögna.
   (Basen sätter var(--display) via index-listan; samma specificitet, vi laddas
   sist och vinner.) */
.empty{ font-family:var(--brod); }

/* Antalet i Väggens verktygsrad: högerställt, som filterradens .kvar. */
.mosaikval .kvar{ margin-left:auto; align-self:center; font-size:11px;
  color:var(--ink-3); white-space:nowrap; }

/* Nytt sedan sist / går att köpa nu, en knuff, inte ett larm. Etiketten i
   Goblin som rubrikerna; accentramen ersätts av panelens vanliga linje. */
.nyaset{ border-color:var(--line-soft); }
.nyalabel{ font-family:var(--display); font-size:12.5px; letter-spacing:.03em;
  text-transform:none; color:var(--ink); }

/* ─── Insatt mot marknad ──────────────────────────────────────── */
.vjmf{ padding:13px 14px; background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--radie); box-shadow:var(--panel-inset); }
.vjrad{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:12.5px; color:var(--ink-2); padding:4px 0; }
.vjrad.sum{ border-top:1px solid var(--line-soft); margin-top:4px; padding-top:8px;
  color:var(--ink); font-weight:600; }
.vjband{ display:flex; gap:3px; height:8px; margin:12px 0 4px; }
.vjband i{ background:var(--c); border-radius:var(--radie-pill); }

/* ─── Fälten på en pekskärm: 16px, alltid ────────────────────────
   Safari på iOS zoomar in dokumentet så fort man fokuserar ett fält med mindre
   text än 16px, och zoomar **inte** ut igen. Man får nypa tillbaka för hand
   efter varje sökning. Fälten var satta mellan 11 och 15px för att vara
   diskreta på en datorskärm, vilket alltså kostade en inzoomning per tryck i
   handen.

   Fixen är storleken, inte `maximum-scale=1` i viewporten: att spärra nypzoom
   löser symptomet genom att ta bort zoomen helt, även för den som behöver den.
   Paddingen dras in samtidigt så ett fält på 16px inte tar mer plats än ett på
   12px gjorde, det är höjden som är dyr på en telefon, inte teckengraden.

   Frågan gäller pekskärmar, inte smala fönster: ett iPad i liggande läge är
   bredare än 760px och zoomar likväl. */
@media (hover:none) and (pointer:coarse){
  /* Selektorerna är skrivna med samma vikt som de de ska slå. `input` ensamt är
     svagare än `.sokrad input` och `.sok` svagare än `.filt .sok`, så en kort lista
     hade lämnat kvar precis de två fält man söker och filtrerar i mest. */
  textarea,input,select,
  .sok,.joinin,.butiksok input,.rad2 .kr,.parmnamn,
  .sokrad input,.filt .sok,.snabb textarea{
    font-size:16px;
  }
  .filt .sok{ padding:5px 11px; }
  .snabb textarea{ height:84px; }
  .rad2 .kr{ width:4.4em; padding:4px 6px; }
  .sokrad input{ padding:4px 2px; }
  /* Textrutan i Mata in och Byta är monospace-siffror: 16px läser bättre än
     11px gjorde, och rutan behöver inte bli högre för det. */
  textarea{ line-height:1.5; }

  /* Tryckytor upp till 44px utan att något syns större. Subnavets chips är
     35px höga, ikonknappen 34 och avataren 32, alla under det minsta mått
     ett finger träffar säkert. Att sätta min-height på elementen hade skjutit
     isär raderna; ::after växer bara den yta som tar emot trycket.

     Måttet är centrerat kring knappen, så tillväxten fördelas åt båda håll
     och inget hamnar snett. Chipsen är 79-92px breda och står ensamma på sin
     rad, så de 4-6px som läggs till på höjden överlappar ingen granne. */
  .subnav .chip, .ikon, .avatar{ position:relative; }
  .subnav .chip::after, .ikon::after, .avatar::after{
    content:""; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:100%; height:100%; min-width:44px; min-height:44px;
  }
}

/* Toppradens flikar på telefon: pillerpaddingen ovan (13px) gjorde raden
   bredare än skärmen utan att nästa flik syntes, kanten av POKÉDEX ska
   titta fram som dra-signal. */
@media (max-width:560px){
  header nav button{ padding:7px 9px; }
}

/* ─── Telefonen: samma mjukhet, men inte på bekostnad av ytan ─── */
@media (max-width:480px){
  /* Radierna är satta för en skärm på 1120 px. På 375 px äter samma
     värden av innehållsytan, så de skalas ner i stället för att skalas bort. */
  :root{ --radie:14px; --radie-stor:18px; }
  h3::before{ width:5px; height:5px; margin-right:7px; }
}