/* Ben's Pokédex Binder — visual system
   ink-navy binder chrome · ivory (light) / charcoal (dark) album pages · brass accent */

:root{
  --desk:#E0DCD2; --desk-2:#CFCABD;
  --binder:#161D2C; --binder-2:#212B41; --binder-line:#313D58;
  --chrome-ink:#F0ECE2; --chrome-ink-2:#98A2B6;
  --page:#F3F0E7; --page-edge:#D8D2C2;
  --ink:#22262E; --ink-2:#71757F;
  --pocket:rgba(26,30,40,.055); --pocket-line:rgba(26,30,40,.15);
  --card:#FCFBF7; --card-line:rgba(26,30,40,.13);
  --brass:#A9832F; --brass-2:#C6A15B;
  --good:#2F7A4A; --bad:#B0392F;
  --ghost-filter:grayscale(1) brightness(0); --ghost-op:.13;
  --gloss:rgba(255,255,255,.20);
  --ring-a:#C9CEDA; --ring-b:#6E7788;
  --shadow:0 18px 40px -22px rgba(16,20,30,.6);
  --sheet:url("sprites.webp");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --desk:#0E1014; --desk-2:#07080B;
    --binder:#0D121C; --binder-2:#161E2F; --binder-line:#28324A;
    --page:#191C23; --page-edge:#0C0E13;
    --ink:#E8E5DD; --ink-2:#969AA4;
    --pocket:rgba(255,255,255,.042); --pocket-line:rgba(255,255,255,.10);
    --card:#2F3641; --card-line:rgba(255,255,255,.17);
    --brass:#D8B978; --brass-2:#B7965A;
    --good:#63C08A; --bad:#E4736A;
    --ghost-filter:grayscale(1) brightness(0) invert(1); --ghost-op:.16;
    --gloss:rgba(255,255,255,.07);
    --ring-a:#8E96A6; --ring-b:#464E5E;
    --shadow:0 18px 40px -22px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --desk:#0E1014; --desk-2:#07080B;
  --binder:#0D121C; --binder-2:#161E2F; --binder-line:#28324A;
  --page:#191C23; --page-edge:#0C0E13;
  --ink:#E8E5DD; --ink-2:#969AA4;
  --pocket:rgba(255,255,255,.042); --pocket-line:rgba(255,255,255,.10);
  --card:#2F3641; --card-line:rgba(255,255,255,.17);
  --brass:#D8B978; --brass-2:#B7965A;
  --good:#63C08A; --bad:#E4736A;
  --ghost-filter:grayscale(1) brightness(0) invert(1); --ghost-op:.16;
  --gloss:rgba(255,255,255,.07);
  --ring-a:#8E96A6; --ring-b:#464E5E;
  --shadow:0 18px 40px -22px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  background:radial-gradient(120% 80% at 50% -10%, var(--desk) 0%, var(--desk-2) 100%) fixed;
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;-webkit-text-size-adjust:100%;
}
.wrap{max-width:1240px;margin:0 auto;padding:18px 14px 64px}
[hidden]{display:none !important}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---------------- binder chrome ---------------- */
.bar{
  background:linear-gradient(180deg,var(--binder-2),var(--binder));
  border:1px solid var(--binder-line);border-radius:14px 14px 4px 4px;
  color:var(--chrome-ink);padding:14px 16px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:34px;height:34px;flex:none}
h1{
  font-family:Archivo,system-ui,sans-serif;font-variation-settings:"wdth" 112,"wght" 800;
  font-size:20px;line-height:1.05;margin:0;letter-spacing:-.015em;text-wrap:balance;
}
.sub{margin:2px 0 0;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--chrome-ink-2)}
.prog{display:flex;align-items:center;gap:14px;flex:1;min-width:240px;justify-content:flex-end}
.pnum{white-space:nowrap}
.pnum strong{font-size:22px;font-weight:600;color:var(--brass-2)}
.pnum span{font-size:12px;color:var(--chrome-ink-2)}
.track{flex:1;max-width:280px;height:7px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brass),var(--brass-2));transition:width .35s ease}
.pct{font-size:12px;color:var(--chrome-ink-2);min-width:38px;text-align:right}

