/* Standalone archive-viewer page (archive.html) — the chrome around the embedded
   sprite gallery. Same role the old inline .arc-panel played inside the blog post,
   but as its own page, like breed/. The header stacks:

     row 1   (spacer)            Human | AI                              [×]
     row 2      Noise ε      Memory     Agents     Model     Seed
     row 3          Grid | Phylogeny | …        (that meta's sub-row)

   Rows 2 and 3 distribute their groups with space-evenly, so siblings sit at equal
   intervals across the full width rather than bunching at one end. The whole header
   is sticky, since the gallery below it can be tens of thousands of pixels tall.
   The × (rather than a back arrow) is deliberate: it sells the viewer as a pane laid
   over the post, which is what it was before it became its own page. */
html, body { margin:0; padding:0; }
body { background:#fff; overflow-x:hidden;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#222; }

.arc-head { position:sticky; top:0; z-index:30; display:flex; flex-direction:column; gap:.5em;
  padding:8px clamp(12px, 2.5vw, 32px) 9px; box-sizing:border-box; width:100%;
  background:rgba(255,255,255,.94); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  box-shadow:0 1px 0 rgba(0,0,0,.07); }
/* col 1 holds the back arrow, col 3 is an equal-width spacer, so the Human|AI pair
   is centered on the page rather than on the space left over by the arrow. */
.arc-row-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
/* the descending rows: every group an evenly spaced sibling */
.arc-row-runs, .arc-row-order { display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-evenly; gap:.5em 1em; }
.arc-row-runs.hidden { display:none; }      /* Human source: no experiment knobs to show */
.arc-row-order:empty { display:none; }      /* before the gallery reports its orderings */

.arc-body { position:relative; width:100%; }
.arc-body iframe { display:block; width:100%; border:0; background:#fff; }

/* ---- close: dismisses the "pane" back to the post it sits over ---- */
.arc-head button.close { justify-self:end; border:none; background:none; font-size:22px; line-height:1;
  color:#000; cursor:pointer; padding:0; width:1.5em; height:1.5em;
  display:flex; align-items:center; justify-content:center; }
.arc-head button.close:hover { color:#FF6C00; }

/* ---- source toggle (Human | AI), centered in the top row ---- */
.arc-src { display:inline-flex; justify-self:center; }
.arc-src button { font:inherit; font-size:13px; padding:6px 18px; border:1px solid #e2e2e2; background:#fff;
  color:#444; cursor:pointer; line-height:1; }
.arc-src button:first-child { border-radius:5px 0 0 5px; }
.arc-src button:last-child { border-radius:0 5px 5px 0; border-left:none; }
.arc-src button.on { background:#222; border-color:#222; color:#fff; }

/* ---- experiment knobs (Noise ε / Memory / Agents), plus the Model + Seed sub-toggles
        the gallery injects into this same row once it reports what a run has ---- */
.arc-runcat { display:inline-flex; align-items:center; gap:.35em; }
.arc-runcat > .lab { font-size:11px; color:#888; white-space:nowrap; }
.arc-runcat .grp { display:inline-flex; }
.arc-runcat .grp button { font:inherit; font-size:11px; padding:3px 8px; border:1px solid #e2e2e2; background:#fff;
  color:#555; cursor:pointer; line-height:1; }
.arc-runcat .grp button:first-child { border-radius:4px 0 0 4px; }
.arc-runcat .grp button:last-child { border-radius:0 4px 4px 0; }
.arc-runcat .grp button:not(:first-child) { border-left:none; }
.arc-runcat .grp button.on { background:#FF6C00; border-color:#FF6C00; color:#fff; font-weight:600; }
/* Model values the current run's arc wasn't run with: still selectable (they snap the arc),
   just dimmed so it reads that picking one changes the other knobs. The .on state wins. */
.arc-model .grp button.off-arc { color:#aaa; background:#fafafa; font-style:italic; }
.arc-model .grp button.off-arc.on { color:#fff; background:#FF6C00; font-style:normal; }

/* ---- ordering toggle + its sub-row (chronological / siglip / phylogeny / …) ---- */
.arc-order { display:inline-flex; }
.arc-order button { font:inherit; font-size:12px; padding:5px 11px; border:1px solid #e2e2e2;
  background:#fff; color:#444; cursor:pointer; line-height:1; }
.arc-order button:first-child { border-radius:5px 0 0 5px; }
.arc-order button:last-child { border-radius:0 5px 5px 0; }
.arc-order button:not(:first-child) { border-left:none; }
.arc-order button.on { background:#FF6C00; border-color:#FF6C00; color:#fff; }
/* an ordering this run doesn't have (e.g. human-bred images carry no VLM ratings -> Top Rated) */
.arc-order button[disabled] { color:#bbb; background:#f7f7f7; cursor:default; }
.arc-suborder { display:inline-flex; }
.arc-suborder button { font:inherit; font-size:11px; padding:4px 9px; border:1px solid #e8e8e8;
                       background:#fafafa; color:#555; cursor:pointer; }
.arc-suborder button:first-child { border-radius:5px 0 0 5px; }
.arc-suborder button:last-child { border-radius:0 5px 5px 0; }
.arc-suborder button:not(:first-child) { border-left:none; }
.arc-suborder button.on { background:#333; border-color:#333; color:#fff; }
/* a grid sort this run lacks (e.g. Top Rated on the human archive) -> greyed, inert */
.arc-suborder button[disabled] { color:#bbb; background:#f3f3f3; cursor:default; }

@media (max-width:680px){
  .arc-row-runs, .arc-row-order { justify-content:center; gap:.45em .7em; }
}