.exp{max-width:1200px;margin:0 auto;padding:8px 0 40px}
.exp-head{margin-bottom:18px}
.exp-count{color:var(--accent);font-weight:600}
.exp-loading{color:var(--muted);padding:40px 0;font-size:15px}
.exp-body{display:grid;grid-template-columns:248px 1fr;gap:26px;align-items:start}
@media(max-width:820px){.exp-body{grid-template-columns:1fr}}
/* filters get their own scroll so the long paper list on the right scrolls independently:
   pinned below the sticky header, capped to the viewport, with internal overflow. */
/* NB: overflow-y:auto also clips horizontally, so pad left a touch (4px) or the focus outline on
   the search input gets cut off at the column edge; 8px right leaves room for the scrollbar. */
.exp-filters{position:sticky;top:70px;max-height:calc(100vh - 86px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:16px;font-size:13px;padding:2px 8px 2px 4px}
@media(max-width:820px){.exp-filters{position:static;max-height:none;overflow:visible;padding:0}}
.fhint{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.4}
.fgroup{border-bottom:1px solid var(--hairline);padding-bottom:14px}
.fgroup:last-child{border-bottom:0}
.fgroup h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 9px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--hairline);background:var(--card);color:var(--secondary);border-radius:20px;
  padding:4px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--axis);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip.zero{opacity:.4}.chip.zero[aria-pressed="true"]{opacity:1}
.chip .cn{font-variant-numeric:tabular-nums;opacity:.7;font-size:11px}
.chip[aria-pressed="true"] .cn{opacity:.85}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--hairline);border-radius:9px;padding:3px}
.seg button{border:0;background:none;font:inherit;font-size:13px;color:var(--secondary);padding:5px 12px;border-radius:6px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}
.finput{width:100%;padding:7px 10px;border:1px solid var(--hairline);border-radius:8px;background:var(--card);
  color:var(--ink);font:inherit;font-size:13px}
.finput:focus{outline:2px solid var(--accent);outline-offset:1px}
.yrow{display:flex;align-items:center;gap:8px}
.yrow input{width:72px}
.freset{background:none;border:0;color:var(--accent);font:inherit;font-size:12.5px;cursor:pointer;padding:0;text-align:left}
.freset:hover{text-decoration:underline}
.exp-search{position:relative;margin-bottom:14px}
.bigsearch{width:100%;padding:13px 16px;border:1px solid var(--hairline);border-radius:11px;
  background:var(--card);color:var(--ink);font:inherit;font-size:15px;box-shadow:var(--shadow)}
.bigsearch:focus{outline:2px solid var(--accent);outline-offset:1px}
.bigsearch::placeholder{color:var(--muted)}
.sug{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--card);
  border:1px solid var(--hairline);border-radius:11px;box-shadow:var(--shadow-lift);
  max-height:340px;overflow-y:auto;padding:5px}
.sug-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;font:inherit;
  text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ink);font-size:14px}
.sug-row:hover,.sug-row[aria-selected="true"]{background:var(--accent-soft)}
.sug-cat{flex:none;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:3px 8px;border-radius:5px;border:1px solid transparent}
.sug-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-n{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.sug-row.on .sug-val{font-weight:600}
.sug-row.on .sug-n:after{content:" \2713";color:var(--accent)}
.sug-free{border-top:1px solid var(--hairline);margin-top:4px;padding-top:8px;color:var(--secondary)}
.sug-free .sug-cat{background:none;border-color:var(--hairline);color:var(--muted)}
/* Status is a record-STATE axis, not a subject axis, so it takes neutral ink rather than a fifth
   hue -- adding one would have pushed the palette back past the separation limit for no gain. */
.fam-status{background:var(--accent-soft);color:var(--secondary);border-color:var(--hairline)}
.sug-empty{padding:12px 12px;color:var(--muted);font-size:13.5px}
/* FOUR colour families, not six. A validated check (OKLab dE, all pairs, both themes) showed no set
   of six site-appropriate hues is mutually distinguishable -- red/orange came out at dE 5.1 for
   NORMAL vision, and the mathematically optimal six still only reached the colourblind floor. So
   related facets share a hue and the exact category is always spelled out in text: colour is a
   redundant cue here, never the only one. */
.fam-analyte{background:rgba(215,87,75,.13);color:#a33a30}
.fam-application{background:rgba(63,157,95,.15);color:#2c7044}
.fam-disease{background:rgba(47,111,208,.13);color:#255aa8}
.fam-source{background:rgba(168,54,138,.13);color:#83296c}
.exp-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap}
.exp-showing{font-size:13px;color:var(--secondary);font-variant-numeric:tabular-nums}
.exp-sortl{font-size:12px;color:var(--muted)}
.exp-sort{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--hairline);border-radius:8px;background:var(--card);color:var(--ink);margin-left:6px}
.exp-table{display:flex;flex-direction:column;gap:0}
.erow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:12px 2px;border-bottom:1px solid var(--hairline)}
.erow .etitle{font-size:14.5px;line-height:1.35;font-weight:500}
.erow .etitle a{color:var(--ink)} .erow .etitle a:hover{color:var(--accent)}
.emeta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;color:var(--muted);align-items:center}
.emeta .badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:5px;text-transform:uppercase}
.badge.a{background:rgba(42,120,214,.14);color:var(--accent)}
.badge.b{background:rgba(27,175,122,.16);color:#12855c}
.emeta .tag{background:var(--accent-soft);color:var(--secondary);border-radius:12px;padding:1px 8px;font-size:11.5px}
.emeta .owner{color:var(--secondary)}
/* provenance: a muted dagger on the row, explained once in .exp-note at the foot of the page.
   Kept deliberately quiet -- it should be findable, not attention-grabbing. */
.prov{color:var(--muted);font-size:.85em;margin-left:2px;cursor:help}
.exp-note{max-width:78ch;margin:30px 2px 0;color:var(--muted);font-size:12px;line-height:1.6;
  border-top:1px solid var(--hairline);padding-top:12px}
.eright{text-align:right;font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.eright .yr{font-size:15px;color:var(--ink);font-weight:600;display:block}
.exp-pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px;font-size:13px}
.exp-pager button{border:1px solid var(--hairline);background:var(--card);color:var(--ink);border-radius:8px;padding:6px 14px;font:inherit;cursor:pointer}
.exp-pager button:disabled{opacity:.4;cursor:default}
.exp-empty{color:var(--muted);padding:40px 0;text-align:center}