/* Text-to-Scene gallery (scripts/t2s_gallery.py): the site's tokens and cards, applied to the evaluator's renders. */
.gallery-page .page-main{padding-bottom:40px}
.gal-top{padding-top:44px;padding-bottom:6px}
.gal-top .section-title{margin-bottom:14px}
.gal-switch{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border-radius:10px;background:#e9ede8}
.gal-switch a{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text-p)}
.gal-switch a.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px #152a1915}
.gal-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.gal-pills a{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:var(--text-p)}
.gal-pills a:hover{border-color:var(--green);color:var(--green)}
.gal-body{padding-top:22px}
.gal-note{margin:0 0 12px;font-size:12px;color:var(--text-muted)}

/* by agent */
.gal-agents{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gal-agent{display:grid;grid-template-columns:30px minmax(220px,1.25fr) 84px 104px minmax(260px,2.3fr);gap:12px;align-items:center;padding:12px 16px;border:1px solid #d7ded5;border-radius:14px;background:#fff;color:inherit;transition:border-color .15s}
.gal-agent:hover{border-color:var(--green)}
.gal-agent .rk{font-size:14px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.gal-agent .who{display:flex;align-items:center;gap:10px;min-width:0}
.gal-agent .who b{display:block;font-size:15px;color:var(--text-h)}
.gal-agent .who small{display:block;font-size:12px;color:var(--text-muted)}
.gallery-page .logo{display:inline-flex;flex:none;width:22px;height:22px}
.gallery-page .logo svg{width:100%;height:100%}
.gal-agent .num{font:500 14px 'IBM Plex Mono',monospace;color:var(--text-p)}
.gal-agent .num small{display:block;font:600 9.5px Inter,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.gal-agent .num b{font-weight:500;font-size:17px;color:var(--text-h)}
.gal-agent .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.gal-agent .strip img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:5px;background:#eef0f2}

/* a scene, on either page */
.gal-case{margin:0 0 14px;padding:16px 18px 18px;border:1px solid #d7ded5;border-radius:16px;background:#fff;scroll-margin-top:16px}
.gal-case-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.gal-case-head h2{margin:0;font-size:19px;letter-spacing:-.3px;color:var(--text-h)}
.gal-score{font:500 17px 'IBM Plex Mono',monospace;color:var(--text-h)}
.gal-comp{font-size:12px;color:var(--text-muted)}
.gal-cost{font:500 13px 'IBM Plex Mono',monospace;color:var(--text-p)}
.gal-up{margin-left:auto;font-size:12px;font-weight:600;color:var(--green)}
.gal-brief{max-width:1000px;margin:6px 0 4px;font-size:12.5px;line-height:1.6;color:var(--text-p);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gal-brief.open{display:block}
.gal-brief-btn{margin:0 0 10px;padding:0;border:0;background:none;font:600 11px Inter,Arial,sans-serif;color:var(--green);cursor:pointer}
.gal-views{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.gal-views img,.gal-first img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;background:#eef0f2}
a.gimg{position:relative;display:block;border-radius:8px;outline-offset:2px}
.gal-chip{position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:6px;background:#17201de0;color:#8ff0c9;font:500 12.5px/1.5 'IBM Plex Mono',monospace}
a.gimg[hidden]{display:none}
a.gimg:hover img{filter:brightness(1.04)}

/* by scene */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 10px;margin-top:10px}
.gal-tile{margin:0}
.gal-tile figcaption{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px}
.gal-tile figcaption .dot{flex:none;width:9px;height:9px;border-radius:50%}
.gal-tile figcaption .who{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--text-h)}
.gal-tile figcaption .who:hover{color:var(--green)}
.gal-tile figcaption small{font:500 11px 'IBM Plex Mono',monospace;color:var(--text-muted)}

/* one agent */
.gal-crumb{margin-bottom:10px;font-size:12px;color:var(--text-muted)}
.gal-crumb a{color:var(--green);font-weight:600}
.gal-name{display:flex;align-items:center;gap:14px}
.gallery-page .gal-name .logo{width:36px;height:36px}
.gal-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:18px}
.gal-stats small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.gal-stats b{font:500 20px 'IBM Plex Mono',monospace;color:var(--text-h)}
.gal-stats b span{font-size:12px;color:var(--text-muted)}
.gal-basis{margin:12px 0 0;max-width:820px}
.gal-pn{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:13px}
.gal-pn a{font-weight:600;color:var(--green)}

/* the viewer */
.gbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px 64px;background:rgba(12,16,14,.93)}
.gbox[hidden]{display:none}
.gbox figure{margin:0;max-width:min(1280px,100%)}
.gbox img{display:block;max-width:100%;max-height:calc(100vh - 110px);margin:auto;border-radius:8px;background:#222}
.gbox-cap{margin-top:10px;text-align:center;font-size:13px;color:#e6ebe6}
.gbox button{position:absolute;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:400 26px/44px Inter,Arial,sans-serif;cursor:pointer}
.gbox button:hover{background:rgba(255,255,255,.24)}
.gbox button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gbox-x{top:14px;right:14px}
.gbox-prev{left:12px;top:calc(50% - 22px)}
.gbox-next{right:12px;top:calc(50% - 22px)}

@media(max-width:900px){
 .gal-agent{grid-template-columns:24px minmax(0,1fr) auto auto;gap:10px}
 .gal-agent .strip{grid-column:1/-1}
 .gal-views{grid-template-columns:repeat(2,1fr)}
 .gal-up{margin-left:0}
}
@media(max-width:560px){
 .gal-top{padding-top:28px}
 .gal-agent{grid-template-columns:16px minmax(0,1fr) auto auto;gap:8px;padding:10px 12px}
 .gal-agent .who{gap:8px}
 .gal-agent .who b{font-size:13px}
 .gal-agent .num{font-size:12px}
 .gal-agent .num b{font-size:14px}
 .gal-case{padding:12px 12px 14px}
 .gal-case-head h2{font-size:17px}
 .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .gbox{padding:16px 8px 64px}
 .gbox-prev,.gbox-next{top:auto;bottom:10px}
 .gbox-prev{left:calc(50% - 54px)}.gbox-next{right:calc(50% - 54px)}
}