/* ============================================================
   AI Agent v1 — gallery.css
   Gallery page: showcase marquee + filterable 1000-agent list.
   Builds on base.css tokens; no external resources.
   ============================================================ */

.nav-links a.here{opacity:1;border-bottom:3px solid var(--term-green);}

/* ============ showcase ============ */
section.showcase{max-width:none;padding:44px 0 0;position:relative;overflow:hidden;}
.show-head{max-width:1200px;margin:0 auto 24px;padding:0 clamp(1.25rem,3vw,2rem);}
.show-head h1{font-size:clamp(30px,3.6vw,44px);font-weight:600;line-height:1.1;}
.show-head p{opacity:.85;margin-top:6px;max-width:640px;}
.marquee{overflow:hidden;padding:12px 0 16px;}
.show-track{display:flex;gap:20px;width:max-content;animation:marq 45s linear infinite;padding:0 10px;}
.marquee:hover .show-track,.marquee:focus-within .show-track{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.show-track{animation:none;flex-wrap:nowrap;overflow-x:auto;}}
.scard{
  flex:0 0 230px;text-decoration:none;
  border:3px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;
  box-shadow:var(--card-shadow);
  transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s;
}
.scard:hover{transform:translate(-2px,-5px) rotate(-1.2deg);box-shadow:var(--card-shadow-lift);}
.scard img{width:100%;aspect-ratio:1/1.02;object-fit:cover;border-bottom:3px solid var(--ink);}
.scard .m{padding:10px 12px 12px;}
.scard .sd{font-family:var(--font-mono);font-weight:700;font-size:14px;display:flex;justify-content:space-between;align-items:center;}
.scard .sd .open-hint{font-size:10px;opacity:.55;}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.bdg{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  border:2px solid var(--ink);border-radius:999px;padding:1px 8px;background:#fff;
}
.bdg.fac{color:#fff;background:var(--fc);}
.bdg.anomaly{background:var(--tier-pro);}

/* ============ browse layout ============ */
section.browse{max-width:1200px;padding:24px clamp(1.25rem,3vw,2rem) 90px;}
.browse-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start;}

/* ---- toolbar ---- */
.toolbar{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  border:3px solid var(--ink);border-radius:18px;background:#fff;
  box-shadow:var(--card-shadow);padding:12px 14px;margin-bottom:18px;
}
.search{
  flex:1;min-width:200px;display:flex;align-items:center;gap:8px;
  border:3px solid var(--ink);border-radius:12px;background:var(--cream);
  padding:0 12px;min-height:2.75rem;
}
.search input{
  border:none;background:transparent;outline:none;flex:1;
  font-family:var(--font-mono);font-size:13px;color:var(--ink);min-width:0;
}
.search .sicon{font-weight:700;opacity:.5;font-family:var(--font-mono);}
.sortwrap{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;}
select#sort{
  font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--ink);
  border:3px solid var(--ink);border-radius:12px;background:#fff;
  padding:0 10px;min-height:2.75rem;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
}
.rescount{font-family:var(--font-mono);font-size:12.5px;font-weight:700;opacity:.8;margin-left:auto;}
.filter-toggle{
  display:none;align-items:center;gap:8px;
  border:3px solid var(--ink);border-radius:12px;background:var(--term-green);
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);
  padding:0 14px;min-height:2.75rem;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
}
.filter-toggle .n{font-family:var(--font-mono);font-size:11px;background:var(--ink);color:var(--term-green);border-radius:999px;padding:1px 7px;}
.clear-all{
  display:none;border:3px solid var(--ink);border-radius:12px;background:#fff;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--ink);
  padding:0 12px;min-height:2.75rem;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
}
.clear-all.show{display:inline-flex;align-items:center;}

/* ---- filters ---- */
.filters{
  border:3px solid var(--ink);border-radius:20px;background:#fff;
  box-shadow:var(--card-shadow);padding:16px 16px 18px;
  position:sticky;top:92px;max-height:calc(100vh - 112px);overflow-y:auto;
}
.filters h2{font-size:19px;font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.filters .close-drawer{
  display:none;border:3px solid var(--ink);border-radius:10px;background:#fff;
  width:2.75rem;height:2.75rem;cursor:pointer;font-weight:800;font-size:18px;color:var(--ink);
}
.fgroup{border-top:2px dashed rgba(43,43,51,.2);padding:8px 0;}
.fgroup summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:8px 4px;min-height:2.5rem;
}
.fgroup summary::-webkit-details-marker{display:none;}
.fgroup summary .tw{transition:transform .2s;font-family:var(--font-mono);font-size:11px;opacity:.6;}
.fgroup[open] summary .tw{transform:rotate(90deg);}
.fgroup summary .sel-n{
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  background:var(--term-green);border:2px solid var(--ink);border-radius:999px;
  padding:0 7px;margin-left:auto;margin-right:8px;
}
.fgroup summary .sel-n:empty{display:none;}
.fopt{
  display:flex;align-items:center;gap:9px;padding:6px 4px;min-height:2.25rem;
  font-size:13.5px;font-weight:700;cursor:pointer;border-radius:10px;
}
.fopt:hover{background:rgba(43,43,51,.05);}
.fopt input{
  appearance:none;width:19px;height:19px;flex:none;
  border:2.5px solid var(--ink);border-radius:6px;background:#fff;cursor:pointer;
  display:grid;place-items:center;
}
.fopt input:checked{background:var(--term-green);}
.fopt input:checked::after{content:"✓";font-size:12px;font-weight:900;color:var(--ink);}
.fopt .t{flex:1;}
.fopt .code{font-family:var(--font-mono);font-size:10.5px;opacity:.55;font-weight:700;}
.fopt .c{font-family:var(--font-mono);font-size:11px;opacity:.65;font-weight:700;}
.fopt.zero{opacity:.38;}
.drawer-backdrop{
  display:none;position:fixed;inset:0;background:rgba(43,43,51,.45);z-index:79;
}
.drawer-backdrop.show{display:block;}

