/* Pokémon Errors Database — front-end
   Scoped under .ped so it won't fight the theme. */

.ped{
  --ink:#1a1a22; --ink-soft:#62626c;
  --surface:#f7f7f2; --surface-2:#ffffff;
  --rule:#d4d4ca; --rule-strong:#b9b9ad; --r:10px;
  --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  color:var(--ink); font-size:16px; line-height:1.6;
}
.ped *{box-sizing:border-box}

/* toolbar */
.ped-toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0 0 18px}
.ped-search{flex:1 1 220px; position:relative}
.ped-search input{width:100%; height:46px; padding:0 16px 0 42px; border:1.5px solid var(--rule-strong);
  border-radius:8px; background:var(--surface-2); font:inherit; font-size:15px; color:var(--ink)}
.ped-search input:focus{outline:none; border-color:var(--ped-mis); box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.ped-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft)}
.ped-selwrap{position:relative; display:flex}
.ped-selwrap svg{position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--ink-soft)}
.ped select{appearance:none; -webkit-appearance:none; height:46px; padding:0 38px 0 16px; border:1.5px solid var(--rule-strong);
  border-radius:8px; background:var(--surface-2); font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink); cursor:pointer}
.ped select:disabled{opacity:.5; cursor:not-allowed}
.ped #ped-cat{max-width:160px}
.ped #ped-sub{max-width:260px; flex:1}
.ped #ped-type{max-width:280px}
.ped-lang{white-space:nowrap}
.ped-lang{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',var(--font-mono)}
.ped-count{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); margin-left:auto; white-space:nowrap}

