@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(/assets/fonts/Barlow-Regular.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(/assets/fonts/Barlow-Medium.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(/assets/fonts/Barlow-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/assets/fonts/BarlowCondensed-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/assets/fonts/BarlowCondensed-Bold.woff2) format("woff2")}
:root{
  --bg:#0f1622;--surface:#18212f;--ink:#e6ebf3;--muted:#93a0b6;--line:#2a3547;--soft:#243042;
  --ll:#e56a8a;--gl:#5b93f0;--ul:#e3b937;--ml:#a07de6;--accent:var(--gl);--good:#3cc485;--mid:#e3a83a;--bad:#e2685d;
  color-scheme:dark;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
  --bg:#e9edf2;--surface:#ffffff;--ink:#16233a;--muted:#5b6880;--line:#cfd6e0;--soft:#dfe5ee;
  --ll:#d0486a;--gl:#2f6fd6;--ul:#c79a12;--ml:#7a4fc9;--good:#1f9d63;--mid:#c98a12;--bad:#c6453a;color-scheme:light;}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 Barlow,system-ui,sans-serif}
main{max-width:560px;margin:0 auto;padding:18px 16px 40px}
h1{font:700 1.6rem/1.1 "Barlow Condensed",system-ui,sans-serif;margin:0 0 14px}
h2{font:700 1.2rem "Barlow Condensed",sans-serif;margin:26px 0 8px}
label,.lab{display:block;font-size:.85rem;color:var(--muted);margin:0 0 4px}
input,select,button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field{margin-bottom:14px}

/* autocomplete */
.ac{position:relative}
.ac input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:1.05rem}
.ac ul{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(10,20,40,.18);max-height:320px;overflow:auto}
.ac li{padding:10px 10px;border-radius:7px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.ac li small{color:var(--muted)}
.ac li[aria-selected=true],.ac li:hover{background:var(--soft)}

/* IV bars */
/* dragging a bar must never start a text selection or the iOS callout menu */
#ivs,.ivtools{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.iv{display:grid;grid-template-columns:54px 34px 1fr 34px 24px;align-items:center;gap:6px;margin-bottom:5px}
.iv .step{height:36px;border:1px solid var(--line);background:var(--surface);border-radius:8px;font-size:1.15rem;font-weight:600;cursor:pointer;padding:0;touch-action:manipulation}
.iv .name{font-size:.9rem;color:var(--muted)}
.iv .val{font:700 1.1rem "Barlow Condensed",sans-serif;text-align:right}
.bar{display:grid;grid-template-columns:repeat(15,1fr);gap:2px;height:30px;touch-action:none;cursor:pointer;border-radius:8px;overflow:hidden}
.bar span{background:var(--soft)}
.bar span:nth-child(6),.bar span:nth-child(11){margin-left:5px}
.bar span.on{background:var(--accent)}
.ivtools{display:flex;gap:6px;margin:6px 0 14px 60px}
.ivtools button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:.85rem;cursor:pointer}

.opts{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end;margin-bottom:6px}
.cpf input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
#cpnote{font-size:.9rem;margin-top:4px}
.cell .warn{font-size:.85rem;margin-left:3px}
.cell.over{border-style:dashed;opacity:.75}
.overmsg{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--soft);color:var(--bad);font-weight:600;font-size:.95rem}
select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.check{display:flex;align-items:center;gap:8px;padding-bottom:11px;white-space:nowrap}
/* sits directly under the CP box so the level reads as belonging to it */
.cpnote{margin:-10px 0 12px;font-size:.85rem;color:var(--muted);text-align:right}
.toprow{display:grid;grid-template-columns:1fr 84px auto;gap:8px;align-items:end}
.toprow .ac{min-width:0}
.toprow .check{padding-bottom:13px;gap:5px;font-size:.9rem}