/* ---------------- tabs + tools ---------------- */
.tools{
  background:var(--binder);border:1px solid var(--binder-line);border-top:0;
  border-radius:0 0 4px 4px;padding:9px 14px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.tabs{display:flex;gap:3px;background:rgba(255,255,255,.05);border:1px solid var(--binder-line);border-radius:9px;padding:3px;flex:none}
.tab{
  background:none;border:0;color:var(--chrome-ink-2);border-radius:6px;
  padding:6px 13px;cursor:pointer;font:inherit;font-size:13px;transition:all .15s;white-space:nowrap;
}
.tab:hover{color:var(--chrome-ink)}
.tab[aria-selected="true"]{background:var(--binder-2);color:var(--chrome-ink);box-shadow:0 1px 2px rgba(0,0,0,.35);font-weight:500}
.tab:focus-visible{outline:2px solid var(--brass-2);outline-offset:1px}
.tabcount{font-size:11px;opacity:.6;margin-left:5px}

.search{position:relative;flex:1 1 200px;min-width:160px}
.search input{
  width:100%;padding:8px 30px;border-radius:8px;border:1px solid var(--binder-line);
  background:rgba(255,255,255,.06);color:var(--chrome-ink);font:inherit;font-size:14px;
}
.search input::placeholder{color:var(--chrome-ink-2)}
.search input:focus{outline:2px solid var(--brass-2);outline-offset:1px}
.search .ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--chrome-ink-2);fill:none;stroke-width:2}
.clr{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--chrome-ink-2);cursor:pointer;font-size:16px;padding:2px 7px;border-radius:6px;display:none}
.search.on .clr{display:block}
.results{
  position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;
  background:var(--binder-2);border:1px solid var(--binder-line);border-radius:10px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.8);overflow:hidden;max-height:300px;overflow-y:auto;display:none;
}
.results:not(:empty){display:block}
.results button{
  display:flex;width:100%;gap:10px;align-items:center;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--binder-line);
  color:var(--chrome-ink);padding:7px 10px;cursor:pointer;font:inherit;font-size:13.5px;
}
.results button:last-child{border-bottom:0}
.results button:hover,.results button:focus-visible{background:rgba(255,255,255,.07);outline:0}
.results .rn{font-size:12px;color:var(--chrome-ink-2);min-width:42px}
.results .rp{margin-left:auto;font-size:11px;color:var(--chrome-ink-2);text-transform:uppercase;letter-spacing:.06em}
.results .s{width:26px;height:26px;flex:none}

.gens{display:flex;gap:4px;flex-wrap:wrap}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.03em;
  background:rgba(255,255,255,.05);border:1px solid var(--binder-line);color:var(--chrome-ink-2);
  border-radius:7px;padding:5px 8px;cursor:pointer;transition:all .15s;
}
.chip:hover{color:var(--chrome-ink);border-color:var(--brass-2)}
.chip:focus-visible{outline:2px solid var(--brass-2);outline-offset:1px}
.toggle{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--binder-line);
  color:var(--chrome-ink-2);border-radius:8px;padding:6px 11px;font:inherit;font-size:13px;transition:all .15s;
}
.toggle:hover{color:var(--chrome-ink)}
.toggle[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:#14100A;font-weight:500}
.toggle:focus-visible{outline:2px solid var(--brass-2);outline-offset:1px}

/* ---------------- edit banner ---------------- */
.editbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--binder-2);border:1px solid var(--brass);border-top:0;
  border-radius:0 0 4px 4px;padding:9px 14px;color:var(--chrome-ink);font-size:13px;
}
.editbar .dot{width:8px;height:8px;border-radius:50%;background:var(--brass-2);flex:none}
.editbar .st{color:var(--chrome-ink-2);font-size:12.5px}
.editbar .st[data-state="saving"]{color:var(--brass-2)}
.editbar .st[data-state="error"]{color:var(--bad)}
.editbar .spacer{flex:1}
.editbar button{
  background:rgba(255,255,255,.06);border:1px solid var(--binder-line);color:var(--chrome-ink);
  border-radius:8px;padding:6px 11px;cursor:pointer;font:inherit;font-size:12.5px;
}
.editbar button:hover{border-color:var(--brass-2)}
.editbar button:focus-visible{outline:2px solid var(--brass-2);outline-offset:1px}

