/* parts/pokedex.css - /pokedex/ (scope: .pg-pokedex) + its Pokémon page in the shell's dialog (scope: .dlg .dx-…).
   Linked only on /pokedex/. A's tokens: tiles on --surface with a hairline, the picture on a soft type-tinted glow, gold
   only for shiny, LeekDuck's type glyphs on discs tinted with the game's type colours (the dialog's palette).
   The popup reuses the dialog part's picture band, title, type badges and number tiles (dg-*), adds its own pieces (dx-*).
   Phones ≤ 639 px: 3 tiles a row, types folded behind "Types" · tablets the same with more tiles · ≥ 1024 the types inline. */

.pg-pokedex {
  --dx-top: calc(var(--bar-h) + var(--safe-t)); /* under the sticky header */
  --dx-bar: 64px; /* the toolbar's height (anchors + focused tiles clear both) */
  --dx-min: 112px; /* tile min width */
  --dx-gap: 12px;
}

/* ---------- type icons: LeekDuck's glyph in its own colour on a disc tinted with it (tiles, filter, the Types button).
   One background per icon - no filter, no pseudo element: 1000+ tiles stay cheap to paint. ---------- */
.pg-pokedex { --dx-tint: 34%; }
:where(:root[data-theme="light"]) .pg-pokedex { --dx-tint: 30%; }
.pg-pokedex .dx-ti { display: block; flex: none; width: 20px; height: 20px; background: var(--ti) center / 66% no-repeat, color-mix(in srgb, var(--ty, var(--mute)) var(--dx-tint), var(--surface)); border-radius: 50%; }
.pg-pokedex .t-normal { --ty: #8f97a0; --ti: url("https://leekduck.com/assets/img/types/normal.png"); }
.pg-pokedex .t-fire { --ty: #ff9c58; --ti: url("https://leekduck.com/assets/img/types/fire.png"); }
.pg-pokedex .t-water { --ty: #3473c8; --ti: url("https://leekduck.com/assets/img/types/water.png"); }
.pg-pokedex .t-electric { --ty: #e8c534; --ti: url("https://leekduck.com/assets/img/types/electric.png"); }
.pg-pokedex .t-grass { --ty: #5ebd64; --ti: url("https://leekduck.com/assets/img/types/grass.png"); }
.pg-pokedex .t-ice { --ty: #5fc0b0; --ti: url("https://leekduck.com/assets/img/types/ice.png"); }
.pg-pokedex .t-fighting { --ty: #cf4165; --ti: url("https://leekduck.com/assets/img/types/fighting.png"); }
.pg-pokedex .t-poison { --ty: #a866c8; --ti: url("https://leekduck.com/assets/img/types/poison.png"); }
.pg-pokedex .t-ground { --ty: #db7746; --ti: url("https://leekduck.com/assets/img/types/ground.png"); }
.pg-pokedex .t-flying { --ty: #7f9bd6; --ti: url("https://leekduck.com/assets/img/types/flying.png"); }
.pg-pokedex .t-psychic { --ty: #f96e76; --ti: url("https://leekduck.com/assets/img/types/psychic.png"); }
.pg-pokedex .t-bug { --ty: #9cac1c; --ti: url("https://leekduck.com/assets/img/types/bug.png"); }
.pg-pokedex .t-rock { --ty: #b8a671; --ti: url("https://leekduck.com/assets/img/types/rock.png"); }
.pg-pokedex .t-ghost { --ty: #5069ab; --ti: url("https://leekduck.com/assets/img/types/ghost.png"); }
.pg-pokedex .t-dragon { --ty: #0869c3; --ti: url("https://leekduck.com/assets/img/types/dragon.png"); }
.pg-pokedex .t-dark { --ty: #575869; --ti: url("https://leekduck.com/assets/img/types/dark.png"); }
.pg-pokedex .t-steel { --ty: #54879e; --ti: url("https://leekduck.com/assets/img/types/steel.png"); }
.pg-pokedex .t-fairy { --ty: #e283d8; --ti: url("https://leekduck.com/assets/img/types/fairy.png"); }

/* ---------- toolbar: sticky under the header ---------- */
.pg-pokedex .dx-bar { position: sticky; top: var(--dx-top); z-index: 20; margin: 16px calc(var(--gut) * -1) 0; padding: 10px var(--gut); background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid var(--hair); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pg-pokedex .dx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pg-pokedex .dx-find { display: flex; flex: 1 1 180px; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 12px; cursor: text; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 14px; transition: border-color .15s, box-shadow .15s; }
.pg-pokedex .dx-find:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.pg-pokedex .dx-fi { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--mute); stroke-width: 2.2; stroke-linecap: round; }
.pg-pokedex .dx-find input { flex: 1; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 0; outline: 0; }
.pg-pokedex .dx-find input::placeholder { color: var(--mute); }
.pg-pokedex .dx-seg { flex: none; }
.pg-pokedex .dx-seg .seg-b { height: 38px; } /* 38 + the track's 2 × 3 = the 44 px of the find box + Types */
/* Types: a disclosure on phones + tablets (the 18 icons fold under the row), inline from 1024 px */
.pg-pokedex .dx-tyb { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 44px; padding: 0 12px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--text-2); cursor: pointer; background: var(--surface); border: 1px solid var(--hair-2); border-radius: 14px; }
.pg-pokedex .dx-tyb:hover, .pg-pokedex .dx-tyb[aria-expanded="true"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--hair-2)); }
.pg-pokedex .dx-fil { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pg-pokedex .dx-tyb-s { display: flex; gap: 3px; }
.pg-pokedex .dx-tyb-s:empty { display: none; }
.pg-pokedex .dx-types { display: none; flex: 1 1 100%; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 4px 0 2px; }
.pg-pokedex .dx-bar.is-open .dx-types { display: grid; }
.pg-pokedex .dx-tf { position: relative; display: grid; place-items: center; width: 100%; max-width: 40px; aspect-ratio: 1; justify-self: center; padding: 0; cursor: pointer; background: var(--surface); border: 1px solid var(--hair); border-radius: 50%; }
.pg-pokedex .dx-tf .dx-ti { width: 70%; height: 70%; }
.pg-pokedex .dx-tf:hover { border-color: var(--hair-2); }
.pg-pokedex .dx-tf[aria-pressed="true"] { background: color-mix(in srgb, var(--ty) 20%, var(--surface)); border-color: var(--ty); box-shadow: 0 0 0 1.5px var(--ty); }
.pg-pokedex .dx-types:has([aria-pressed="true"]) .dx-tf[aria-pressed="false"] .dx-ti { opacity: .4; }
.pg-pokedex .dx-tx { grid-column: 1 / -1; justify-self: center; height: 34px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 650; color: var(--text-2); cursor: pointer; background: var(--surface-2); border: 0; border-radius: 999px; }
.pg-pokedex .dx-tx:hover { color: var(--text); }
@media (min-width: 1024px) {
  .pg-pokedex .dx-row { flex-wrap: nowrap; }
  .pg-pokedex .dx-find { flex: 1 1 200px; max-width: 320px; }
  .pg-pokedex .dx-tyb { display: none; }
  .pg-pokedex .dx-types, .pg-pokedex .dx-bar.is-open .dx-types { display: flex; flex: 0 1 auto; align-items: center; gap: 3px; margin-left: auto; padding: 0; }
  .pg-pokedex .dx-tf { width: 30px; height: 30px; }
  .pg-pokedex .dx-tx { height: 30px; margin-left: 6px; padding: 0 12px; }
}
/* phones: the Types button is its icon (+ the picked types), still named for screen readers - the find box keeps room */
@media (max-width: 429px) {
  .pg-pokedex .dx-tyb { gap: 5px; padding: 0 12px; }
  .pg-pokedex .dx-tyb-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* generation jump (the shell's pills); a generation the filter empties is muted */
.pg-pokedex .dx-jump { margin-top: 14px; }
.pg-pokedex .dx-jump a[aria-disabled="true"] { color: var(--mute); cursor: default; background: transparent; border-style: dashed; }

/* status line: count while filtering, "no match" + Clear, loading / failure */
.pg-pokedex .dx-st { min-height: 0; margin: 14px 0 0; font-size: 14px; color: var(--mute); }
.pg-pokedex .dx-st:empty { margin: 0; }
.pg-pokedex .dx-st.is-none { padding: 18px 20px; border: 1px dashed var(--hair-2); border-radius: var(--r); }
.pg-pokedex .dx-reset { height: 36px; margin-left: 6px; padding: 0 14px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--text); cursor: pointer; background: var(--surface-2); border: 0; border-radius: 999px; }
.pg-pokedex .dx-slot[aria-busy="true"] { min-height: 70vh; }
.pg-pokedex .dx-off { margin-top: 24px; }

/* ---------- the grid: one section per generation ---------- */
/* off-screen generations skip style, layout + paint (1000+ tiles stay smooth on phones); --dx-h = the section's measured
   height (pokedex.client.js), so the scrollbar and the jumps stay true. One switch per section, not per tile: per-tile
   switches cost more (an intersection check + a compositing node each, every frame) than they save. */
.pg-pokedex .dx-gen { margin-top: 30px; scroll-margin-top: calc(var(--dx-top) + var(--dx-bar) + 10px); content-visibility: auto; contain-intrinsic-size: auto var(--dx-h, 4000px); }
.pg-pokedex .dx-gen:first-child { margin-top: 22px; }
.pg-pokedex .is-filtered .dx-gen { content-visibility: visible; contain-intrinsic-size: none; } /* filtered sizes are never remembered */
.pg-pokedex .dx-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 12px; }
.pg-pokedex .dx-gt { margin: 0; font-size: 22px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; }
.pg-pokedex .dx-gm { margin: 0; font-size: 13.5px; font-weight: 550; color: var(--mute); font-variant-numeric: tabular-nums; }
.pg-pokedex .dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dx-min), 1fr)); gap: var(--dx-gap); margin: 0; padding: 0; list-style: none; }
.pg-pokedex .dx-c { min-width: 0; }
.pg-pokedex .dx-t { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 100%; margin: 0; padding: 9px 6px 11px; font: inherit; color: var(--text); text-align: center; cursor: pointer; background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; scroll-margin: calc(var(--dx-top) + var(--dx-bar) + 10px) 0 16px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pg-pokedex .dx-t:hover { border-color: var(--hair-2); box-shadow: var(--lift); transform: translateY(-2px); }
.pg-pokedex .dx-n { align-self: flex-start; padding-left: 3px; font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: .02em; color: var(--mute); font-variant-numeric: tabular-nums; }
/* the site's ✦ (render.js sparkle) as a picture in the theme's gold: an inline <svg> per tile costs the compositor a node
   each (1000 tiles); a background costs nothing */
.pg-pokedex .dx-spk { position: absolute; top: 8px; right: 9px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2c45c'%3E%3Cpath d='M12 1.5l2.3 6.6 6.7 2.4-6.7 2.4L12 19.5l-2.3-6.6L3 10.5l6.7-2.4z'/%3E%3Cpath d='M19.5 15l.9 2.4 2.1.9-2.1.9-.9 2.3-.9-2.3-2.1-.9 2.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat; }
:where(:root[data-theme="light"]) .pg-pokedex .dx-spk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23785504'%3E%3Cpath d='M12 1.5l2.3 6.6 6.7 2.4-6.7 2.4L12 19.5l-2.3-6.6L3 10.5l6.7-2.4z'/%3E%3Cpath d='M19.5 15l.9 2.4 2.1.9-2.1.9-.9 2.3-.9-2.3-2.1-.9 2.1-.9z'/%3E%3C/svg%3E"); }
/* one square picture box per tile (a tall or wide sprite never changes the tile's height: the picture is out of flow);
   no drop-shadow filters on 1000 sprites - the soft type-tinted glow behind each one keeps dark sprites off the tile */
.pg-pokedex .dx-pic { position: relative; flex: none; width: 76%; max-width: 84px; aspect-ratio: 1; margin: 1px 0 3px; background: radial-gradient(closest-side, color-mix(in srgb, var(--ty, var(--accent)) 22%, transparent), transparent); border-radius: 50%; }
.pg-pokedex .dx-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; }
.pg-pokedex .dx-pic .mon-gl .glyph { width: 62%; }
.pg-pokedex .dx-m { max-width: 100%; overflow: hidden; font-size: 13.5px; font-weight: 720; line-height: 1.25; letter-spacing: -.005em; white-space: nowrap; text-overflow: ellipsis; }
.pg-pokedex .dx-ty { display: flex; gap: 4px; }
.pg-pokedex .dx-nsh { display: none; }
/* shiny view: shinies get a faint gold glow; the rest keep their normal picture, dimmed, marked "no shiny" */
.pg-pokedex .is-shiny .has-sh .dx-pic { background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 20%, transparent), transparent); }
.pg-pokedex .is-shiny .no-sh .dx-pic img { opacity: .38; filter: grayscale(.8); }
.pg-pokedex .is-shiny .no-sh .dx-nsh { position: absolute; bottom: 2%; left: 50%; display: block; padding: 1px 8px; font-size: 11px; font-weight: 700; line-height: 17px; color: var(--text-2); white-space: nowrap; background: var(--surface-2); border-radius: 999px; transform: translateX(-50%); }
.pg-pokedex .dx-src { margin: 36px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.pg-pokedex .dx-src a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }

@media (max-width: 639px) {
  .pg-pokedex { --dx-min: 88px; --dx-gap: 8px; --dx-bar: 64px; }
  .pg-pokedex .dx-bar { margin-top: 12px; padding-block: 8px; }
  .pg-pokedex .dx-row { gap: 8px; }
  .pg-pokedex .dx-find { flex-basis: 96px; padding: 0 10px; }
  .pg-pokedex .dx-tyb { padding: 0 11px; }
  .pg-pokedex .dx-gen { margin-top: 24px; }
  .pg-pokedex .dx-gt { font-size: 20px; }
  .pg-pokedex .dx-t { padding: 8px 4px 10px; border-radius: 14px; }
  .pg-pokedex .dx-m { font-size: 12.5px; }
  .pg-pokedex .dx-ti { width: 18px; height: 18px; }
  .pg-pokedex .is-shiny .no-sh .dx-nsh { font-size: 10.5px; }
}
@media (max-width: 359px) {
  .pg-pokedex .dx-n { font-size: 10.5px; }
  .pg-pokedex .dx-spk { top: 7px; right: 7px; }
  /* the narrowest phones: find on its own row, then Normal | Shiny (wide) + Types */
  .pg-pokedex { --dx-bar: 116px; }
  .pg-pokedex .dx-find { flex-basis: 100%; }
  .pg-pokedex .dx-seg { flex: 1 1 auto; }
  .pg-pokedex .dx-seg .seg-b { flex: 1 1 0; }
}

/* ---------- the Pokémon page (shell dialog) ---------- */
.dlg .dx-p .dg-hero { --hc: var(--ty, var(--accent)); }
.dlg .dx-k { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--mute); }
.dlg .dx-num { color: var(--text-2); font-variant-numeric: tabular-nums; }
.dlg .dx-form { font-size: 15px; font-weight: 650; letter-spacing: 0; color: var(--mute); }
.dlg .dx-tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 750; color: var(--text-2); white-space: nowrap; background: var(--surface-2); border-radius: 999px; }
.dlg .dx-tag-r { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
/* numbers: base stats as bars (full = the highest on the list) beside the 100% CP at level 40 + 50 */
.dlg .dx-nums { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 4px 24px; margin: 18px 0 0; padding: 10px 0; border-block: 1px solid var(--hair); }
.dlg .dx-bars { display: grid; gap: 7px; }
.dlg .dx-br { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.dlg .dx-bl { font-size: 12.5px; font-weight: 700; color: var(--mute); }
.dlg .dx-bb { display: block; height: 8px; overflow: hidden; background: var(--bar); border-radius: 8px; }
.dlg .dx-bb i { display: block; height: 100%; background: var(--ty, var(--accent)); border-radius: 8px; }
.dlg .dx-bv { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dlg .dx-cps { margin: 0; border: 0; }
.dlg .dx-cps .dg-st { padding-block: 6px; }
.dlg .dx-cps .dg-st-l .tipped { text-align: left; }
/* facts: Shiny · Buddy · Shadow · Found · Mega energy */
.dlg .dx-dl { display: grid; margin: 12px 0 0; }
.dlg .dx-di { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
.dlg .dx-di:first-child { border-top: 0; }
.dlg .dx-di dt { font-size: 13px; font-weight: 700; color: var(--mute); }
.dlg .dx-di dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.dlg .dx-yes { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--gold); }
.dlg .dx-yes .spk { position: static; width: 14px; height: 14px; }
/* sections: Evolution · Forms · In the game now */
.dlg .dx-sec { margin-top: 18px; }
.dlg .dx-sec > .dg-mh { margin: 0 0 8px; }
.dlg .dx-evo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dlg .dx-stage { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dlg .dx-stage.is-branch { flex: 1 1 280px; }
.dlg .dx-st-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.dlg .is-branch .dx-st-l { display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dlg .dx-arr { flex: none; font-size: 16px; font-weight: 700; color: var(--mute); }
.dlg .dx-eb, .dlg .dx-fb { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 3px 12px 3px 3px; font: inherit; color: var(--text); text-align: left; cursor: pointer; background: var(--surface-2); border: 1px solid transparent; border-radius: 14px; }
.dlg .dx-eb:hover, .dlg .dx-fb:hover { border-color: var(--hair-2); }
.dlg .dx-eb.is-cur, .dlg .dx-fb.is-cur { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.dlg .dx-sp { width: 44px; height: 44px; }
.dlg .dx-sp img { filter: none; }
.dlg .dx-et { display: flex; flex-direction: column; min-width: 0; }
.dlg .dx-en { font-size: 13.5px; font-weight: 720; line-height: 1.25; }
.dlg .dx-eh { font-size: 12px; line-height: 1.35; color: var(--mute); }
.dlg .is-cur .dx-eh { color: var(--text-2); } /* on the tinted "this one" step: AA */
.dlg .dx-forms { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dlg .dx-fb { width: auto; min-height: 44px; padding-right: 14px; font-size: 13px; font-weight: 650; border-radius: 999px; }
.dlg .dx-fb .dx-sp { width: 38px; height: 38px; }
.dlg .dx-now { margin-top: 0; }
.dlg .dx-nb { cursor: pointer; border: 0; font: inherit; font-size: 13px; }
.dlg .dx-nb:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.dlg .dx-q { margin: 10px 0 0; font-size: 14px; font-weight: 650; }
.dlg .dx-q a { display: inline-flex; align-items: center; min-height: 36px; }
.dlg .dx-srcl { margin-top: 18px; }
.dlg .dx-lag { white-space: nowrap; }
@media (max-width: 639px) {
  .dlg .dx-nums { grid-template-columns: minmax(0, 1fr); padding: 12px 0 4px; }
  .dlg .dx-cps { border-top: 1px solid var(--hair); }
  .dlg .dx-cps .dg-st:first-child { padding-left: 0; }
  .dlg .dx-di { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
  .dlg .dx-evo { flex-direction: column; align-items: stretch; }
  .dlg .dx-stage { flex-direction: column; align-items: stretch; }
  .dlg .dx-arr { align-self: center; transform: rotate(90deg); }
  .dlg .is-branch .dx-st-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a chain without branches: one compact row, picture over name + candy */
  .dlg .dx-evo:not(:has(.is-branch)) { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
  .dlg .dx-evo:not(:has(.is-branch)) .dx-stage { flex: 1 1 0; flex-direction: row; align-items: center; gap: 4px; }
  .dlg .dx-evo:not(:has(.is-branch)) .dx-arr { transform: none; font-size: 14px; }
  .dlg .dx-evo:not(:has(.is-branch)) .dx-st-l { flex: 1 1 0; height: 100%; }
  .dlg .dx-evo:not(:has(.is-branch)) .dx-eb { flex-direction: column; justify-content: flex-start; gap: 2px; height: 100%; padding: 6px 4px 8px; text-align: center; }
  .dlg .dx-evo:not(:has(.is-branch)) .dx-et { align-items: center; }
  .dlg .dx-evo:not(:has(.is-branch)) .dx-en { font-size: 12.5px; overflow-wrap: anywhere; }
}