/* Cross-project "Explore" section (src/explore/*, layouts/explore.njk).
 *
 * Visual vocabulary is lifted from assets/css/imports.css so the two read as
 * one system: #1a1d26 ink, #5b5b5b muted, #9aa3b2 faint, #dde1e9 hairline,
 * #f0f2f5 tint, #f7f8fa table head, #2f4a8c link. System font (matches the
 * direction in enm.css / the UX plan -- no webfont dependency of its own).
 *
 * Scoped under .exp-* and the .exp-container so nothing here reaches jToxKit
 * (.jtox-*), DataTables or jQuery-UI subtrees on other pages.
 */

.exp-head {
    background: #fff;
    border-bottom: 1px solid #dde1e9;
    padding: 22px 0 18px;
}
.exp-crumb {
    font-size: 12px;
    color: #5b5b5b;
    margin-bottom: 8px;
}
.exp-crumb a {
    color: #2f4a8c;
    text-decoration: none;
}
.exp-crumb a:hover {
    text-decoration: underline;
}
.exp-crumb span[aria-hidden] {
    margin: 0 6px;
    color: #9aa3b2;
}
.exp-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #1a1d26;
    letter-spacing: -0.01em;
}
.exp-dek {
    margin: 6px 0 0;
    color: #5b5b5b;
    font-size: 13px;
    max-width: 74ch;
}

.exp-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1a1d26;
    padding-top: 22px;
    padding-bottom: 48px;
}
.exp-container a {
    color: #2f4a8c;
}

/* --- loading / error / empty states (mirrors enm-vega.js classes) --------- */
.exp-status {
    padding: 2rem 1rem;
    text-align: center;
    color: #5b6b7d;
}
.exp-error {
    margin: 12px 0;
    padding: 9px 12px;
    color: #8a2f22;
    background: #fbeeec;
    border-left: 3px solid #8a2f22;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
}
.exp-error button {
    margin-left: 8px;
    font: inherit;
    font-size: 12px;
    border: 1px solid #8a2f22;
    background: none;
    color: #8a2f22;
    border-radius: 4px;
    padding: 2px 9px;
    cursor: pointer;
}
.exp-empty {
    color: #5b5b5b;
    font-style: italic;
    margin: 12px 0;
}

/* --- section label ------------------------------------------------------- */
.exp-sectlabel {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b5b5b;
    margin: 26px 0 12px;
}
.exp-sectlabel:first-child {
    margin-top: 4px;
}

/* --- headline stat tiles ----------------------------------------------- */
.exp-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 900px) {
    .exp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .exp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.exp-stat {
    border: 1px solid #dde1e9;
    border-radius: 6px;
    background: #fff;
    padding: 12px 14px;
}
.exp-stat b {
    display: block;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.exp-stat span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b5b5b;
    margin-top: 2px;
}
.exp-stat.is-loading b {
    color: #9aa3b2;
}

/* --- entry tiles ------------------------------------------------------- */
.exp-entries {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 900px) {
    .exp-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .exp-entries { grid-template-columns: 1fr; }
}
.exp-entry {
    display: flex;
    gap: 12px;
    border: 1px solid #dde1e9;
    border-radius: 8px;
    background: #fff;
    padding: 14px;
    align-items: flex-start;
    text-decoration: none;
    color: #1a1d26;
}
.exp-entry:hover {
    border-color: #9aa3b2;
    background: #f7f8fa;
    text-decoration: none;
}
.exp-entry .exp-ic {
    flex: 0 0 auto;
    color: #8a2f22;
    margin-top: 1px;
}
.exp-entry h2 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
}
.exp-entry p {
    margin: 0;
    font-size: 12.5px;
    color: #5b5b5b;
}

