/* ============================================================
   Read coverage + assembly statistics (sequencing-qc.js) and the
   psi-cluster coverage track (psi-cluster.js, report mode).
   Hand-maintained like the other legacy css.
   ============================================================ */



.SequencingQc { margin-top: 1em; }

/* The open coverage + assembly blocks in Genetic Information sit in the plots flex row
   (.StrainGeneticInfo--plots); without a width they shrink to their content. Full width, as the
   old bottom section was. */
.SequencingQc.-open { width: 100%; }

.SequencingQc--summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--brand-blue-aa);
}

.SequencingQc[open] .SequencingQc--summary { margin-bottom: 1em; }

.SequencingQc--loading,
.SequencingQc--error,
.SequencingQc--notAssessed,
.SequencingQc--none { font-style: italic; }

.SequencingQc--error { color: var(--danger); }

.SequencingQc--block {
  margin-top: var(--body-margin);
  padding-top: var(--body-margin);
  border-top: 1px solid var(--dim-blue-90);
}

.SequencingQc--block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.SequencingQc--blockTitle { margin: 0 0 .5em; }

.SequencingQc--note {
  font-size: .8125rem;
  color: var(--dim-blue-30);
  max-width: 90ch;
}

/* ---- stat grid ---- */
.SequencingQc--stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .75em 1.25em;
  margin: 0 0 1em;
}

.SequencingQc--stat { display: flex; flex-direction: column; }

.SequencingQc--statLabel { font-size: .75rem; text-transform: uppercase; color: var(--dim-blue-45); }

.SequencingQc--statValue { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.SequencingQc--statMedian { font-size: .75rem; color: var(--dim-blue-45); }

/* ---- figures ---- */
.SequencingQc--figures {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
}

.SequencingQc--figure { flex: 1 1 22rem; min-width: 0; position: relative; }

.SequencingQc--figureTitle { margin: 0 0 .25em; font-size: .9375rem; }

.SequencingQc--canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--plot-bg, #fff);
  cursor: crosshair;
}

.SequencingQc--tip {
  position: absolute;
  z-index: var(--z-top);
  max-width: 24em;
  padding: .5em .75em;
  border: 1px solid var(--dim-blue-30);
  background: var(--dim-blue-15);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease;
}

.SequencingQc--tip.is-open { opacity: 1; }
.SequencingQc--tip .-muted { color: var(--dim-blue-75); }

/* ---- bars (species, phyla, BUSCO) ---- */
.SequencingQc--bars { margin: 0; padding: 0; list-style: none; max-width: 40rem; }

.SequencingQc--bar {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr 4.5rem;
  align-items: center;
  gap: .5em;
  font-size: .875rem;
  margin: .2em 0;
}

.SequencingQc--barLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.SequencingQc--barLabel i { font-style: italic; }

.SequencingQc--barTrack { height: .75rem; background: var(--dim-blue-90); border-radius: .2rem; overflow: hidden; }

.SequencingQc--barFill { height: 100%; background: var(--dataviz-blue-35); }
.SequencingQc--barFill.-other { background: var(--dataviz-red-55); }
.SequencingQc--barFill.-unclassified { background: var(--gray-65); }

.SequencingQc--barValue { text-align: right; font-variant-numeric: tabular-nums; }

.SequencingQc--busco {
  display: flex;
  height: 1.25rem;
  border-radius: .2rem;
  overflow: hidden;
  max-width: 40rem;
  margin: .5em 0 .25em;
}

