/* ============================================================
   Uniqueness figures: clone test (report section), later the
   isolation and private-variation figures. clone-test.js.
   Hand-maintained like the other legacy css.
   ============================================================ */

.StrainCloneTest--intro { max-width: 80ch; }

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

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

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

/* ---- verdict ---- */
.CloneTest--verdict {
  margin: 0 0 .5em;
  padding: .75em 1em;
  border-left: .375rem solid var(--dataviz-blue-35);
  background: var(--plot-bg, var(--dataviz-blue-98));   /* psilo palette surface; stock near-white elsewhere */
  max-width: 80ch;
}

.CloneTest--verdict.-clone { border-left-color: var(--dataviz-red-55); background: var(--dataviz-red-90); }
.CloneTest--verdict.-border { border-left-color: var(--dataviz-yellow-40); background: var(--dataviz-yellow-85); }
.CloneTest--verdict.-unscored { border-left-color: var(--gray-65); background: var(--plot-bg, var(--gray-95)); }

.CloneTest--verdictHead {
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  margin-bottom: .25em;
}

.CloneTest--verdictBody { margin: 0; }

.CloneTest--caveat {
  margin: .5em 0 0;
  font-size: .875rem;
  color: var(--dim-blue-30);
  max-width: 80ch;
}

/* ---- panels ---- */
.CloneTest--panels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  margin-top: 1em;
}

.CloneTest--panel {
  flex: 1 1 22rem;
  min-width: 0;
}

.CloneTest--panelTitle {
  margin: 0 0 .25em;
  font-size: 1rem;
}

.CloneTest--figure { position: relative; width: 100%; }

.CloneTest--canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

.CloneTest--tip {
  position: absolute;
  z-index: var(--z-top);
  max-width: 22em;
  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;
}

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

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

.CloneTest--legendItem {
  display: inline-flex;
  align-items: center;
  gap: .375em;
}

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

.CloneTest--legendItem.-hollow::before { background: var(--plot-bg, #fff); border-color: var(--sw, #999); }

.CloneTest--caption {
  margin-top: .5em;
  font-size: .75rem;
  color: var(--dim-blue-30);
}

/* ---- rank line between the two panel rows ---- */
.CloneTest--rank {
  margin: 1.25em 0 0;
  max-width: 80ch;
}

/* ---- within-band list ---- */
.CloneTest--within {
  margin: .5em 0 0;
  padding-left: 1.25em;
}

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

@media print {
  .CloneTest--tip { display: none; }
}

/* ============================================================
   Uniqueness verdict (General Information, the heterozygosity
   slot on psilo). uniqueness-verdict.js.
   ============================================================ */

.UniquenessVerdict { width: 100%; }

.UniquenessVerdict--loading,
.UniquenessVerdict--pending,
.UniquenessVerdict--error { font-style: italic; }

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

.UniquenessVerdict--box {
  padding: .75em 1em;
  border-left: .375rem solid var(--dataviz-blue-35);
  background: var(--plot-bg, var(--dataviz-blue-98));   /* psilo palette surface; stock near-white elsewhere */
}

.UniquenessVerdict--box.-clone { border-left-color: var(--dataviz-red-55); background: var(--dataviz-red-90); }
.UniquenessVerdict--box.-border { border-left-color: var(--dataviz-yellow-40); background: var(--dataviz-yellow-85); }
.UniquenessVerdict--box.-unscored { border-left-color: var(--gray-65); background: var(--plot-bg, var(--gray-95)); }

.UniquenessVerdict--head {
  display: block;
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.25;
}

.UniquenessVerdict--line { margin: .375em 0 0; }

.UniquenessVerdict--details { margin-top: .5em; }

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

.UniquenessVerdict--text {
  margin: .5em 0 0;
  font-size: .9375em;
  line-height: 1.5;
}

.UniquenessVerdict--ref {
  font-size: .8125em;
  white-space: nowrap;
}

.UniquenessVerdict--ref::before { content: '\2192\00a0'; }

.UniquenessVerdict--text .UniquenessVerdict--pending { display: block; margin-top: .5em; font-size: .9em; }

/* Sits beside the Rarity plot like the heterozygosity gauge did (see report.css .Rarity widths). */
@media (min-width: 37.5em) {
  .UniquenessVerdict { width: var(--one-half); margin-top: 0; }
}

@media (min-width: 60em) {
  .UniquenessVerdict { width: var(--two-thirds); }
}

@media print {
  .UniquenessVerdict--details { display: block; }
  .UniquenessVerdict--details summary { display: none; }
}