/*
 * Oddsprig Bioresearch v0.1 — Gene Weights & Parameter Couplings Lab Styles
 * External stylesheet for weights-lab.js (CSP: style-src 'self'; no unsafe-inline)
 */

.wl-root {
  --wl-bg: #faf7f0;
  --wl-panel: #f4efe4;
  --wl-card: #ffffff;
  --wl-ink: #1b241e;
  --wl-muted: #526056;
  --wl-forest: #1f4732;
  --wl-forest-mid: #2f6849;
  --wl-forest-soft: #e3ede6;
  --wl-amber: #8a5616;
  --wl-amber-soft: #f7ecda;
  --wl-rust: #8c2d23;
  --wl-rust-soft: #f9e5e2;
  --wl-border: #d6cfc0;
  color: var(--wl-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Georgia, sans-serif;
  line-height: 1.48;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wl-root * {
  box-sizing: border-box;
}

.wl-banner {
  background: var(--wl-panel);
  border: 1px solid var(--wl-border);
  border-left: 4px solid var(--wl-forest);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.wl-banner-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wl-forest);
}

.wl-banner-sub {
  margin: 0;
  font-size: 0.86rem;
  color: var(--wl-muted);
  max-width: 78ch;
}

.wl-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.wl-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--wl-forest-soft);
  color: var(--wl-forest);
  border: 1px solid #bfd3c6;
}

.wl-badge.wl-badge-assumed {
  background: var(--wl-amber-soft);
  color: var(--wl-amber);
  border-color: #e4c99e;
}

.wl-badge.wl-badge-warn {
  background: var(--wl-rust-soft);
  color: var(--wl-rust);
  border-color: #e5b8b2;
}

.wl-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: flex-end;
  background: var(--wl-card);
  border: 1px solid var(--wl-border);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
}

.wl-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wl-muted);
  min-width: 0;
  max-width: 100%;
}

.wl-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

.wl-field input,
.wl-field select,
.wl-field textarea {
  padding: 0.36rem 0.55rem;
  border: 1px solid var(--wl-border);
  border-radius: 4px;
  background: #ffffff;
  color: var(--wl-ink);
  font-size: 0.85rem;
  min-width: 0;
  max-width: 100%;
}

.wl-btn {
  padding: 0.42rem 0.78rem;
  border-radius: 4px;
  border: 1px solid var(--wl-forest);
  background: var(--wl-forest);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}

.wl-btn:hover {
  background: var(--wl-forest-mid);
}

.wl-btn.wl-btn-secondary {
  background: var(--wl-panel);
  color: var(--wl-forest);
  border-color: var(--wl-border);
}

.wl-btn.wl-btn-secondary:hover {
  background: var(--wl-forest-soft);
  border-color: var(--wl-forest);
}

.wl-btn-sm {
  padding: 0.22rem 0.5rem;
  font-size: 0.74rem;
}

.wl-btn-spaced {
  margin-top: 0.45rem;
}

.wl-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}

.wl-panel {
  background: var(--wl-card);
  border: 1px solid var(--wl-border);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  min-width: 0;
  max-width: 100%;
}

.wl-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid #ebe5d8;
  padding-bottom: 0.45rem;
}

.wl-panel-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--wl-forest);
}

.wl-lead-text {
  margin: 0 0 0.6rem 0;
  font-size: 0.8rem;
  color: var(--wl-muted);
}

.wl-sub-text {
  margin: 0 0 0.35rem 0;
  font-size: 0.8rem;
  color: var(--wl-muted);
}

.wl-note {
  font-size: 0.8rem;
  color: var(--wl-muted);
  background: var(--wl-panel);
  border-left: 3px solid var(--wl-amber);
  padding: 0.5rem 0.7rem;
  border-radius: 0 4px 4px 0;
  margin: 0.5rem 0;
}

.wl-gene-card {
  border: 1px solid var(--wl-border);
  border-radius: 6px;
  padding: 0.65rem 0.75rem;
  background: #fcfaf5;
  margin-bottom: 0.55rem;
}

.wl-gene-card.wl-gene-modified {
  border-color: var(--wl-forest);
  background: #f4f8f5;
}