/* ---------------- binder pages ---------------- */
#binder{margin-top:20px;display:grid;grid-template-columns:1fr;justify-items:stretch;align-items:start}
.rings{display:none}
@media (min-width:940px){
  #binder{grid-template-columns:1fr 30px 1fr}
  .rings{display:flex;grid-column:2;grid-row:1;flex-direction:column;justify-content:space-evenly;align-items:center;align-self:stretch;padding:26px 0}
  .rings i{
    width:20px;height:20px;border-radius:50%;border:3px solid transparent;
    background:linear-gradient(var(--page),var(--page)) padding-box,linear-gradient(150deg,var(--ring-a),var(--ring-b)) border-box;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
#binder [data-side]{grid-row:1;grid-column:1}
@media (min-width:940px){ #binder [data-side="R"]{grid-column:3} }
.page{
  display:none;background:var(--page);border:1px solid var(--page-edge);border-radius:6px;
  padding:12px 12px 10px;box-shadow:var(--shadow);
}
.page.show{display:block;animation:turn .34s cubic-bezier(.22,.7,.3,1)}
.page[data-side="L"]{border-radius:6px 2px 2px 6px;transform-origin:right center}
.page[data-side="R"]{border-radius:2px 6px 6px 2px;transform-origin:left center}
@keyframes turn{from{opacity:0;transform:rotateY(9deg) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page.show{animation:none}}

.cover{display:none}
@media (min-width:940px){
  .cover.show{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
    text-align:center;padding:40px 30px;min-height:340px;align-self:stretch;
    background:linear-gradient(165deg,var(--binder-2),var(--binder));
    border:1px solid var(--binder-line);border-radius:6px;color:var(--chrome-ink);box-shadow:var(--shadow);
  }
}
.cover .cmark{width:46px;height:46px;opacity:.9}
.cover b{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 110,"wght" 800;font-size:19px;letter-spacing:-.01em}
.cover .cline{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--chrome-ink-2)}
.cover .cbig{display:flex;align-items:baseline;gap:7px;margin-top:12px}
.cover .cbig strong{font-size:34px;font-weight:600;color:var(--brass-2)}
.cover .cbig span{font-size:11.5px;color:var(--chrome-ink-2)}
.cover .ctrack{width:180px;height:6px;border-radius:99px;background:rgba(255,255,255,.10);overflow:hidden}
.cover .ctrack i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass-2));transition:width .35s}
.cover .cnote{margin:14px 0 0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-ink-2)}

.plabel{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin:0 2px 9px;padding-bottom:7px;border-bottom:1px solid var(--page-edge);
}
.plabel b{font-weight:600;color:var(--ink)}
.grid{
  --gap:7px;
  --avail:max(300px, calc(100vh - 340px));
  --avail:max(300px, calc(100svh - 340px));
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  max-width:calc((var(--avail) - 3 * var(--gap)) * 0.7159 + 3 * var(--gap));
  margin-inline:auto;
}

