/* asn.css — the pieces this viewer adds on top of the shared style.css.
 *
 * style.css is carried over unchanged from results_web_app_molclr so the two viewers look and
 * behave the same. Everything below is either a NEW component (descriptor grid, per-fold bars,
 * chemotype bar rows, range sliders, frozen-condition chip) or a small override where this app's
 * table is wider than the old one. Nothing here restyles a shared class.
 */

:root {
  --asn-up: #1f8a5a;
  --asn-down: #b4483f;
  --asn-bar: #4f7cff;
  --asn-track: rgba(127, 140, 160, 0.22);
}

/* frozen-condition chip in the header ------------------------------------------------------ */
.cond-chip {
  margin-left: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 12px; border-radius: 10px;
  background: rgba(127, 140, 160, 0.10);
  font-size: 11px; line-height: 1.25; max-width: 320px;
}
.cond-chip .cond-k { text-transform: uppercase; letter-spacing: .08em; opacity: .6; font-size: 9.5px; }
.cond-chip .cond-v { font-weight: 600; }

/* candidates table ------------------------------------------------------------------------- */
td.lipid { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.strong, .num.strong { font-weight: 650; }
.num.up { color: var(--asn-up); font-weight: 650; }
.num.down { color: var(--asn-down); }
.dim { opacity: .62; }

.clus-chip {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650;
  color: #fff; background: var(--c, #7a8b99);
}

/* drawer: descriptor grid ------------------------------------------------------------------ */
.desc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px;
}
.desc-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 9px; background: rgba(127, 140, 160, 0.10);
}
.desc-cell .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .62; }
.desc-cell .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* drawer: per-fold bars -------------------------------------------------------------------- */
.fold-bars { display: flex; flex-direction: column; gap: 6px; }
.fold-bar { display: grid; grid-template-columns: 58px 1fr 54px; align-items: center; gap: 10px; }
.fold-bar .fb-k { font-size: 11px; opacity: .62; }
.fold-bar .fb-track {
  height: 8px; border-radius: 999px; background: var(--asn-track); overflow: hidden;
}
.fold-bar .fb-track i { display: block; height: 100%; background: var(--asn-bar); border-radius: 999px; }
.fold-bar .fb-v { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* chemotypes: bar rows --------------------------------------------------------------------- */
.chemo-head, .chemo-row {
  display: grid; grid-template-columns: 190px 1fr 62px 110px 82px;
  align-items: center; gap: 10px; padding: 4px 12px;
}
.chemo-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .55; }
.chemo-row { font-size: 12.5px; }
.chemo-row:nth-child(even) { background: rgba(127, 140, 160, 0.05); }
.chemo-bin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chemo-bar { height: 8px; border-radius: 999px; background: var(--asn-track); overflow: hidden; }
.chemo-bar i { display: block; height: 100%; background: var(--asn-bar); border-radius: 999px; }
.chemo-num { text-align: right; font-variant-numeric: tabular-nums; }
.acc-sub.strong-rho { color: var(--asn-down); font-weight: 650; }

/* filter panel: range sliders -------------------------------------------------------------- */
.filter-sliders { display: flex; flex-direction: column; gap: 12px; }
.range-row { display: flex; flex-direction: column; gap: 4px; }
.range-lbl { display: flex; justify-content: space-between; font-size: 11.5px; }
.range-lbl .range-val { font-weight: 650; font-variant-numeric: tabular-nums; }
.range-row input[type=range] { width: 100%; accent-color: var(--asn-bar); height: 16px; }

/* filter panel: block chips ---------------------------------------------------------------- */
.filter-acc > summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 6px 2px; font-size: 12.5px;
}
.filter-acc-n {
  min-width: 18px; text-align: center; font-size: 10.5px; font-weight: 700;
  color: #fff; background: var(--asn-bar); border-radius: 999px;
}
.filter-acc-n:empty { background: none; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 2px 8px; }
.filter-chips .chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer; font-size: 11.5px;
  background: rgba(127, 140, 160, 0.12);
}
.filter-chips .chip input { margin: 0; }
.filter-chips .chip:has(input:checked) { background: var(--asn-bar); color: #fff; }

/* misc ------------------------------------------------------------------------------------- */
.struct-svg svg { max-width: 100%; height: auto; }
.sect-note { font-size: 11.5px; opacity: .62; margin-top: 6px; }