/* Shared stylesheet for the GENERATED pages: the 649 Pokédex entries and /features.
 *
 * ⚠ ONE FILE ON PURPOSE. Inlining this into 650 pages would cost about 6 MB of duplicated bytes and
 * would make a restyle a 650-file rebuild. Every colour and font is a custom property declared once
 * in :root below, taken verbatim from the tokens the rest of the site already uses, so a later
 * reskin is an edit to this block and nothing else. No generated page hard-codes a palette value.
 *
 * ⚠ Cached hard by _headers, so bump the ?v= in scripts/lib/site-chrome.cjs when this file changes.
 */

:root{--bg:#f6efdc;--bg2:#efe6cd;--surface:#fdf8ea;--surface2:#f0e8d2;--line:#e3d8bb;--line2:#d0c29a;
  --ink:#2c2414;--body:#5d5338;--mut:#8b7f5f;--y:#ffcb05;--y2:#ffdb4d;--y-deep:#e6b400;--on-y:#2a1d00;
  --gold:#9b7100;--grass-deep:#3f9e3f;--sky-flat:#7bc9fa;--dlg:#171d3a;
  --ease:cubic-bezier(.22,1,.36,1);--sh-sm:0 16px 30px -20px rgba(70,55,20,.25);
  --disp:"Silkscreen",system-ui,sans-serif;--body-f:"Nunito",system-ui,sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] is only a USER-AGENT rule and any author display beats it: the seasonal strip ships
   hidden, so this makes the attribute mean what everyone assumes it means. */
[hidden]{display:none!important}
body{font-family:var(--body-f);background:var(--bg);color:var(--body);line-height:1.7;font-weight:500;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--dlg);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--disp);color:var(--ink);font-weight:400;line-height:1.12;text-wrap:balance}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}

/* ── chrome ─────────────────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:40;background:rgba(255,253,244,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(120,100,50,.16)}
nav .row{display:flex;align-items:center;justify-content:space-between;height:70px;max-width:1160px;margin:0 auto;padding:0 22px;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-size:1rem;color:var(--ink)}
.brand img{width:40px;height:40px;border-radius:11px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:13px;font-family:var(--disp);
  font-size:.94rem;background:var(--y);color:var(--on-y);box-shadow:0 5px 0 #a37f00;transition:transform .15s var(--ease)}
.btn:hover{transform:translateY(-2px)}
footer{padding:34px 0;background:var(--dlg);color:#8d96b8;text-align:center;font-size:.88rem}
footer a{color:#c3cbe8}
footer a:hover{text-decoration:underline}

/* ── breadcrumb ─────────────────────────────────────────────────────────── */
.crumb{font-size:.86rem;font-weight:700;color:var(--mut);padding:16px 0 0}
.crumb a{color:var(--gold)}
.crumb a:hover{text-decoration:underline}