/* ---------------- pockets ---------------- */
.slot{
  position:relative;aspect-ratio:63/88;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:5% 3% 8%;margin:0;overflow:hidden;border:0;border-radius:5px;
  background:var(--pocket);
  box-shadow:inset 0 0 0 1px var(--pocket-line),inset 0 2px 4px -2px rgba(0,0,0,.25);
  font:inherit;color:var(--ink-2);text-align:center;
  transition:transform .13s ease,box-shadow .13s ease,background .13s ease;
  --c1:var(--ink-2);--c2:var(--c1);
}
.slot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:5px;background:linear-gradient(118deg,var(--gloss) 0 26%,transparent 44%)}
.slot::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--c1) 0 50%,var(--c2) 50% 100%);opacity:.28;transition:opacity .13s}
.s{
  display:block;background-image:var(--sheet);background-repeat:no-repeat;
  background-size:3200% 3300%;
  background-position:calc(var(--cx) / 31 * 100%) calc(var(--cy) / 32 * 100%);
}
.slot .s{width:80%;aspect-ratio:1;flex:none;filter:var(--ghost-filter);opacity:var(--ghost-op);transition:filter .18s,opacity .18s}
.slot b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:clamp(8px,1.55vw,10.5px);letter-spacing:.02em;font-variant-numeric:tabular-nums;opacity:.75;line-height:1}
.slot .n{font-size:clamp(7.5px,1.5vw,10.5px);line-height:1.15;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.slot.have{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--card-line),0 1px 1px rgba(0,0,0,.16),0 6px 12px -8px rgba(0,0,0,.45)}
.slot.have .s{filter:none;opacity:1}
.slot.have::before{opacity:1}
.slot.have b{opacity:1;color:var(--brass)}
.slot.spare{opacity:.5}
.slot.spare .n{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.slot.spare::before{display:none}

button.slot{cursor:pointer}
button.slot:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--brass-2),0 6px 14px -8px rgba(0,0,0,.5)}
button.slot:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
button.slot:active{transform:translateY(0) scale(.97)}

#binder.hunt .slot.have{opacity:.22;filter:saturate(.15)}
.slot.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%,55%{box-shadow:inset 0 0 0 2px var(--brass),0 0 0 5px rgba(169,131,47,.35)}100%{box-shadow:inset 0 0 0 1px var(--pocket-line)}}
@media (prefers-reduced-motion:reduce){.slot.flash{animation:none;outline:2px solid var(--brass)}}

/* ---------------- page nav ---------------- */
.nav{
  position:sticky;bottom:10px;z-index:30;margin:18px auto 0;max-width:560px;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--binder-2),var(--binder));
  border:1px solid var(--binder-line);border-radius:12px;padding:8px 10px;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.75);color:var(--chrome-ink);
}
.nav button{background:rgba(255,255,255,.06);border:1px solid var(--binder-line);color:var(--chrome-ink);border-radius:8px;padding:8px 12px;cursor:pointer;font:inherit;line-height:1}
.nav button:hover:not(:disabled){border-color:var(--brass-2)}
.nav button:disabled{opacity:.35;cursor:default}
.nav button:focus-visible{outline:2px solid var(--brass-2);outline-offset:1px}
.navlabel{flex:1;text-align:center;min-width:0}
.navlabel b{display:block;font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108,"wght" 700;font-size:14px}
.navlabel span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--chrome-ink-2);letter-spacing:.06em}
.jump{width:62px;text-align:center;font-family:"IBM Plex Mono",monospace;background:rgba(255,255,255,.06);border:1px solid var(--binder-line);color:var(--chrome-ink);border-radius:8px;padding:7px 6px;font-size:13px}
.jump:focus{outline:2px solid var(--brass-2);outline-offset:1px}

/* ---------------- panels: missing + stats ---------------- */
.sheet{background:var(--page);border:1px solid var(--page-edge);border-radius:10px;padding:20px 20px 24px;box-shadow:var(--shadow);margin-top:20px}
.sheet h2{
  font-family:Archivo,sans-serif;font-variation-settings:"wdth" 110,"wght" 800;
  font-size:19px;margin:0 0 4px;letter-spacing:-.01em;
}
.sheet .lede{margin:0 0 20px;color:var(--ink-2);font-size:13.5px;max-width:62ch}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:24px;max-width:960px}
.tile{background:var(--pocket);border:1px solid var(--pocket-line);border-radius:9px;padding:13px 14px}
.tile .tl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.tile .tv{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;line-height:1.2;margin-top:3px}
.tile .tv em{font-style:normal;font-size:13px;color:var(--ink-2);font-weight:500}
.tile.accent .tv{color:var(--brass)}

