/* #SECTION: NATURES */
/* ═══════ NATURES ═══════ */

.nat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem;padding:0 2rem 2rem}
.nat-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;cursor:default}
.nat-name{font-weight:600;font-size:.85rem;margin-bottom:2px}
.nat-stat{font-size:.7rem}
.nat-up{color:var(--green)}.nat-down{color:var(--red)}.nat-neutral{color:var(--muted)}

/* #SECTION: REFERENCE TAB */
/* ═══════ REFERENCE TAB (Abilities + Natures) ═══════ */

/* Tab bar */
.ref-tab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}
.ref-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.38rem;padding:.8rem .5rem;border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;border-bottom:2.5px solid transparent;transition:color .18s,border-color .18s}
.ref-tab.active{color:var(--red);border-bottom-color:var(--red)}
.ref-tab:hover:not(.active){color:var(--text2)}
.ref-tab i{font-size:.88rem}
.ref-tab-count{font-size:.67rem;font-weight:800;background:var(--surface);color:var(--muted);padding:1px 5px;border-radius:5px;transition:background .18s,color .18s}
.ref-tab.active .ref-tab-count{background:var(--red-bg);color:var(--red)}

/* Scrollable panes */
.ref-pane{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.ref-pane::-webkit-scrollbar{width:0}

/* Reference detail — bottom tray (replaces full-height #detP for ability/nature detail) */
.ref-det-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .25s}
.ref-det-ov.open{pointer-events:all;opacity:1}
.ref-det-bd{position:absolute;inset:0;background:rgba(0,0,0,.52);backdrop-filter:blur(2px)}
.ref-det-sheet{position:relative;z-index:1;width:100%;background:var(--bg2);border-radius:22px 22px 0 0;border-top:1px solid var(--border);max-height:65vh;overflow-y:auto;transform:translateY(100%);transition:transform .32s cubic-bezier(.33,1,.68,1);padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));transition:background .3s,transform .32s cubic-bezier(.33,1,.68,1)}
.ref-det-sheet::-webkit-scrollbar{width:0}
.ref-det-ov.open .ref-det-sheet{transform:translateY(0)}
.ref-det-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:10px auto 0}
.ref-det-close{position:absolute;top:12px;right:14px;width:27px;height:27px;border-radius:50%;background:var(--surface);border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.73rem;font-weight:800;transition:background .15s}
.ref-det-close:hover{background:var(--surface2)}

/* Search + filter block (sticky top of each pane) */
.ref-search-block{padding:.55rem 2rem .4rem;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10}

