/* The wiki's one stylesheet. A reference-book look in the spirit of Showdown's teambuilder: its own
   type and category icons, its stat colours, names in ink rather than link blue, quiet rules between
   rows, one accent for what is selected. Phones get the same pages with the name column pinned while
   a table scrolls sideways, and effects under names. */
:root { --bg: #FFFFFF; --ink: #16181D; --dim: #6E737B; --faint: #A3A8AF; --line: #ECEDF0; --rule: #D5D8DD;
  --soft: #F5F6F8; --accent: #1F5FBF; --red: #C92A2A; --green: #2B8A3E; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; }
img.ti { display: inline-block; width: 32px; height: 14px; vertical-align: middle; margin: 1px 2px 1px 0; }

header { background: var(--bg); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 var(--rule); }
header .in { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 48px; display: flex; align-items: stretch; gap: 32px; }
header .brand { display: flex; align-items: center; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
header .brand:hover { color: var(--ink); }
header nav { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
header nav a { display: flex; align-items: center; color: var(--dim); white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
header nav a:hover { color: var(--ink); }
header nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
main { max-width: 1200px; margin: 0 auto; padding: 20px 20px 56px; min-height: 60vh; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; line-height: 1.2; }
h2 { font-size: 13px; font-weight: 700; margin: 36px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.subtle { color: var(--dim); }
.loading { height: 40vh; }

.pi { display: inline-block; width: 40px; height: 30px; background-repeat: no-repeat; vertical-align: middle; flex: none; }
.ii { display: inline-block; width: 24px; height: 24px; background-repeat: no-repeat; vertical-align: middle; margin-right: 6px; flex: none; }

/* search bar, as in Showdown's teambuilder */
.search { position: relative; margin-bottom: 8px; }
.sbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 44px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; cursor: text; }
.sbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31,95,191,.12); }
.sbar input { flex: 1 1 200px; min-width: 120px; border: none; outline: none; font: inherit; font-size: 16px; height: 34px; padding: 0 2px; background: transparent; color: var(--ink); }
.sbar input::placeholder { color: var(--faint); }
.chips { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 2px 0 9px; border: 1px solid var(--rule); border-radius: 4px; background: var(--soft); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip .k, .sug .k { color: var(--dim); font-size: 12px; font-weight: 400; }
.chip button { border: none; background: none; color: var(--dim); font-size: 16px; line-height: 1; padding: 4px 6px; cursor: pointer; }
.chip button:hover { color: var(--ink); }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; border: 1px solid var(--rule); border-radius: 6px; background: #fff; box-shadow: 0 8px 24px rgba(22,24,29,.08); overflow: hidden; }
.sug .opt { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; cursor: pointer; }
.sug .opt.hi, .sug .opt:hover { background: var(--soft); }

/* tables */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; background: var(--bg); }
th { font-size: 12px; font-weight: 600; color: var(--dim); white-space: nowrap; border-bottom-color: var(--rule); }
th.sort { cursor: pointer; user-select: none; -webkit-user-select: none; }
th.sort:hover { color: var(--ink); }
th.sort.on { color: var(--accent); }
td.n, th.n { text-align: right; }
tbody tr:hover td { background: var(--soft); }
tbody tr.link { cursor: pointer; }
td.ty, td.types { white-space: nowrap; }
td.desc { color: var(--dim); }
.cs { display: none; }
.sub { display: none; color: var(--dim); font-size: 12px; line-height: 1.4; margin-top: 2px; white-space: normal; }
tr.grp td { background: none; font-size: 13px; font-weight: 700; padding: 22px 8px 6px; border-bottom: 1px solid var(--ink); }
tbody tr.grp:first-child td { padding-top: 10px; }
tr.grp:hover td { background: none; }
tr.grp.ban td { color: var(--red); border-bottom-color: var(--red); }
tr.banned td, tr.useless td { opacity: .5; }
tr.banned td.nm { opacity: 1; }
tr.banned td.nm a, tr.banned td.nm .pi { opacity: .5; }
.tier { width: 36px; padding-right: 0; color: var(--dim); font-size: 12px; white-space: nowrap; }
tr.banned td.tier { opacity: .5; }
/* stats in grey; each Pokémon's best stat in ink, so the spread shows without reading every number */
td.st { color: var(--dim); }
td.st.top { color: var(--ink); font-weight: 600; }
td.bst { font-weight: 600; }
.tier.ban { color: var(--red); }
.banlabel { color: var(--red); font-size: 12px; font-weight: 400; margin-left: 8px; white-space: nowrap; }
td.nm, td.mv { white-space: nowrap; }
td.nm a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
td.mv a { font-weight: 600; }
td.use { font-weight: 600; }
/* bars under numbers: a stat in Showdown's colour, a change's gain or loss, a usage share */
th.first, td.first { border-left: 1px solid var(--line); }
.more { height: 1px; }
.banned-note { color: var(--red); }
.up { color: var(--green); } .down { color: var(--red); }
.old { opacity: .4; }
s.old { opacity: .5; }
.new { color: var(--green); }
table.changes td { vertical-align: top; }
table.changes .same { color: var(--faint); }
table.changes .same img.ti { opacity: .45; }
.to { white-space: nowrap; }
.to .was { color: var(--faint); }
.to .was img.ti { opacity: .45; }
.to .arr { color: var(--faint); margin: 0 5px; }
td.chg { white-space: nowrap; color: var(--ink); }
table.changes td.nm .sub { padding-left: 44px; color: var(--ink); }
td.eff del, .sub del { color: var(--red); text-decoration: line-through; text-decoration-color: rgba(201,42,42,.5); opacity: .75; }
td.eff ins, .sub ins { color: var(--green); text-decoration: none; background: rgba(43,138,62,.08); border-radius: 2px; padding: 0 1px; }
#cfilter { font-size: 15px; }
td.stat { white-space: nowrap; }
td.stat.same { color: var(--faint); }
td.stat span, td.dl span { font-size: 12px; font-weight: 600; margin-left: 4px; }

/* tabs (Changes) */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 10px 0; color: var(--dim); box-shadow: inset 0 -2px 0 transparent; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

/* sets on a Pokémon page */
.sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 32px; }
.set h3 { font-size: 13px; font-weight: 600; color: var(--dim); margin: 6px 0 2px; }
.sr { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; border-bottom: 1px solid var(--line); }
.sr .sl { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr .sl a { display: inline-flex; align-items: center; gap: 4px; }
.sr .p { color: var(--dim); font-variant-numeric: tabular-nums; }
h2 .fmts { float: right; display: flex; gap: 14px; }
h2 .fmts button { border: none; background: none; padding: 0; font: inherit; color: var(--faint); cursor: pointer; }
h2 .fmts button.on { color: var(--ink); }

/* entry pages */
table.facts th { width: 110px; font-size: 14px; font-weight: 400; color: var(--dim); }
table.facts td, table.facts th { padding: 7px 0; }
table.facts td { padding-left: 8px; }
table.stats { max-width: 640px; }
table.stats th { width: 72px; font-size: 14px; font-weight: 400; color: var(--dim); }
table.stats td.val { width: 40px; text-align: right; font-weight: 700; }
table.stats th, table.stats td { border: none; padding: 3px 10px 3px 0; background: none; }
table.stats tr:hover td { background: none; }
table.stats tr.total td, table.stats tr.total th { padding-top: 8px; }
td.dl { width: 44px; padding-left: 0; }
.bar { height: 10px; border-radius: 2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 8px; }
.grid a { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px; }
.grid a:hover { background: var(--soft); }
.lead { font-size: 16px; margin: 0; max-width: 680px; }
.lead + .banned-note { margin-top: 8px; }
h1 .ii { margin-right: 10px; }
.hero { display: flex; align-items: center; gap: 20px; }
.hero img.big { width: 144px; height: 144px; object-fit: contain; flex: none; }
.hero h1 { margin: 0 0 6px; }
.hero h1 .banlabel { font-size: 13px; vertical-align: middle; margin-left: 10px; letter-spacing: 0; }
.hero .abil { margin: 6px 0 2px; }
.hero .abil a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.hero .abil a:hover { text-decoration-color: currentColor; }
.lead a, td a.ext { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.x { font-size: 11px; font-weight: 700; color: var(--dim); margin: 0 8px 0 0; }

@media (max-width: 720px) {
  html, body { font-size: 13px; }
  header .in { gap: 18px; height: 46px; padding: 0 12px; }
  header nav { gap: 16px; }
  main { padding: 12px 12px 40px; }
  h1 { font-size: 22px; }
  h2 { margin-top: 28px; }
  th, td { padding: 7px 5px; }
  /* the name stays in view while the numbers scroll */
  table.pin td:first-child, table.pin th:first-child { position: sticky; left: 0; z-index: 1; }
  table.pin td:first-child { box-shadow: 1px 0 0 var(--line); }
  td.nm { max-width: 46vw; white-space: normal; }
  td.nm a { white-space: nowrap; }
  td.types, th.types { display: none; }
  td.nm .sub, td.mv .sub { display: block; }
  td.nm .sub { margin-top: 0; padding-left: 44px; }
  td.desc, th.desc { display: none; }
  .cl { display: none; } .cs { display: inline; }
  td.mv { min-width: 150px; max-width: 58vw; white-space: normal; }
  .banlabel { display: block; margin-left: 0; }
  td.nm .banlabel { padding-left: 44px; }
  /* the tier and the name both stay in view */
  table.pin td.tier, table.pin th.tier { position: sticky; left: 0; z-index: 1; width: 30px; min-width: 30px; }
  table.pin td.tier + td.nm, table.pin th.tier + th { position: sticky; left: 35px; z-index: 1; box-shadow: 1px 0 0 var(--line); }
  table.pin td.tier { box-shadow: none; }
  .hero { gap: 12px; }
  .hero img.big { width: 96px; height: 96px; }
  .hero h1 .banlabel { display: block; margin: 2px 0 0; }
  table.facts th { width: 96px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sets { grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .lead { font-size: 15px; }
}
/* a phone: every tab in view (the Pokédex tab leads home, the name stays in the tab title) */
@media (max-width: 480px) {
  header .brand { display: none; }
  header nav { flex: 1; justify-content: space-between; gap: 10px; }
}