/* explorer.css — Exposure Explorer additions (per-Subject report, gauges, tables).
   Loaded on /research (and later /exposures). Static styling only; dynamic sizing is
   set via the CSSOM in explorer-report.js so nothing needs an inline style attribute. */

#explorer-report {
  margin-top: 1.25rem;
}

.xp-subject-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.xp-subject-tab {
  border: 1px solid #c9d6e8;
  background: #fff;
  color: #23364d;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.xp-subject-tab.is-active {
  background: #1f5fd1;
  border-color: #1f5fd1;
  color: #fff;
}

.xp-report-head {
  margin-bottom: 1rem;
}
.xp-report-title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}
.xp-report-meta {
  margin: 0 0 0.35rem;
  color: #4a5a6f;
  font-size: 0.9rem;
}
.xp-report-disclaimer {
  margin: 0;
  color: #6b7688;
  font-size: 0.8rem;
}

.xp-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #10233b;
}

/* Scorecard */
.xp-scorecard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.xp-tile {
  border: 1px solid #e2e9f2;
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  background: #fbfdff;
}
.xp-tile__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: #7a8698;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.xp-tile__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #16273c;
  margin-bottom: 0.3rem;
  line-height: 1.15;
}
.xp-tile__note {
  font-size: 0.76rem;
  color: #6b7688;
}
.xp-muted {
  color: #9aa6b6;
}

/* Gauges */
.xp-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.2rem;
}
.xp-gauge {
  border: 1px solid #e2e9f2;
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  background: #fff;
}
.xp-gauge__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #23364d;
  margin-bottom: 0.5rem;
}
.xp-gauge__strip {
  position: relative;
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: #eef2f8;
}
.xp-gauge__strip > * {
  height: 100%;
}
.xp-gauge__marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 20px;
  background: #10233b;
  border-radius: 2px;
  transform: translateX(-1px);
}
.xp-gauge__note {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #6b7688;
}
.xp-gauge__geo {
  font-size: 1rem;
  font-weight: 600;
  color: #16273c;
}

/* Association tables */
.xp-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.xp-table {
  border: 1px solid #e2e9f2;
  border-radius: 12px;
  padding: 0.6rem 0.8rem 0.8rem;
  overflow-x: auto;
}
.xp-table__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #23364d;
  margin: 0.2rem 0 0.5rem;
}
.xp-table__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.xp-table__grid th {
  text-align: left;
  color: #7a8698;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #e6ecf4;
  padding: 0.3rem 0.4rem;
}
.xp-table__grid td {
  padding: 0.32rem 0.4rem;
  border-bottom: 1px solid #f0f4f9;
  color: #2b3b50;
}

.xp-dua__title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* Temporal filters (explorer map) */
.xp-temporal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.6rem 0 0.4rem;
}
.xp-temporal__field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #4a5a6f;
  font-weight: 600;
}
.xp-temporal__field select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #c9d6e8;
  border-radius: 8px;
  font-size: 0.82rem;
  background: #fff;
}
.xp-temporal__note {
  font-size: 0.74rem;
  color: #8a94a6;
}

/* Compare-to-population sketch (public /exposures) */
#explorer-compare {
  margin-top: 0.5rem;
}
.xp-cmp-head {
  margin-bottom: 0.8rem;
}
.xp-cmp-badge {
  display: inline-block;
  background: #efe7fb;
  color: #5b3fa0;
  border: 1px solid #d8c8f2;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.xp-cmp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.xp-cmp-rows {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 0.8rem;
}
.xp-cmp-row {
  display: grid;
  grid-template-columns: 170px 1fr 190px;
  align-items: center;
  gap: 0.8rem;
}
.xp-cmp-row__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #23364d;
}
.xp-cmp-bar {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: #eef2f8;
}
.xp-cmp-iqr {
  position: absolute;
  top: 0;
  height: 100%;
  background: #cfe0f3;
  border-radius: 6px;
}
.xp-cmp-median {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 18px;
  background: #55627a;
}
.xp-cmp-mark {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 20px;
  border-radius: 3px;
  transform: translateX(-6px);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(16, 35, 59, 0.25);
}
.xp-cmp-row__read {
  font-size: 0.8rem;
  color: #4a5a6f;
  text-align: right;
}
@media (max-width: 620px) {
  .xp-cmp-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .xp-cmp-row__read {
    text-align: left;
  }
}