/* ── entry header ───────────────────────────────────────────────────────── */
.ehead{background:var(--sky-flat);padding:26px 0 24px;margin-top:16px}
.ehead .row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;max-width:1160px;margin:0 auto;padding:0 22px}
.art{display:flex;gap:14px;align-items:flex-end;flex:none}
.art figure{margin:0;text-align:center}
.art img{image-rendering:pixelated;filter:drop-shadow(0 6px 5px rgba(20,45,70,.3));display:block}
.art .big img{height:128px;width:128px}
.art .sm img{height:76px;width:76px}
.art figcaption{font-family:var(--disp);font-size:.52rem;color:#1b4a68;margin-top:4px}
.pn{font-family:var(--disp);font-size:.78rem;color:#1b4a68}
.ehead h1{font-size:clamp(1.3rem,4vw,2.1rem);color:#10344c;margin:5px 0 10px;text-shadow:0 2px 0 rgba(255,255,255,.28)}

/* ── type chips (the site's own palette) ────────────────────────────────── */
.types{display:flex;gap:5px;flex-wrap:wrap}
.t{font-size:.72rem;font-weight:800;color:#fff;padding:3px 10px;border-radius:999px;display:inline-block}
.t-normal{background:#8a8574}.t-fire{background:#dd6610}.t-water{background:#2f7fd0}.t-electric{background:#c19406}
.t-grass{background:#4e9c33}.t-ice{background:#3f9fb0}.t-fighting{background:#b23520}.t-poison{background:#8a3f97}
.t-ground{background:#a5762f}.t-flying{background:#6c93d4}.t-psychic{background:#d43f70}.t-bug{background:#7a8c1c}
.t-rock{background:#96803a}.t-ghost{background:#56508c}.t-dragon{background:#5138c0}.t-dark{background:#55463d}
.t-steel{background:#6f8290}.t-fairy{background:#cf5f92}

/* ── body ───────────────────────────────────────────────────────────────── */
main{padding:0 0 10px}
.col{max-width:860px;margin:0 auto;padding:0 22px}
h2{font-size:.92rem;margin:34px 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
h2 em{font-style:normal;font-family:var(--body-f);font-weight:800;color:var(--mut);font-size:.84rem}
h3{font-size:.72rem;color:var(--gold);margin:22px 0 9px}
p{margin:0 0 14px;max-width:72ch}

.get{display:flex;gap:13px;align-items:flex-start;border-radius:16px;padding:15px 17px;
  border:2px solid;font-weight:700}
.get .gi{font-size:1.3rem;line-height:1;flex:none}
.get b{display:block;font-family:var(--disp);font-weight:400;font-size:.82rem;margin-bottom:3px}
.get span{font-weight:600;font-size:.9rem;display:block}
.get.wild{background:rgba(98,201,81,.13);border-color:rgba(63,158,63,.45);color:#26611f}
.get.wild b{color:#2c6b22}
.get.legendary,.get.roam{background:rgba(255,203,5,.16);border-color:rgba(230,180,0,.6);color:#6b4e00}
.get.legendary b,.get.roam b{color:#7a5900}
.get.research{background:rgba(139,79,196,.13);border-color:rgba(139,79,196,.45);color:#4a2668}
.get.research b{color:#5b3080}
.get.egg{background:rgba(232,160,192,.16);border-color:rgba(200,110,155,.5);color:#6b2447}
.get.egg b{color:#7d2a52}
.get.evolve{background:rgba(85,177,239,.13);border-color:rgba(42,109,158,.45);color:#1d4a68}
.get.evolve b{color:#215c85}
.get.tear{background:rgba(139,79,196,.10);border-color:rgba(139,79,196,.4);color:#4a2668}
.get.tear b{color:#5b3080}
.get.none{background:rgba(194,64,42,.10);border-color:rgba(194,64,42,.4);color:#7a2a1c}
.get.none b{color:#8c3020}

/* Three across, not auto-fit. There are exactly six facts, and auto-fit fitted five on a desktop
   column and left Catch rate sitting alone on a second row next to a half-page of nothing. Three
   also gives Abilities enough width to keep "(hidden)" on the same line as its ability. */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px}
.fact dt{font-family:var(--disp);font-size:.54rem;letter-spacing:.05em;color:var(--gold);margin-bottom:4px}
.fact dd{font-weight:800;color:var(--ink);font-size:.91rem}
.fact dd i{font-style:normal;color:var(--mut);font-weight:700}

.st{display:grid;grid-template-columns:76px 44px 1fr;gap:10px;align-items:center;margin-bottom:6px;font-size:.86rem}
.st b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.st i{font-style:normal;color:var(--mut);font-weight:700}
.bar{height:11px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--y2),var(--y-deep))}

.mus{display:grid;gap:9px}
.mu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mu strong{font-family:var(--disp);font-weight:400;font-size:.6rem;color:var(--mut);width:84px;flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap}

.evo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:15px}
.es{text-align:center;padding:6px;border-radius:12px;display:block}
.es:hover{background:var(--surface2)}
.es img{height:64px;width:64px;image-rendering:pixelated;display:block;margin:0 auto}
.es span{display:block;font-weight:800;color:var(--ink);font-size:.83rem;margin-top:3px}
.es.here span{color:var(--gold)}
.ea{font-family:var(--disp);color:var(--gold);font-size:.64rem;text-align:center;line-height:1.4}

.mv{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow-x:auto}
.mvt{width:100%;border-collapse:collapse;font-size:.85rem}
.mvt caption{text-align:left;padding:10px 11px 0;font-weight:700;color:var(--mut);font-size:.8rem}
.mvt th{background:var(--bg2);font-family:var(--disp);font-weight:400;font-size:.58rem;letter-spacing:.04em;
  color:var(--ink);text-align:left;padding:9px 11px;white-space:nowrap}
.mvt td{padding:8px 11px;border-top:1px solid var(--line);font-weight:600;vertical-align:middle}
.mvt td.lv{font-family:var(--disp);font-size:.66rem;color:var(--gold);width:50px}
.mvt td.nm{color:var(--ink);font-weight:800;white-space:nowrap}
.mvt td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--mut);width:56px}
.cat{font-size:.58rem;font-weight:800;padding:2px 7px;border-radius:999px;color:#fff;display:inline-block}
.cat.P{background:#b23520}.cat.S{background:#3a6fa8}.cat.T{background:#8a8574}

.note{color:var(--mut);font-size:.83rem;margin-top:18px;font-weight:600}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:34px 0 0;
  border-top:1px solid var(--line);padding-top:18px}
.pager a{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:9px 15px}
.pager a:hover{border-color:var(--y)}
.pager img{height:40px;width:40px;image-rendering:pixelated}
.pager em{font-style:normal;font-family:var(--disp);font-size:.54rem;color:var(--mut);display:block}
.back{margin:26px 0 0}
.back a{color:var(--gold);font-weight:800}
.back a:hover{text-decoration:underline}
.endcta{margin:30px 0 50px;text-align:center}

/* ── /features ──────────────────────────────────────────────────────────── */
.fhead{background:var(--sky-flat);padding:44px 0 38px;text-align:center}
.fhead h1{font-size:clamp(1.5rem,3.6vw,2.4rem);color:#12354d;text-shadow:0 2px 0 rgba(255,255,255,.3);margin-bottom:12px}
.fhead p{color:#1b4a68;font-weight:600;max-width:62ch;margin:0 auto}
.fsec{border-top:1px solid var(--line);padding-top:6px}
.fsec:first-of-type{border-top:0}
.flist{list-style:none;padding:0;margin:0 0 6px}
.flist li{position:relative;padding-left:26px;margin:0 0 10px;max-width:72ch}
.flist li::before{content:"";position:absolute;left:4px;top:.72em;width:9px;height:9px;border-radius:3px;background:var(--y);border:1px solid var(--y-deep)}
.flist code,p code,li code{background:var(--bg2);border:1px solid var(--line);padding:2px 8px;border-radius:7px;color:var(--gold);font-weight:700;font-size:.9em}
/* The FAQ disclosure, matching the home page's: a + that rotates into an × rather than swapping
   glyphs, so there is no second character to get wrong. */
.fsec details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 20px;margin:0 0 10px;transition:border-color .2s}
.fsec details[open]{border-color:var(--line2)}
.fsec summary{list-style:none;cursor:pointer;font-weight:800;font-size:1.02rem;color:var(--ink);padding:17px 0;display:flex;justify-content:space-between;align-items:center;gap:14px}
.fsec summary::-webkit-details-marker{display:none}
.fsec summary::after{content:"+";color:var(--gold);font-size:1.5rem;font-weight:700;line-height:1;flex:none;transition:transform .2s var(--ease)}
.fsec details[open] summary::after{transform:rotate(45deg)}
.fsec details p{padding:0 0 18px;margin:0;max-width:650px}

@media(max-width:600px){
  /* nowrap on both halves of the nav: at 360px the wordmark broke to "CATCH 'EM / CORD" and the
     button to "ADD TO / DISCORD", which doubled the bar's height and pushed the page down. */
  nav .row{height:62px;gap:8px}
  .brand{font-size:.72rem;white-space:nowrap}.brand img{width:32px;height:32px}
  .btn{padding:9px 13px;font-size:.7rem;white-space:nowrap}
  .ehead .row{gap:14px}
  .art .big img{height:104px;width:104px}
  .art .sm img{height:62px;width:62px}
  .mu strong{width:100%}
  .st{grid-template-columns:66px 40px 1fr;gap:8px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .pager a{padding:8px 11px}
  /* Six columns clipped Pow and Acc off the right at 360px, behind a horizontal scroll with no
     visible affordance. Those two numbers are the point of the table, so the move class goes
     instead and the rest fits with no scroll at all. */
  .mvt .cls{display:none}
  .mvt{font-size:.8rem}
  .mvt th,.mvt td{padding:7px 8px}
  .mvt td.lv{width:40px}
  .mvt td.num{width:44px}
  .mvt td.nm{white-space:normal}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}