/* page.css — shared shell for the per-experiment category pages.
 *
 * One academic / nature-journal family: white background, serif body for the
 * description text, clean sans headers, restrained palette. Each page sets its
 * own --accent (and an optional --accent-soft) on :root; everything below themes
 * off those two variables so the six pages are differentiated at a glance while
 * staying visually coherent. Agent-dot colours come from the Okabe-Ito palette
 * in viewer.js, not from here.
 */
:root{
 --ink:#1a1f29; --muted:#5a6472; --line:#e3e7ec; --bg:#ffffff; --panel:#fafbfc;
 --serif:Georgia,"Times New Roman",serif;
 --sans:"Helvetica Neue",Arial,system-ui,sans-serif;
 --accent:#2c6cb0;            /* overridden per page */
 --accent-soft:#eef3fb;       /* overridden per page */
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5}

/* persistent top nav (matches the landing page) */
nav.top{display:flex;gap:2px;align-items:center;flex-wrap:wrap;
 padding:8px 22px;background:#10233f;border-bottom:1px solid #0a1830;position:sticky;top:0;z-index:8}
nav.top .home{font-weight:700;font-size:13px;color:#fff;letter-spacing:.3px;margin-right:14px;text-decoration:none}
nav.top a.lnk{font-size:12px;color:#aebfd8;text-decoration:none;padding:5px 9px;border-radius:5px}
nav.top a.lnk:hover{background:#1d3157;color:#fff}
nav.top a.lnk.active{background:var(--accent);color:#fff;font-weight:600}

/* header block — themed per page via --accent */
header.exp{border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--accent-soft),#fff)}
header.exp .inner{max-width:1180px;margin:0 auto;padding:22px 24px 20px}
header.exp .idx{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
header.exp h1{font-size:24px;line-height:1.18;margin:.28em 0 .12em;color:#10233f;font-weight:700;
 border-left:5px solid var(--accent);padding-left:13px}
header.exp .what{font-family:var(--serif);font-size:16px;color:#27303d;margin:.5em 0 .2em;max-width:880px;padding-left:18px}
header.exp .finding{display:flex;gap:11px;align-items:flex-start;max-width:880px;margin:14px 0 2px;margin-left:18px;
 background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 7px 7px 0;padding:11px 15px}
header.exp .finding .tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
 white-space:nowrap;margin-top:2px}
header.exp .finding .txt{font-family:var(--serif);font-size:14.5px;color:#2a3340}

/* two-column workspace: run list + viewer */
#wrap{display:flex;align-items:stretch;max-width:1280px;margin:0 auto}
#side{width:320px;flex:0 0 320px;height:calc(100vh - 96px);overflow-y:auto;background:#fff;border-right:1px solid var(--line)}
#side .listhead{padding:11px 16px 7px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
 color:var(--muted);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);
 position:sticky;top:0;background:#fff;z-index:1}
#side .listhead .count{font-weight:600;color:var(--accent)}
#side #search{width:calc(100% - 24px);margin:9px 12px;padding:6px 10px;border:1px solid #c7ccd4;border-radius:5px;font-size:12.5px}
.item{padding:8px 14px 8px 16px;cursor:pointer;border-left:3px solid transparent;line-height:1.25}
.item:hover{background:var(--accent-soft)}
.item.on{background:var(--accent-soft);border-left-color:var(--accent)}
.item .nm{color:#202732;font-size:12.5px}
.item.on .nm{font-weight:600;color:#10233f}
.item .meta{color:#9aa4b2;font-size:11px;margin-top:1px}
/* grouped sections (used by some pages) */
.grph{padding:9px 14px;font-weight:600;font-size:12px;color:#10233f;cursor:pointer;display:flex;
 justify-content:space-between;align-items:center;background:var(--panel);border-top:1px solid var(--line)}
.grph:hover{background:var(--accent-soft)}
.grph .ct{color:#9aa4b2;font-weight:400;font-size:11px}
.grph .tw{display:inline-block;margin-right:6px;color:#9aa4b2}

main{flex:1;min-width:0;padding:14px 22px 30px}
#ctrl{display:flex;gap:13px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
button{font-size:13px;padding:5px 11px;background:#fff;color:var(--ink);border:1px solid #c7ccd4;border-radius:5px;cursor:pointer}
button:hover{background:var(--accent-soft);border-color:var(--accent)}
#slider{width:320px;accent-color:var(--accent)}
#speed{width:80px;accent-color:var(--accent)}
#desc{font-family:var(--serif);font-size:15px;line-height:1.5;color:#27303d;background:#fff;
 border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 6px 6px 0;padding:12px 16px;margin:12px 0}
canvas{display:block;margin:6px auto 14px;background:#fff;border:1px solid #d7dce3;box-shadow:0 1px 5px rgba(20,30,50,.09)}
.leg{font-size:12px;color:var(--muted);text-align:center;margin:6px 0}
.leg .sw{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:-1px;margin:0 3px;border:1px solid rgba(0,0,0,.12)}

@media (max-width:760px){
 #wrap{flex-direction:column}
 #side{width:100%;flex:0 0 auto;height:auto;max-height:300px;border-right:none;border-bottom:1px solid var(--line)}
}