/* ---- list ---- */
.listwrap{border:3px solid var(--ink);border-radius:20px;background:#fff;box-shadow:var(--card-shadow);overflow:hidden;}
.lhead,.row{
  display:grid;
  grid-template-columns:5.2rem 7.5rem 4.6rem 3.6rem 1fr 9.2rem;
  gap:10px;align-items:center;padding:0 14px;
}
.lhead{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
  background:var(--ink);color:var(--term-green);min-height:2.4rem;
  position:relative;
}
.lhead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);
}
.row{
  min-height:2.75rem;position:relative;border-top:2px solid rgba(43,43,51,.08);text-decoration:none;
  content-visibility:auto;contain-intrinsic-size:auto 2.75rem;
}
.row:hover{background:color-mix(in oklab,var(--term-green) 7%,white);}
.rlink{position:absolute;inset:0;z-index:1;border-radius:0;}
.row .seed{font-family:var(--font-mono);font-weight:700;font-size:13px;}
.row .fac{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;min-width:0;}
.row .fac em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:var(--fc);flex:none;}
.tierb{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-align:center;
  border:2px solid var(--ink);border-radius:999px;padding:1px 0;background:var(--tier-free);
}
.tierb.pro{background:var(--tier-pro);}
.tierb.max{background:var(--tier-max);}
.row .sp{font-size:13px;letter-spacing:1px;}
.row .traits{
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:help;
}
.acts{display:flex;align-items:center;gap:8px;justify-content:flex-end;position:relative;z-index:2;}
.det{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  text-decoration:none;border:2px solid var(--ink);border-radius:8px;
  padding:4px 8px;background:#fff;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;
}
.det:hover{background:var(--cream);}
.cp{
  width:2rem;height:2rem;border:2px solid var(--ink);border-radius:8px;
  background:#fff;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--ink);
  font-size:13px;line-height:1;display:grid;place-items:center;
}
.cp:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.cp.ok{background:var(--term-green);}
.empty{
  padding:40px 20px;text-align:center;font-family:var(--font-mono);font-size:13px;opacity:.7;
}
/* ---- trait detail tooltip (desktop hover) ---- */
.trait-tip{
  position:absolute;z-index:90;pointer-events:none;
  background:#fff;border:3px solid var(--ink);border-radius:14px;
  box-shadow:var(--card-shadow);padding:10px 12px;
  min-width:252px;max-width:330px;
  font-family:var(--font-mono);
  opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;
}
.trait-tip.show{opacity:1;transform:none;}
.trait-tip .tt-head{
  font-weight:700;font-size:12px;color:var(--ink);
  padding-bottom:6px;margin-bottom:6px;
}
.trait-tip .tt-rarity{
  font-size:11px;font-weight:700;color:var(--term-green);background:var(--ink);
  border-radius:8px;padding:5px 8px;margin-bottom:8px;text-align:center;letter-spacing:.02em;
}
.trait-tip .tt-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  font-size:11.5px;padding:2px 0;
}
.trait-tip .tt-k{opacity:.55;font-weight:700;white-space:nowrap;}
.trait-tip .tt-v{font-weight:700;text-align:left;}
.trait-tip .tt-v b{color:var(--anthropic);font-weight:700;}
.trait-tip .tt-p{font-weight:700;opacity:.55;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.trait-tip .tt-p.rare{color:#fff;background:var(--ink);border-radius:6px;padding:0 5px;opacity:1;}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);z-index:99;
  background:var(--ink);color:var(--term-green);font-family:var(--font-mono);
  font-size:12.5px;font-weight:700;border-radius:12px;border:3px solid var(--ink);
  padding:10px 18px;transition:transform .25s cubic-bezier(.2,1.4,.4,1);pointer-events:none;
}
.toast.show{transform:translate(-50%,0);}

/* ============ responsive ============ */
/* ≤1024: tighten columns, faction shown as a dot only */
@media (max-width:1024px){
  .browse-grid{grid-template-columns:250px minmax(0,1fr);gap:18px;}
  .lhead,.row{grid-template-columns:4.6rem 2rem 4.2rem 3rem 1fr 8.6rem;}
  .row .fac em{display:none;}
  .lhead .h-fac{visibility:hidden;}
}
/* ≤860 (matches nav burger): filters become a drawer, list goes full-width */
@media (max-width:860px){
  .browse-grid{display:block;}
  .filter-toggle{display:inline-flex;}
  .filters{
    position:fixed;top:0;left:0;bottom:0;z-index:80;
    width:min(85vw,340px);max-height:none;border-radius:0 20px 20px 0;
    transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,1,.4,1);
    box-shadow:8px 0 0 rgba(43,43,51,.2);
  }
  .filters.open{transform:none;}
  .filters .close-drawer{display:grid;place-items:center;}
  .rescount{flex-basis:100%;margin-left:0;order:9;}
}
/* ≤640: simplified mobile rows (seed · dot · traits · links), bigger touch targets */
@media (max-width:640px){
  .scard{flex:0 0 190px;}
  .lhead,.row{grid-template-columns:4.2rem 1.4rem 1fr 5rem;gap:8px;padding:0 10px;}
  .lhead .h-tier,.lhead .h-sp,.row .tierb,.row .sp{display:none;}
  .row .traits{font-size:10.5px;}
  .det{padding:8px 9px;}
  .cp{width:2.4rem;height:2.4rem;}
  .row{min-height:3rem;contain-intrinsic-size:auto 3rem;}
}