.SequencingQc--buscoSeg { height: 100%; }
.SequencingQc--buscoSeg.-s { background: #2a9d4a; }
.SequencingQc--buscoSeg.-d { background: #8ccf9d; }
.SequencingQc--buscoSeg.-f { background: #e9c46a; }
.SequencingQc--buscoSeg.-m { background: #d1495b; }

.SequencingQc--legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25em 1em;
  margin: .25em 0 .5em;
  font-size: .75rem;
}

.SequencingQc--legendItem {
  display: inline-flex;
  align-items: center;
  gap: .375em;
  cursor: pointer;
  user-select: none;
}

.SequencingQc--legendItem::before {
  content: '';
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: var(--sw, #999);
  border: 1px solid rgba(0, 0, 0, .25);
}

.SequencingQc--legendItem.-hollow::before { background: var(--plot-bg, #fff); border-color: var(--sw, #999); }
.SequencingQc--legendItem.is-off { opacity: .35; }

/* ---- controls / krona ---- */
.SequencingQc--controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 1em;
  margin: .5em 0;
  font-size: .875rem;
}

.SequencingQc--btn {
  padding: .25em .75em;
  border: 1px solid var(--dim-blue-75);
  border-radius: .25em;
  background: var(--plot-bg, #fff);
  color: var(--base-text-color);
  font: inherit;
  cursor: pointer;
}

.SequencingQc--btn:hover { border-color: var(--brand-blue-aa); color: var(--brand-blue-aa); }
.SequencingQc--btn.is-on { border-color: var(--brand-blue-aa); background: var(--brand-blue-bright-92); color: var(--brand-blue-aa); font-weight: 700; }

.SequencingQc--krona {
  width: 100%;
  height: 40rem;
  max-height: 80vh;
  border: 1px solid var(--dim-blue-85);
  background: #fff;
  margin-top: .5em;
}

/* ---- psi-cluster coverage track (report mode) ---- */
.PsiCluster--track { position: relative; width: 100%; margin: 1em 0; }

.PsiCluster--trackCanvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--plot-bg, #fff);
  cursor: crosshair;
}

.PsiCluster--trackCaption { margin-top: .25em; font-size: .75rem; color: var(--dim-blue-30); max-width: 90ch; }

.PsiCluster--table .-reads { white-space: nowrap; font-family: var(--monospace-font); font-size: .875em; }
.PsiCluster--table .-reads.-het { color: #c47a00; font-weight: 700; }
.PsiCluster--table .-reads.-unsupported { color: var(--dataviz-red-55); font-weight: 700; }

@media (min-width: 43.75em) {
  .SequencingQc { margin-top: var(--body-margin); }
}

@media print {
  .SequencingQc { display: block; }
  .SequencingQc--summary { display: none; }
  .SequencingQc--tip, .SequencingQc--controls, .SequencingQc--krona { display: none; }
}

/* ============================================================
   What is in the assembly (assembly-composition.js): the open
   BlobTools-style figure in Genetic Information.
   ============================================================ */

.AsmComp { width: 100%; margin-top: var(--body-margin); }

.AsmComp--loading, .AsmComp--error { font-style: italic; }
.AsmComp--error { color: var(--danger); }

.AsmComp--summary { max-width: 90ch; }
.AsmComp .-muted { color: var(--dim-blue-45); }

.AsmComp--controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em .5em;
  margin: .5em 0; font-size: .875rem;
}

.AsmComp--btn {
  padding: .2em .65em; border: 1px solid var(--dim-blue-75); border-radius: .25em;
  background: var(--plot-bg, #fff); color: var(--base-text-color); font: inherit; font-size: .875rem; cursor: pointer;
}
.AsmComp--btn:hover { border-color: var(--brand-blue-aa); color: var(--brand-blue-aa); }
.AsmComp--btn.is-on { border-color: var(--brand-blue-aa); background: var(--brand-blue-bright-92); color: var(--brand-blue-aa); font-weight: 700; }

.AsmComp--row { display: flex; flex-wrap: wrap; gap: var(--gutter); align-items: flex-start; }
.AsmComp--figure { position: relative; flex: 1 1 30rem; min-width: 0; }
.AsmComp--legendCol { flex: 0 1 20rem; min-width: 14rem; }

.AsmComp--canvas { display: block; width: 100%; height: auto; background: var(--plot-bg, #fff); cursor: crosshair; }

.AsmComp--tip {
  position: absolute; z-index: var(--z-top); max-width: 26em; padding: .5em .75em;
  border: 1px solid var(--dim-blue-30); background: var(--dim-blue-15); color: #fff;
  font-size: .8125rem; line-height: 1.4; pointer-events: none; opacity: 0; transition: opacity .1s ease;
}
.AsmComp--tip.is-open { opacity: 1; }
.AsmComp--tip .-muted { color: var(--dim-blue-75); }

.AsmComp--legend { list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.AsmComp--legendItem {
  display: grid; grid-template-columns: 1rem 1fr; gap: .25em .5em; align-items: baseline;
  padding: .3em .4em; border-radius: .25em; cursor: pointer; user-select: none;
}
.AsmComp--legendItem:hover { background: var(--brand-blue-bright-92); }
.AsmComp--legendItem.is-on { background: var(--brand-blue-bright-92); font-weight: 700; }
.AsmComp--legendItem.is-muted { opacity: .4; }
.AsmComp--swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); position: relative; top: .1em; }
.AsmComp--legendLabel { overflow: hidden; text-overflow: ellipsis; }
.AsmComp--legendStats { grid-column: 2; font-size: .75rem; color: var(--dim-blue-45); font-variant-numeric: tabular-nums; }

.AsmComp--below { display: flex; flex-wrap: wrap; gap: var(--gutter); margin-top: 1em; }
.AsmComp--reads, .AsmComp--side { flex: 1 1 22rem; min-width: 0; }
.AsmComp--readsHead { margin: 0 0 .4em; font-size: .9375rem; }

.AsmComp--bars { margin: 0; padding: 0; list-style: none; max-width: 36rem; }
.AsmComp--bar { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr 4.5rem; align-items: center; gap: .5em; font-size: .8125rem; margin: .15em 0; }
.AsmComp--barLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.AsmComp--barTrack { height: .7rem; background: var(--dim-blue-90); border-radius: .2rem; overflow: hidden; }
.AsmComp--barFill { height: 100%; }
.AsmComp--barValue { text-align: right; font-variant-numeric: tabular-nums; }

.AsmComp--krona { width: 100%; height: 36rem; max-height: 80vh; border: 1px solid var(--dim-blue-85); background: #fff; margin-top: .5em; }

@media print { .AsmComp--controls, .AsmComp--tip, .AsmComp--krona { display: none; } }

/* Mean / median toggle on the per-chromosome depth chart: buttons inline in the title line */
.SequencingQc--figureTitle.-withToggle { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.SequencingQc--toggle { display: inline-flex; gap: .25em; font-weight: 400; }
.SequencingQc--toggleBtn { padding: .05em .55em; border: 1px solid var(--dim-blue-75); border-radius: .25em; background: var(--plot-bg, #fff); color: inherit; font-size: .8125rem; line-height: 1.4; cursor: pointer; }
.SequencingQc--toggleBtn.is-on { border-color: var(--brand-blue-aa); color: var(--brand-blue-aa); font-weight: 700; }
.SequencingQc--toggleNote { margin: .35em 0 0; color: var(--dim-blue-45); font-size: .8125rem; }

/* Coverage tiles: where this sample sits among the samples the viewer can see */
.SequencingQc--strip { display: block; width: 100%; height: 16px; margin-top: .3em; overflow: visible; }
.SequencingQc--strip line { vector-effect: non-scaling-stroke; }
.SequencingQc--strip .-axis { stroke: var(--dim-blue-85); stroke-width: 1; }
.SequencingQc--strip .-peer { stroke: var(--dim-blue-60); stroke-width: 1; opacity: .55; }
.SequencingQc--strip .-median { stroke: var(--slate-blue-30); stroke-width: 2; }
.SequencingQc--strip .-self { stroke: var(--dataviz-red-55, #d1495b); stroke-width: 3; }

/* Strip hover: name the nearest visible sample */
.SequencingQc--stripWrap { position: relative; display: block; }
.SequencingQc--stripWrap .SequencingQc--strip { cursor: pointer; }
.SequencingQc--strip .-hover { stroke: var(--slate-blue-15); stroke-width: 2; }
.SequencingQc--stripTip { position: absolute; top: 20px; transform: translateX(-50%); z-index: 5; display: none; white-space: nowrap; padding: .3em .55em; border: 1px solid var(--dim-blue-85); border-radius: .25em; background: var(--plot-bg, #fff); box-shadow: 0 2px 6px rgba(15,40,61,.15); font-size: .8125rem; line-height: 1.35; pointer-events: none; }
.SequencingQc--stripTip.is-open { display: block; }
.SequencingQc--stripTip .-muted { color: var(--dim-blue-45); }

/* small hover help on the Assembly quality title */
.SequencingQc--help {
  position: relative; display: inline-block; width: 1.1em; height: 1.1em; margin-left: .25em;
  border-radius: 50%; background: var(--dim-blue-60); color: #fff; font: italic 700 .75rem/1.1em var(--primary-font);
  text-align: center; cursor: help; vertical-align: .1em;
}
.SequencingQc--helpText {
  position: absolute; left: 50%; bottom: calc(100% + .5em); z-index: var(--z-top); width: 22em; max-width: 80vw;
  padding: .75em 1em; transform: translateX(-50%); background: var(--dim-blue-15); color: #fff;
  font: normal 400 .8125rem/1.45 var(--primary-font); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.SequencingQc--help:hover .SequencingQc--helpText,
.SequencingQc--help:focus .SequencingQc--helpText { opacity: 1; }
@media print { .SequencingQc--help { display: none; } }