/* no-JS filter submit button; hidden once JS takes over */
.ped-filter-btn{font-family:var(--font-mono); font-size:13px; font-weight:700; height:46px; padding:0 18px;
  border:1.5px solid var(--ink); border-radius:8px; background:var(--ink); color:#fff; cursor:pointer}
.ped-filter-btn:hover{opacity:.9}
.ped.ped-js .ped-nojs{display:none}

/* table (desktop) with horizontal scroll */
.ped-tablescroll{border:1.5px solid var(--ink); border-radius:var(--r); overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surface-2)}
.ped-table{width:100%; min-width:980px; border-collapse:collapse; font-size:14px}
.ped-table thead th{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  text-align:left; padding:12px 11px; background:var(--ink); color:#eceee7; font-weight:700; white-space:nowrap; position:sticky; top:0}
.ped-table tbody td{padding:10px 11px; border-bottom:1px solid var(--rule); vertical-align:middle}
.ped-table tbody tr:last-child td{border-bottom:none}
.ped-table tbody tr:hover{background:#f0f0ea}
.ped-name{font-weight:600; white-space:nowrap}
.ped-name small{display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); font-weight:400}
.ped-tag{font-family:var(--font-mono); font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px;
  display:inline-block; line-height:1.35; white-space:nowrap}
.ped-tag.mis{background:color-mix(in srgb, var(--ped-mis) 18%, transparent); color:color-mix(in srgb, var(--ped-mis) 65%, #000)}
.ped-tag.cut{background:color-mix(in srgb, var(--ped-cut) 16%, transparent); color:color-mix(in srgb, var(--ped-cut) 60%, #000)}
.ped-tag.oth{background:rgba(0,0,0,.08); color:#444}
.ped-mono{font-family:var(--font-mono); font-size:12.5px; white-space:nowrap}
.ped-yes{color:var(--ped-cut); font-weight:700}
.ped-no{color:var(--ink-soft)}

/* thumbnails */
.ped-thumb{position:relative; width:48px; height:67px; border:none; background:none; padding:0; cursor:pointer; display:block}
.ped-thumb img{width:100%; height:100%; object-fit:cover; border-radius:5px; border:1px solid var(--rule-strong); background:#e7e7e1; transition:.18s}
.ped-thumb:hover img{transform:translateY(-2px)}
.ped-ph{width:100%; height:100%; border-radius:5px; border:1px dashed var(--rule-strong); background:#eceee7;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-soft)}
.ped-ph span{font-family:var(--font-mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase}
.ped-zoom{position:absolute; bottom:2px; right:2px; width:19px; height:19px; border-radius:50%; background:var(--ink);
  color:#fff; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--surface-2); transition:.15s}
.ped-thumb:hover .ped-zoom{background:var(--ped-cut)}
.ped-zoom svg{width:10px; height:10px}
.ped-thumb.is-link .ped-zoom{background:var(--ped-mis)}

/* cards (mobile) */
.ped-cards{display:none; gap:14px; grid-template-columns:1fr}
.ped-card{border:1.5px solid var(--ink); border-radius:var(--r); background:var(--surface-2); overflow:hidden; display:flex}
.ped-card-img{position:relative; width:108px; flex:none; padding:13px; cursor:pointer; background:var(--surface)}
.ped-card-img .ped-thumb{width:100%; height:128px}
.ped-card-img .ped-zoom{bottom:16px; right:16px; width:24px; height:24px}
.ped-card-img .ped-zoom svg{width:13px; height:13px}
.ped-card-body{padding:13px 14px 14px; flex:1; min-width:0}
.ped-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px}
.ped-card-name{font-weight:600; font-size:16px; line-height:1.2}
.ped-card-name small{display:block; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); font-weight:400; margin-top:2px}
.ped-kv{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:13px; margin:8px 0 0}
.ped-kv dt{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); align-self:center}
.ped-kv dd{margin:0; text-align:right; font-family:var(--font-mono); font-size:12.5px; word-break:break-word}

/* pagination */
.ped-pager{display:flex; justify-content:center; align-items:center; gap:8px; margin:30px 0 6px; flex-wrap:wrap}
.ped-pager a,
.ped-pager button{font-family:var(--font-mono); font-size:14px; font-weight:700; min-width:42px; height:42px; padding:0 13px;
  border:1.5px solid var(--rule-strong); border-radius:10px; background:var(--surface-2); color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .12s, border-color .12s, background .12s}
.ped-pager a:hover,
.ped-pager button:hover:not(:disabled){border-color:var(--ink); transform:translateY(-2px)}
.ped-pager a.on,
.ped-pager button.on{background:var(--ink); color:#fff; border-color:var(--ink); transform:none}
.ped-pager button:disabled{opacity:.3; cursor:default}
.ped-pager button[aria-label]{font-size:20px; line-height:1}
.ped-pager .dots{min-width:20px; border:none; background:none; cursor:default; color:var(--ink-soft); font-weight:400; transform:none}
.ped-pager .dots:hover{transform:none}

.ped-empty{padding:40px 16px; text-align:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:13px}

/* lightbox */
.ped-lb{position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:rgba(18,18,24,.88); opacity:0; pointer-events:none; transition:opacity .25s; cursor:zoom-out}
.ped-lb.open{opacity:1; pointer-events:auto}
.ped-lb-stage{transform:scale(.92); transition:transform .28s cubic-bezier(.2,.8,.25,1); text-align:center; padding:20px; max-width:92vw}
.ped-lb.open .ped-lb-stage{transform:scale(1)}
.ped-lb-stage img{max-width:min(80vw,420px); max-height:72vh; border-radius:8px; display:block; margin:0 auto}
.ped-lb-meta{color:#fff; font-family:var(--font-mono); margin-top:16px}
.ped-lb-meta b{display:block; font-size:18px; font-weight:600; margin-bottom:4px}
.ped-lb-meta span{font-size:12px; color:#c7c7cf}
.ped-lb-x{position:absolute; top:18px; right:18px; width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4); background:none; color:#fff; font-size:20px; cursor:pointer; line-height:1}
.ped-lb-x:hover{background:var(--ped-cut); border-color:var(--ped-cut)}

@media (max-width:880px){
  .ped-tablescroll{display:none}
  .ped-cards{display:grid}
  .ped-count{margin-left:0; width:100%}
  .ped #ped-cat,.ped #ped-sub{max-width:none}
  .ped-selwrap{flex:1 1 140px}
}
@media (prefers-reduced-motion:reduce){ .ped *{transition:none !important} }