.wl-gene-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.wl-gene-name {
  font-size: 0.88rem;
  color: var(--wl-forest);
}

.wl-gene-meta {
  margin-left: 0.45rem;
  font-size: 0.74rem;
  color: var(--wl-muted);
}

.wl-gene-assumption {
  margin-top: 0.32rem;
  font-size: 0.76rem;
  color: var(--wl-muted);
}

.wl-slider-row {
  display: grid;
  grid-template-columns: 1fr 74px;
  gap: 0.6rem;
  align-items: center;
}

.wl-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--wl-forest);
}

.wl-slider-row input[type="number"] {
  width: 100%;
  padding: 0.24rem 0.35rem;
  border: 1px solid var(--wl-border);
  border-radius: 4px;
  font-size: 0.82rem;
  text-align: right;
}

.wl-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.6rem;
}

.wl-metric-card {
  background: var(--wl-panel);
  border: 1px solid var(--wl-border);
  border-radius: 5px;
  padding: 0.55rem 0.65rem;
}

.wl-metric-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--wl-muted);
  margin-bottom: 0.18rem;
}

.wl-metric-val {
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--wl-ink);
}

.wl-metric-delta {
  font-size: 0.75rem;
  margin-top: 0.15rem;
  color: var(--wl-muted);
}

.wl-delta-good {
  color: var(--wl-forest);
  font-weight: 600;
}

.wl-delta-warn {
  color: var(--wl-rust);
  font-weight: 600;
}

.wl-svg-wrap {
  width: 100%;
  overflow-x: auto;
  background: #fdfbf7;
  border: 1px solid var(--wl-border);
  border-radius: 5px;
  padding: 0.35rem;
}

.wl-svg-wrap svg {
  background: #fdfbf7;
  border-radius: 4px;
  display: block;
}

.wl-svg-wrap-top {
  margin-top: 0.75rem;
}

.wl-svg-wrap-bottom {
  margin-bottom: 0.75rem;
}

.wl-svg-node {
  cursor: pointer;
}

.wl-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.wl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.wl-table th,
.wl-table td {
  border-bottom: 1px solid #e6dfd1;
  padding: 0.45rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.wl-table th {
  background: var(--wl-panel);
  color: var(--wl-forest);
  font-weight: 700;
  position: sticky;
  top: 0;
}

.wl-table tr.wl-row-highlight {
  background: #eef5f0;
}

.wl-cell-sub {
  font-size: 0.73rem;
  color: var(--wl-muted);
}

.wl-inline-num {
  width: 78px;
  padding: 0.2rem 0.35rem;
  font-size: 0.78rem;
  border: 1px solid var(--wl-border);
  border-radius: 4px;
}

.wl-oat-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.5rem 0;
}

.wl-oat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.55rem;
  border: 1px solid var(--wl-border);
  border-radius: 4px;
  background: #fcfaf5;
  font-size: 0.77rem;
  cursor: pointer;
}

.wl-oat-chip.wl-chip-active {
  background: var(--wl-forest-soft);
  border-color: var(--wl-forest);
  color: var(--wl-forest);
  font-weight: 600;
}

.wl-status-msg {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wl-forest);
  min-height: 1.2em;
}

.wl-subhead {
  margin: 0 0 0.35rem 0;
  font-size: 0.84rem;
  color: var(--wl-forest);
}

.wl-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.79rem;
}

.wl-list-spaced {
  margin: 0 0 0.7rem 0;
  padding-left: 1.15rem;
  font-size: 0.79rem;
}

.wl-list-item {
  margin-bottom: 0.28rem;
}

.wl-ctx-section {
  margin-top: 0.75rem;
  border-top: 1px solid var(--wl-border);
  padding-top: 0.6rem;
}

.wl-cand-item {
  font-size: 0.76rem;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--wl-panel);
  border-radius: 4px;
}

.wl-fail-item {
  font-size: 0.76rem;
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.5rem;
  background: var(--wl-rust-soft);
  border-radius: 4px;
}

.wl-fail-title {
  color: var(--wl-rust);
}

.wl-src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.wl-src-link {
  font-size: 0.74rem;
  color: var(--wl-forest);
  text-decoration: underline;
}

.wl-hyp-stack {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}