/* matrix */
.matrix{width:100%;border-collapse:separate;border-spacing:0 6px}
.matrix th{font-size:.8rem;color:var(--muted);font-weight:500;text-align:center;padding:0 4px}
.matrix th:first-child{text-align:left}
.matrix td{padding:0}
.matrix td.n{font-weight:600;padding-right:8px;padding-left:calc(var(--depth,0)*12px)}
.matrix tr.cur td.n{color:var(--accent)}
.cell{width:100%;min-height:46px;border:1px solid var(--line);background:var(--surface);border-radius:10px;font:700 1.35rem "Barlow Condensed",sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.cell.t1{color:var(--good)}.cell.t2{color:var(--mid)}.cell.t3{color:var(--bad)}
.cell.na{color:var(--muted);font-size:1rem;font-weight:600;cursor:default}
/* not allowed in the league at all, e.g. fully evolved in Little League */
.cell.inel{opacity:.4;border-style:dashed;cursor:help}
/* the Pokémon name in the matrix switches the ranker to that Pokémon */
.matrix td.n button.name{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;text-align:left}
.matrix td.n button.name:hover{color:var(--accent);text-decoration:underline}
.cell.sel{border:2px solid var(--accent);background:var(--soft)}
.legend{font-size:.8rem;color:var(--muted);margin-top:2px}
/* league columns can be dropped from the matrix and put back */
.matrix th button.colx{background:none;border:0;padding:5px 6px;min-height:26px;font:inherit;font-size:.8rem;color:var(--muted);font-weight:500;cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;gap:4px}
.matrix th button.colx span{font-size:.7rem;opacity:.55}
.matrix th button.colx:hover:not(:disabled){color:var(--ink);background:var(--soft)}
.matrix th button.colx:hover:not(:disabled) span{opacity:1;color:var(--bad)}
.matrix th button.colx:disabled{cursor:default}
.matrix th button.colx:disabled span{display:none}
.hiddencols{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);margin-top:8px}
.hiddencols button{border:1px dashed var(--line);background:none;color:var(--muted);border-radius:999px;padding:4px 10px;font-size:.8rem;cursor:pointer}
.hiddencols button:hover{color:var(--ink);border-color:var(--accent)}

/* detail */
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 4px;font-weight:600;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.result{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:12px;padding:16px}
.rtitle{font-weight:600;color:var(--muted)}
.rank{font:700 4rem/1 "Barlow Condensed",system-ui,sans-serif;color:var(--accent)}
.rank small{font-size:1.3rem;color:var(--muted);font-weight:600}
.pct{font-weight:600;font-size:1.1rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stats div{font-size:.8rem;color:var(--muted)}
.stats b{display:block;font:700 1.25rem "Barlow Condensed",sans-serif;color:var(--ink)}
.msg{color:var(--muted);margin:0}
.tw{overflow-x:auto;margin-top:10px}
table.top{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
.top th,.top td{text-align:right;padding:7px 5px;border-bottom:1px solid var(--line);white-space:nowrap}
.top th{color:var(--muted);font-weight:500}
.top th:first-child,.top td:first-child{text-align:left}
.top tr.me td{background:var(--soft);color:var(--accent);font-weight:700}
/* your own IVs, pinned above the top 10 */
.top tr.pin td{border-bottom:2px solid var(--accent);padding-top:3px;padding-bottom:9px}
.top tr.pin td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.top .up{color:var(--good)}.top .dn{color:var(--bad)}
.foot{font-size:.8rem;color:var(--muted);margin-top:22px}
/* site chrome */
.site{max-width:560px;margin:0 auto;padding:10px 16px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.site .brand{font:700 1.15rem "Barlow Condensed",system-ui,sans-serif;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.burger{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{position:absolute;z-index:20;right:16px;top:calc(100% + 6px);width:min(260px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:6px}
.menu a{display:block;color:var(--ink);text-decoration:none;font-weight:600;padding:11px 12px;border-radius:9px}
.menu a:hover{background:var(--soft)}
.menu a[aria-current=page]{color:var(--accent);background:var(--soft)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.menu .theme{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:none;padding:11px 12px;border-radius:9px;font-weight:600;cursor:pointer;text-align:left}
.menu .theme:hover{background:var(--soft)}
.switch{position:relative;width:40px;height:24px;border-radius:999px;background:var(--line);flex:none;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.theme[aria-checked=true] .switch{background:var(--accent)}
.theme[aria-checked=true] .switch::after{transform:translateX(16px)}
/* faq */
.faq h2{font-size:1.15rem;margin:24px 0 6px}
.faq p{margin:0 0 8px}
footer{max-width:560px;margin:0 auto;padding:0 16px 32px;font-size:.8rem;color:var(--muted)}
footer a{color:inherit}
/* search strings */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sbox{width:100%;min-height:150px;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;resize:vertical;word-break:break-all}
.copyrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 4px}
.btn{border:0;background:var(--accent);color:#fff;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer}
.count{font-size:.85rem;color:var(--muted)}
.prose p,.prose li{color:var(--ink)}
.prose h2{margin-top:22px}
.prose a{color:var(--accent)}
.top a{color:inherit}