/* Category filter pills for abilities */
.ref-filter-row{display:flex;gap:.3rem;overflow-x:auto;padding:.4rem 0 .05rem;scrollbar-width:none}
.ref-filter-row::-webkit-scrollbar{height:0}
.ref-fpill{flex-shrink:0;display:inline-flex;align-items:center;gap:.26rem;padding:.27rem .6rem;border-radius:20px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:.7rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.ref-fpill i{font-size:.78rem;flex-shrink:0}
.ref-fpill:hover:not(.active){border-color:var(--text2);color:var(--text2)}
.ref-fpill.active{border-color:transparent}

/* Ability list */
.abl-alpha-hdr{padding:.45rem 2rem .15rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
.abl-list{padding-bottom:5rem}
.abl-card{display:flex;align-items:center;gap:.7rem;padding:.72rem 2rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.abl-card:hover{background:var(--surface)}
.abl-card:active{background:var(--surface2)}
.abl-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.abl-icon i{font-size:1rem}
.abl-body{flex:1;min-width:0}
.abl-name{font-size:.875rem;font-weight:800;color:var(--text)}
.abl-desc{font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.abl-right{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0}
.abl-cat-pill{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.abl-chev{color:var(--border2);font-size:.72rem}

/* Reference tab mode toggle */
.ref-mode-bar{display:flex;padding:.48rem 1rem .35rem;gap:.4rem;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}
.ref-mode-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.28rem;padding:.4rem;border:1.5px solid var(--border);border-radius:20px;background:var(--surface);color:var(--muted);font-family:inherit;font-size:.74rem;font-weight:700;cursor:pointer;transition:all .15s}
.ref-mode-btn.active{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.ref-mode-btn i{font-size:.82rem}

/* Pokémon search in Reference tab */
.abl-pkmn-prompt{padding:2.5rem 1rem;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.6}
.abl-pkmn-prompt i{font-size:2rem;display:block;margin-bottom:.5rem;opacity:.35}
.abl-pkmn-result{display:flex;align-items:center;gap:.7rem;padding:.65rem 1rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.abl-pkmn-result:hover{background:var(--surface)}.abl-pkmn-result:active{background:var(--surface2)}
.abl-pkmn-sprite{width:38px;height:38px;object-fit:contain;flex-shrink:0}
.abl-pkmn-name{flex:1;font-size:.875rem;font-weight:800;color:var(--text)}
.abl-pkmn-back-hdr{display:flex;align-items:center;gap:.55rem;padding:.45rem 1rem .3rem;background:var(--bg);border-bottom:1px solid var(--border)}
.abl-pkmn-back-btn{background:none;border:none;color:var(--red);cursor:pointer;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:.25rem;font-family:inherit;padding:.2rem 0}
.abl-pkmn-who{font-size:.8rem;font-weight:800;color:var(--text2)}
.abl-slot-1{background:var(--purple-bg);color:var(--purple)}
.abl-slot-2{background:var(--blue-bg);color:var(--blue)}
.abl-slot-h{background:var(--gold-bg);color:var(--gold)}

/* Pokédex detail panel ability pills — Drop G.2c */
.dex-abl-section{padding:.7rem 1.2rem .75rem;border-bottom:1px solid var(--border)}
.dex-abl-label{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.dex-abl-pills{display:flex;flex-wrap:wrap;gap:.4rem}
.dex-abl-pill{display:inline-flex;flex-direction:column;gap:.1rem;padding:.38rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--surface);cursor:pointer;transition:all .12s}
.dex-abl-pill:hover{filter:brightness(1.1)}.dex-abl-pill:active{transform:scale(.95)}
.dex-abl-slot{font-size:.55rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.dex-abl-name{font-size:.78rem;font-weight:700;color:var(--text)}
/* Slot colour variants */
.dex-abl-pill.slot-1{border-color:color-mix(in srgb,var(--purple) 30%,var(--border));background:var(--purple-bg)}
.dex-abl-pill.slot-1 .dex-abl-slot{color:var(--purple)}
.dex-abl-pill.slot-2{border-color:color-mix(in srgb,var(--blue) 30%,var(--border));background:var(--blue-bg)}
.dex-abl-pill.slot-2 .dex-abl-slot{color:var(--blue)}
.dex-abl-pill.slot-h{border-color:color-mix(in srgb,var(--gold) 30%,var(--border));background:var(--gold-bg)}
.dex-abl-pill.slot-h .dex-abl-slot{color:var(--gold)}

/* Build editor ability button */
.ed-abl-btn{width:100%;padding:.6rem .9rem;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:44px;transition:border-color .15s,background .3s;text-align:left}
.ed-abl-btn:hover{border-color:var(--border2)}
.ed-abl-btn-name{font-size:.85rem;font-weight:700;color:var(--text);flex:1}
.ed-abl-btn.empty .ed-abl-btn-name{color:var(--muted);font-weight:500}
.ed-abl-btn i{color:var(--muted);font-size:.78rem;flex-shrink:0}

/* Ability picker bottom sheet */
.abl-pk-sheet{width:100%;max-width:560px;background:var(--bg2);border-radius:22px 22px 0 0;border-top:1px solid var(--border);padding-bottom:calc(1rem + env(safe-area-inset-bottom));animation:sheetUp .28s cubic-bezier(.33,1,.68,1);transition:background .3s}
.abl-pk-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:10px auto 0}
.abl-pk-head{display:flex;align-items:flex-start;justify-content:space-between;padding:.7rem 1.2rem .4rem}
.abl-pk-title{font-size:.88rem;font-weight:800;color:var(--text)}
.abl-pk-sub{font-size:.7rem;color:var(--muted);margin-top:.1rem}
.abl-pk-close{background:var(--surface);border:none;color:var(--muted);width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.73rem;font-weight:800;flex-shrink:0}
.abl-pk-list{padding:.5rem 1rem .6rem;display:flex;flex-direction:column;gap:.45rem}
.abl-pk-card{padding:.65rem .9rem;border-radius:12px;border:1px solid var(--border);background:var(--card);cursor:pointer;transition:all .12s}
.abl-pk-card:active{transform:scale(.97)}.abl-pk-card.sel{border-color:var(--purple);background:var(--purple-bg)}
.abl-pk-slot{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.18rem}
.abl-pk-card.sel .abl-pk-slot{color:var(--purple)}
.abl-pk-name{font-size:.88rem;font-weight:800;color:var(--text)}
.abl-pk-desc{font-size:.71rem;color:var(--muted);margin-top:.15rem;line-height:1.35}
.abl-pk-empty{padding:1.5rem 1rem;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.5}

/* Ability detail panel content (inside shared #detInner) */
.abl-det-hero{display:flex;align-items:center;gap:.85rem;padding:1rem 1.2rem .85rem}
.abl-det-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.abl-det-name{font-size:1.15rem;font-weight:900;color:var(--text);line-height:1.1}
.abl-det-tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.63rem;font-weight:700;padding:2px 8px;border-radius:6px;margin-top:.28rem;text-transform:uppercase;letter-spacing:.04em}

/* Nature hybrid cards (new design) */
.nat-hybrid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.55rem;padding:.7rem 2rem 5rem}
/* ── Archetype trigger button (build editor) ── */
.ed-arch-btn{display:flex;align-items:center;gap:.55rem;padding:.6rem .75rem;border-radius:10px;border:1.5px solid var(--border);background:var(--input-bg);width:100%;font-family:inherit;font-size:.83rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .12s;text-align:left;-webkit-tap-highlight-color:transparent}
.ed-arch-btn:hover{border-color:var(--border2)}
.ed-arch-btn.empty{color:var(--muted);font-weight:400}
.ed-arch-btn:active{transform:scale(.99)}

/* ── Archetype picker sheet ── */
.arch-pk-sheet{background:var(--bg2);border-radius:20px 20px 0 0;width:100%;max-width:500px;max-height:78vh;display:flex;flex-direction:column;box-shadow:0 -4px 30px rgba(0,0,0,.25)}
.arch-pk-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:10px auto 0;flex-shrink:0}
.arch-pk-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem .5rem;border-bottom:1px solid var(--border);flex-shrink:0}
.arch-pk-title{font-size:.95rem;font-weight:800}
.arch-pk-close{background:none;border:none;font-size:.9rem;color:var(--muted);cursor:pointer;padding:.25rem .4rem;border-radius:6px;font-family:inherit}
.arch-pk-close:hover{color:var(--text)}
.arch-pk-list{overflow-y:auto;flex:1;padding:.3rem 0 .5rem}
.arch-pk-none{padding:.65rem 1.1rem;color:var(--muted);font-size:.82rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .1s}
.arch-pk-none:hover{background:var(--surface)}
.arch-pk-none.sel{color:var(--red);font-weight:700;background:var(--red-bg)}
.arch-pk-cat{padding:.55rem 1.1rem .2rem;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:.35rem}
.arch-pk-row{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem 1.1rem;cursor:pointer;transition:background .1s}
.arch-pk-row:hover{background:var(--surface)}
.arch-pk-icon{width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--ac,#94a3b8) 12%,var(--surface2));display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--ac,var(--text2));flex-shrink:0;margin-top:.05rem}
.arch-pk-row.sel{background:color-mix(in srgb,var(--ac,var(--red)) 8%,var(--surface))}
.arch-pk-row.sel .arch-pk-icon{background:color-mix(in srgb,var(--ac,var(--red)) 20%,var(--surface2));color:var(--ac,var(--red))}
.arch-pk-info{flex:1;min-width:0}
.arch-pk-name{font-size:.85rem;font-weight:700;line-height:1.2}
.arch-pk-desc{font-size:.7rem;color:var(--muted);line-height:1.4;margin-top:.1rem}
.arch-pk-check{color:var(--red);flex-shrink:0;margin-top:.2rem}
.arch-pk-custom{border-top:1px solid var(--border);padding:.65rem 1.1rem;flex-shrink:0;padding-bottom:calc(.65rem + env(safe-area-inset-bottom))}
.arch-pk-custom-label{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:.3rem;margin-bottom:.4rem}
.arch-pk-custom-row{display:flex;gap:.5rem}
.arch-pk-custom-input{flex:1;padding:.5rem .75rem;border-radius:9px;border:1.5px solid var(--border);background:var(--input-bg);color:var(--text);font-family:inherit;font-size:.82rem;min-width:0}
.arch-pk-custom-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.arch-pk-custom-btn{padding:.5rem .85rem;border-radius:9px;border:none;background:var(--red);color:#fff;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;flex-shrink:0}

/* ── Archetype reference page ── */
.ref-arch-list{padding:.7rem 2rem 5rem}
.ref-arch-cat{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.9rem 0 .35rem;display:flex;align-items:center;gap:.38rem}
.ref-arch-cat:first-child{margin-top:.2rem}
.ref-arch-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.75rem .9rem;margin-bottom:.45rem;transition:border-color .15s}
.ref-arch-card:hover{border-color:var(--border2)}
.ref-arch-card-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.25rem}
.ref-arch-icon{width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--ac,#94a3b8) 12%,var(--surface2));display:flex;align-items:center;justify-content:center;font-size:.88rem;color:var(--ac,var(--text2));flex-shrink:0}
.ref-arch-name{font-size:.88rem;font-weight:800;color:var(--text)}
.ref-arch-desc{font-size:.76rem;color:var(--muted);line-height:1.45}
.nat-hybrid{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.75rem .7rem .65rem;cursor:pointer;transition:border-color .12s,transform .1s}
.nat-hybrid:hover{border-color:var(--border2)}
.nat-hybrid:active{transform:scale(.97)}
.nat-hybrid-name{font-size:.82rem;font-weight:800;color:var(--text);margin-bottom:.35rem}
.nat-hybrid-arch{display:inline-block;font-size:.61rem;font-weight:700;padding:2px 7px;border-radius:6px;margin-bottom:.42rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* EQ bar visualiser */
.eq-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:4px}
.eq-col{display:flex;flex-direction:column;align-items:center;gap:0;flex:1}
.eq-track{width:100%;border-radius:3px 3px 0 0;overflow:hidden;display:flex;align-items:flex-end}
.eq-fill{width:100%;border-radius:3px 3px 0 0}
.eq-lbl{font-size:.57rem;font-weight:700;color:var(--muted);margin-top:3px;line-height:1}

/* Nature detail panel content (inside shared #detInner) */
.nat-det-hero{display:flex;align-items:center;gap:.85rem;padding:1rem 1.2rem .85rem}
.nat-det-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.nat-det-name{font-size:1.15rem;font-weight:900;color:var(--text);line-height:1.1}
.nat-det-tag{display:inline-flex;align-items:center;gap:.25rem;font-size:.63rem;font-weight:700;padding:2px 8px;border-radius:6px;margin-top:.28rem;text-transform:uppercase;letter-spacing:.04em}
.nat-det-mods{display:flex;flex-direction:column;gap:.45rem;margin-top:.3rem}
.nat-det-row{display:flex;align-items:center;gap:.55rem;padding:.48rem .75rem;border-radius:10px}
.nat-det-arrow{font-size:1.05rem;font-weight:900;line-height:1}
.nat-det-stat{font-size:.86rem;font-weight:800}
.nat-det-pct{font-size:.75rem;font-weight:700;margin-left:auto}