.bars{display:grid;gap:11px;max-width:720px}
.brow{display:grid;grid-template-columns:132px 1fr 84px;gap:12px;align-items:center}
.brow .bl{font-size:13px}
.brow .bl small{display:block;font-size:11px;color:var(--ink-2)}
.bmeter{height:9px;border-radius:99px;background:var(--pocket);box-shadow:inset 0 0 0 1px var(--pocket-line);overflow:hidden;position:relative}
.bmeter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--brass),var(--brass-2));transition:width .5s cubic-bezier(.3,.8,.4,1)}
.brow .bv{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-2);text-align:right}
.brow .bv b{color:var(--ink);font-weight:600}
.brow.done .bv b{color:var(--good)}

.mgroup{margin-bottom:22px}
.mhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--page-edge);padding-bottom:6px;margin-bottom:11px}
.mhead h3{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108,"wght" 700;font-size:14px;margin:0}
.mhead span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2)}
.mlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:5px 14px}
.mrow{display:flex;align-items:center;gap:4px;min-width:0}
.mrow .mitem{flex:1;min-width:0}
.mtick{
  flex:none;width:24px;height:24px;border-radius:6px;cursor:pointer;
  border:1px solid var(--pocket-line);background:var(--pocket);color:var(--ink-2);
  font:inherit;font-size:15px;line-height:1;display:grid;place-items:center;padding:0;
}
.mtick:hover{border-color:var(--brass);color:var(--brass);background:var(--card)}
.mtick:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.mitem{display:flex;align-items:center;gap:7px;font-size:13px;padding:2px 0;border:0;background:none;color:inherit;font-family:inherit;text-align:left;cursor:pointer;border-radius:5px}
.mitem span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitem:hover{color:var(--brass)}
.mitem:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.mitem .s{width:24px;height:24px;flex:none;filter:var(--ghost-filter);opacity:.4}
.mitem .mn{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);min-width:36px}
.allgot{text-align:center;padding:34px 10px;color:var(--ink-2)}
.allgot b{display:block;font-family:Archivo,sans-serif;font-variation-settings:"wdth" 110,"wght" 800;font-size:20px;color:var(--good);margin-bottom:4px}