/* --- project wall ---------------------------------------------------- */
.exp-wallhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 12px;
}
.exp-wallhead .exp-sectlabel {
    margin: 0;
}
.exp-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.exp-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.exp-badge.is-public { background: #eef5ef; color: #33603f; }
.exp-badge.is-restricted { background: #eef2fb; color: #2f4a8c; }
.exp-badge.is-embargo { background: #fdf3e0; color: #7a5510; }

.exp-wall {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 1000px) { .exp-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .exp-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .exp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.exp-proj {
    border: 1px solid #dde1e9;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    color: #1a1d26;
}
.exp-proj:hover { border-color: #9aa3b2; text-decoration: none; }
.exp-proj img {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    align-self: flex-start;
}
.exp-proj .exp-logofallback {
    height: 40px;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    color: #9aa3b2;
}
.exp-proj .exp-nm {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.exp-proj .exp-count {
    font-size: 11px;
    color: #5b5b5b;
    font-variant-numeric: tabular-nums;
}
.exp-proj .exp-count.is-zero { color: #9aa3b2; }

/* ====================================================================== *
 *  Filter-first views: controls, tiles, bar cards, coverage matrix       *
 *  (methods explorer, coverage matrix)                                   *
 * ====================================================================== */

.exp-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #dde1e9;
    border-radius: 8px;
    margin-bottom: 14px;
}
.exp-fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.exp-fld > span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b5b5b;
}
.exp-fld input,
.exp-fld select,
.exp-dimrow select {
    border: 1px solid #dde1e9;
    border-radius: 5px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12.5px;
    background: #fff;
    color: #1a1d26;
}
/* Fixed-width fields in the top control bar: a <select> otherwise grows to its
   widest option (some method / substance-type labels are very long) and pushes
   the row. Truncate the closed-state label instead. */
.exp-controls .exp-fld input,
.exp-controls .exp-fld select {
    width: 200px;
    max-width: 200px;
    box-sizing: border-box;
}
.exp-controls .exp-fld select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exp-go {
    border: 1px solid #8a2f22;
    background: #8a2f22;
    color: #fff;
    border-radius: 5px;
    padding: 8px 16px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.exp-go:hover { background: #74271d; }
.exp-dimrow {
    font-size: 12.5px;
    color: #5b5b5b;
    margin: 0 0 16px;
}
.exp-hint { color: #9aa3b2; }

.exp-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .exp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .exp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.exp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 760px) { .exp-grid2 { grid-template-columns: 1fr; } }

.exp-card {
    border: 1px solid #dde1e9;
    border-radius: 8px;
    background: #fff;
    padding: 14px 16px;
}
.exp-card h2 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px;
}
.exp-cap {
    font-size: 11px;
    font-weight: 400;
    color: #9aa3b2;
}

.exp-hbars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.exp-hbar {
    display: grid;
    grid-template-columns: 130px 1fr 44px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.exp-hbar .exp-lab {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a1d26;
}
.exp-hbar .exp-track {
    background: #f0f2f5;
    border-radius: 3px;
    height: 14px;
    overflow: hidden;
}
.exp-hbar .exp-fill {
    display: block;
    background: #5b93d6;
    height: 100%;
}
.exp-hbar .exp-val {
    text-align: right;
    color: #5b5b5b;
    font-variant-numeric: tabular-nums;
}

/* --- filter-first prompt / examples / chips --------------------------- */
.exp-prompt {
    border: 1px dashed #dde1e9;
    border-radius: 8px;
    background: #fff;
    padding: 34px 24px;
    text-align: center;
}
.exp-prompt h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}
.exp-prompt p {
    color: #5b5b5b;
    font-size: 13px;
    margin: 0 auto;
    max-width: 60ch;
}
.exp-examples {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.exp-ex {
    font: inherit;
    font-size: 12px;
    border: 1px solid #dde1e9;
    border-radius: 999px;
    padding: 5px 12px;
    color: #2f4a8c;
    background: #eef2fb;
    cursor: pointer;
}
.exp-ex:hover { border-color: #9aa3b2; }

.exp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.exp-chips-lbl {
    font-size: 12px;
    color: #5b5b5b;
    margin-right: 2px;
}
.exp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    background: #f0f2f5;
    border: 1px solid #dde1e9;
    border-radius: 999px;
    padding: 3px 6px 3px 10px;
}
.exp-chip button {
    border: 0;
    background: none;
    color: #5b5b5b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.exp-bound {
    margin-top: 12px;
    font-size: 12px;
    color: #5b5b5b;
}

/* --- coverage matrix ------------------------------------------------- */
.exp-legend .exp-sw {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #dde1e9;
    vertical-align: -2px;
    margin: 0 4px 0 10px;
}
.exp-legend .exp-sw:first-child { margin-left: 0; }
.exp-sw.c0 { background: #ffffff; }
.exp-sw.c1 { background: #e2ecf9; }
.exp-sw.c2 { background: #a9c8ec; }
.exp-sw.c3 { background: #5b93d6; }

.exp-mtxwrap {
    border: 1px solid #dde1e9;
    border-radius: 6px;
    overflow-x: auto;
    background: #fff;
}
.exp-mtx {
    display: grid;
    min-width: 640px;
    font-size: 11.5px;
}
.exp-mtx-corner {
    background: #f7f8fa;
    border-bottom: 1px solid #dde1e9;
    border-right: 1px solid #dde1e9;
}
.exp-mtx-colh {
    background: #f7f8fa;
    border-bottom: 1px solid #dde1e9;
    border-right: 1px solid #eef0f4;
    padding: 8px 6px;
    text-align: center;
    color: #5b5b5b;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.25;
}
.exp-mtx-rowh {
    border-bottom: 1px solid #eef0f4;
    border-right: 1px solid #dde1e9;
    padding: 7px 10px;
    color: #1a1d26;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-mtx-cell {
    border-bottom: 1px solid #eef0f4;
    border-right: 1px solid #eef0f4;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    color: #22405f;
}
.exp-mtx-cell.c0 { background: #ffffff; }
.exp-mtx-cell.c1 { background: #e2ecf9; }
.exp-mtx-cell.c2 { background: #a9c8ec; }
.exp-mtx-cell.c3 { background: #5b93d6; color: #fff; }

/* ====================================================================== *
 *  Completeness / readiness explorer                                     *
 * ====================================================================== */

.exp-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
}
@media (max-width: 860px) { .exp-shell { grid-template-columns: 1fr; } }

.exp-rail {
    border: 1px solid #dde1e9;
    border-radius: 8px;
    background: #fff;
    padding: 16px 18px;
    align-self: start;
}
.exp-rail h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b5b5b;
    margin: 0 0 10px;
}
.exp-rail .exp-fld { margin-bottom: 12px; }
.exp-rail .exp-fld input,
.exp-rail .exp-fld select { min-width: 0; width: 100%; }
.exp-rail .exp-go { width: 100%; }

.exp-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.exp-pill {
    font: inherit;
    font-size: 11px;
    border: 1px solid #dde1e9;
    border-radius: 999px;
    padding: 3px 9px;
    color: #5b5b5b;
    background: #fff;
    cursor: pointer;
}
.exp-pill.on { background: #eef2fb; border-color: #a9c8ec; color: #2f4a8c; }

.exp-ticks { display: flex; flex-direction: column; gap: 9px; }
.exp-ck {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    cursor: pointer;
}
.exp-ck input { margin-top: 3px; }
.exp-ck small { display: block; color: #9aa3b2; }

.exp-funhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.exp-funhead h2 { font-size: 14px; font-weight: 600; margin: 0; }
.exp-funhead span { font-size: 12px; color: #5b5b5b; }

.exp-funnel { display: flex; flex-direction: column; gap: 6px; }
.exp-frow { display: flex; align-items: center; gap: 12px; }
.exp-frow .exp-flab {
    width: 210px;
    text-align: right;
    font-size: 12px;
    color: #1a1d26;
    flex: 0 0 auto;
}
.exp-frow .exp-fbarwrap { flex: 1; }
.exp-frow .exp-fbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 30px;
    padding: 0 8px;
    background: #5b93d6;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 64px;
    box-sizing: border-box;
}
.exp-frow .exp-fbar.mute { background: #bcd3ef; color: #22405f; }
@media (max-width: 620px) {
    .exp-frow { flex-direction: column; align-items: stretch; gap: 2px; }
    .exp-frow .exp-flab { width: auto; text-align: left; }
}

.exp-hist {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding-top: 6px;
}
.exp-hist .exp-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}
.exp-hist .exp-cb {
    width: 100%;
    background: #5b93d6;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}
.exp-hist .exp-cx { font-size: 10px; color: #5b5b5b; }

.exp-linkbtn {
    font: inherit;
    font-size: 12px;
    border: 0;
    background: none;
    color: #2f4a8c;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
}
.exp-linkbtn:hover { text-decoration: underline; }

/* study list table (shared shape with imports.css .im-table) */
.exp-tablewrap {
    border: 1px solid #dde1e9;
    border-radius: 6px;
    overflow-x: auto;
    background: #fff;
    margin-top: 12px;
}
.exp-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
    font-size: 13px;
}
.exp-table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b5b5b;
    background: #f7f8fa;
    padding: 8px 12px;
    border-bottom: 1px solid #dde1e9;
    white-space: nowrap;
}
.exp-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eef0f4;
    vertical-align: top;
    color: #1a1d26;
}
.exp-table tbody tr:last-child td { border-bottom: none; }
.exp-table tbody tr:hover td { background: #f7f8fa; }
.exp-table .exp-num,
.exp-num { text-align: right; font-variant-numeric: tabular-nums; }
.exp-table th.exp-num { text-align: right; }

.exp-subfld {
    margin: 4px 0 4px 24px;
}
.exp-subfld > span { font-size: 11px; color: #9aa3b2; }
.exp-subfld select { min-width: 0; width: calc(100% - 24px); }

/* readiness: applicability note + scope panel */
.exp-applic {
    display: block;
    color: #7a5510;
    font-size: 10.5px;
    margin-top: 1px;
}
.exp-scopegrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
@media (max-width: 620px) { .exp-scopegrid { grid-template-columns: 1fr; } }
.exp-scopnum {
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.exp-scopegrid .exp-chips { margin-top: 8px; }
.exp-scopegrid a.exp-chip { text-decoration: none; color: #1a1d26; }
.exp-scopegrid a.exp-chip:hover { border-color: #9aa3b2; }
.exp-scopegrid .exp-chip b { font-variant-numeric: tabular-nums; color: #5b5b5b; font-weight: 600; }

/* ====================================================================== *
 *  Dose-response review deck (/explore/review/)                          *
 * ====================================================================== */

.exp-rvbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid #dde1e9;
    margin-bottom: 14px;
}
.exp-navbtn {
    font: inherit;
    font-size: 12.5px;
    border: 1px solid #dde1e9;
    background: #fff;
    color: #1a1d26;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
}
.exp-navbtn:hover:not([disabled]) { border-color: #9aa3b2; background: #f7f8fa; }
.exp-navbtn[disabled] { opacity: 0.45; cursor: default; }
.exp-pos { font-size: 12.5px; color: #5b5b5b; font-variant-numeric: tabular-nums; }
.exp-rvbar [data-download] { margin-left: auto; }

.exp-toc {
    border: 1px solid #dde1e9;
    border-radius: 8px;
    background: #fff;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}
.exp-toc > summary { cursor: pointer; font-weight: 600; }
.exp-toc ol { margin: 8px 0 2px; padding-left: 22px; }
.exp-toc li { margin: 2px 0; }

.exp-rvsection {
    border: 1px solid #dde1e9;
    border-radius: 8px;
    background: #fff;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.exp-rvhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #eef0f4;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.exp-rvhead h2 { font-size: 15px; font-weight: 600; margin: 0; }
.exp-tag {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f0f2f5;
    color: #5b5b5b;
    white-space: nowrap;
}
.exp-rvsection h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5b5b5b;
    margin: 14px 0 6px;
}
.exp-rvgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}
@media (max-width: 680px) { .exp-rvgrid { grid-template-columns: 1fr; } }

.exp-kv { border-collapse: collapse; width: 100%; font-size: 13px; }
.exp-kv th {
    text-align: left;
    font-weight: 400;
    color: #5b5b5b;
    padding: 4px 12px 4px 0;
    vertical-align: top;
    white-space: nowrap;
    width: 1%;
}
.exp-kv td { padding: 4px 0; vertical-align: top; color: #1a1d26; }
.exp-kv tr + tr th, .exp-kv tr + tr td { border-top: 1px solid #f2f3f6; }

.exp-series b { font-variant-numeric: tabular-nums; font-weight: 600; }
.exp-yes { color: #33603f; }
.exp-no { color: #8a2f22; }
.exp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }

.exp-params { margin-top: 10px; font-size: 13px; }
.exp-params > summary { cursor: pointer; color: #2f4a8c; }
.exp-params .exp-table th { text-transform: none; letter-spacing: 0; }

.exp-companions { font-size: 13px; }
.exp-companions ul { margin: 6px 0 0; padding-left: 20px; }
.exp-companions li { margin: 2px 0; }

.exp-rvlinks { margin: 12px 0 0; font-size: 13px; }


.exp-toc .exp-tocnow > button { font-weight: 600; color: #1a1d26; }
.exp-toc .exp-tocnow::marker { color: #8a2f22; }