.rowbtns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.btn{background:var(--pocket);border:1px solid var(--pocket-line);color:var(--ink);border-radius:8px;padding:8px 13px;cursor:pointer;font:inherit;font-size:13px}
.btn:hover{border-color:var(--brass)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.btn.primary{background:var(--brass);border-color:var(--brass);color:#14100A;font-weight:500}
.btn.primary:hover{filter:brightness(1.06)}

/* ---------------- footer + dialog ---------------- */
.foot{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;font-size:12px;color:var(--ink-2)}
.foot .disclaim{flex:1 1 260px;text-align:center;opacity:.75;font-size:11px}
.foot a{color:var(--ink-2)}
.foot .lk{background:none;border:0;color:var(--ink-2);cursor:pointer;font:inherit;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:0}
.foot .lk:hover{color:var(--brass)}

dialog{
  border:1px solid var(--binder-line);border-radius:12px;padding:0;max-width:340px;width:calc(100% - 32px);
  background:linear-gradient(180deg,var(--binder-2),var(--binder));color:var(--chrome-ink);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8);
}
dialog::backdrop{background:rgba(6,8,12,.6);backdrop-filter:blur(2px)}
dialog form{padding:20px;display:grid;gap:12px}
dialog h3{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 110,"wght" 800;font-size:16px;margin:0}
dialog p{margin:0;font-size:12.5px;color:var(--chrome-ink-2)}
dialog input{width:100%;padding:9px 11px;border-radius:8px;border:1px solid var(--binder-line);background:rgba(255,255,255,.06);color:var(--chrome-ink);font:inherit;font-size:14px}
dialog input:focus{outline:2px solid var(--brass-2);outline-offset:1px}
dialog .err{color:var(--bad);font-size:12.5px;min-height:1em}
dialog .acts{display:flex;gap:8px;justify-content:flex-end}
dialog button{border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit;font-size:13px;border:1px solid var(--binder-line);background:rgba(255,255,255,.06);color:var(--chrome-ink)}
dialog button[value="go"]{background:var(--brass);border-color:var(--brass);color:#14100A;font-weight:500}

.toast{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%);
  background:var(--binder-2);color:var(--chrome-ink);border:1px solid var(--binder-line);
  border-radius:9px;padding:9px 15px;font-size:13px;box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;
}
.toast.on{opacity:1}

.loading{text-align:center;padding:60px 20px;color:var(--ink-2);font-size:14px}

/* ---------------- small screens ---------------- */
@media (max-width:700px){
  .wrap{padding:10px 10px 56px}
  .bar{padding:11px 12px;gap:10px;border-radius:12px 12px 3px 3px}
  .mark{width:28px;height:28px}
  h1{font-size:17px}
  .sub{font-size:9.5px;letter-spacing:.07em}
  .prog{min-width:0;flex-basis:100%;justify-content:space-between;gap:10px}
  .pnum strong{font-size:19px}
  .track{max-width:none}
  .tools{padding:8px 10px;gap:8px}
  .tabs{flex:1 1 100%}
  .tab{flex:1;padding:6px 8px;font-size:12.5px}
  .search{flex:1 1 100%}
  .gens{flex:1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:1px;
    -webkit-mask-image:linear-gradient(90deg,#000 0 88%,transparent);mask-image:linear-gradient(90deg,#000 0 88%,transparent)}
  .gens::-webkit-scrollbar{display:none}
  .chip,.toggle{flex:none}
  .toggle{padding:6px 10px;font-size:12.5px}
  #binder{margin-top:12px}
  .page{padding:10px 9px 9px}
  .plabel{margin-bottom:8px;padding-bottom:6px;font-size:9.5px}
  .grid{--gap:6px;--avail:max(320px, calc(100vh - 390px));--avail:max(320px, calc(100svh - 390px))}
  .nav{bottom:8px;margin-top:14px}
  .sheet{padding:16px 14px 20px;margin-top:12px}
  .brow{grid-template-columns:1fr;gap:4px}
  .brow .bv{text-align:left}
  .mlist{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ---------------- type colours ---------------- */
[data-t="normal"]{--c1:#9299A0}[data-t2="normal"]{--c2:#9299A0}
[data-t="fire"]{--c1:#E8562F}[data-t2="fire"]{--c2:#E8562F}
[data-t="water"]{--c1:#3B82D6}[data-t2="water"]{--c2:#3B82D6}
[data-t="electric"]{--c1:#E0B420}[data-t2="electric"]{--c2:#E0B420}
[data-t="grass"]{--c1:#4CA34A}[data-t2="grass"]{--c2:#4CA34A}
[data-t="ice"]{--c1:#63C3D0}[data-t2="ice"]{--c2:#63C3D0}
[data-t="fighting"]{--c1:#C0563F}[data-t2="fighting"]{--c2:#C0563F}
[data-t="poison"]{--c1:#9155B0}[data-t2="poison"]{--c2:#9155B0}
[data-t="ground"]{--c1:#B08B4A}[data-t2="ground"]{--c2:#B08B4A}
[data-t="flying"]{--c1:#7C9BD6}[data-t2="flying"]{--c2:#7C9BD6}
[data-t="psychic"]{--c1:#DB5C8C}[data-t2="psychic"]{--c2:#DB5C8C}
[data-t="bug"]{--c1:#8FA83B}[data-t2="bug"]{--c2:#8FA83B}
[data-t="rock"]{--c1:#A99560}[data-t2="rock"]{--c2:#A99560}
[data-t="ghost"]{--c1:#6E5A96}[data-t2="ghost"]{--c2:#6E5A96}
[data-t="dragon"]{--c1:#5A63C4}[data-t2="dragon"]{--c2:#5A63C4}
[data-t="dark"]{--c1:#6B5A56}[data-t2="dark"]{--c2:#6B5A56}
[data-t="steel"]{--c1:#6E93A6}[data-t2="steel"]{--c2:#6E93A6}
[data-t="fairy"]{--c1:#DE86C4}[data-t2="fairy"]{--c2:#DE86C4}

#restoredlg{max-width:440px}
#rcode{font-family:"IBM Plex Mono",monospace;font-size:12px}