.offspring-detail-back { margin-bottom: var(--spacing-24); }

.offspring-detail-key-findings,
.offspring-detail-header { margin-bottom: var(--spacing-32); }

.offspring-detail-header > h1 { margin-bottom: var(--spacing-8); }

.offspring-detail-key-findings-title {
  font-size: var(--font-size-18);
  line-height: 1.75rem;
  font-weight: var(--font-weight-600);
  color: var(--text-risk-factor);
  margin-bottom: var(--spacing-12);
}

.offspring-detail-key-findings-list > * + * { margin-top: var(--spacing-8); }

.offspring-detail-key-finding {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
}

.offspring-detail-key-finding-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-risk-factor);
  flex-shrink: 0;
  margin-top: var(--spacing-2);
}

.offspring-detail-key-finding-body { color: var(--text-primary); }

.offspring-detail-key-finding-rsid {
  font-family: var(--font-family-mono);
}

.offspring-detail-key-finding-gene { color: var(--text-tertiary); }

.offspring-detail-snps > * + * { margin-top: var(--spacing-24); }

.offspring-detail-snp-header { margin-bottom: var(--spacing-16); }

.offspring-detail-snp-title {
  font-size: var(--font-size-18);
  line-height: 1.75rem;
  font-weight: var(--font-weight-600);
  color: var(--text-primary);

  &:hover { color: var(--text-hover); }
}
html.theme-dark .offspring-detail-snp-title,
html.theme-dark .offspring-detail-snp-title:hover { color: var(--text-hover); }

.offspring-detail-snp-gene {
  color: var(--text-tertiary);
  font-weight: var(--font-weight-400);
}

.offspring-detail-snp-description { margin-top: var(--spacing-4); }

@media (min-width: 64rem) {
  .offspring-detail-snp-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-24);
  }
  .offspring-detail-snp-main { grid-column: span 2 / span 2; }
}

.offspring-detail-parents {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-16);

  @media (min-width: 40rem) {
    flex-direction: row;
    align-items: center;
  }
}

.offspring-detail-parent {
  background-color: var(--background-surface-2);
  border-radius: var(--corner-radius-sm);
  padding-inline: var(--spacing-12);
  padding-block: var(--spacing-8);
  flex: 1 1 0%;
}

.offspring-detail-parent-label {
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}

.offspring-detail-parent-genotype {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
  color: var(--text-primary);
}

.offspring-detail-parent-headline {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-tertiary);
}

.offspring-detail-parent-cross {
  color: var(--symbol-default);
  text-align: center;

  @media (min-width: 40rem) { text-align: left; }
}

.offspring-detail-outcomes > * + * { margin-top: var(--spacing-12); }

.offspring-detail-outcome-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-4);
}

.offspring-detail-outcome-genotype {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
  width: 2rem; /* Note: bespoke value */
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);
}

.offspring-detail-outcome-bar {
  flex: 1 1 0%;
  background-color: var(--background-surface-2);
  border-radius: var(--corner-radius-full);
  height: 1rem;
}

.offspring-detail-outcome-bar-fill {
  height: 1rem;
  border-radius: var(--corner-radius-full);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-8);

  &.offspring-detail-outcome-bar-fill--critical { background-color: var(--background-surface-2); }
  &.offspring-detail-outcome-bar-fill--warning  { background-color: var(--background-surface-2); }
  &.offspring-detail-outcome-bar-fill--caution  { background-color: var(--background-surface-2); }
  &.offspring-detail-outcome-bar-fill--normal   { background-color: var(--background-surface-2); }
  &.offspring-detail-outcome-bar-fill--default  { background-color: var(--background-surface-2); }
}

.offspring-detail-outcome-bar-label {
  font-size: var(--font-size-12);
  line-height: 1rem;
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}

.offspring-detail-outcome-pct {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
  width: var(--spacing-48);
  text-align: right;
}

.offspring-detail-outcome-headline {
  margin-left: 2.75rem; /* Note: bespoke value */
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.offspring-detail-outcome-attribution { color: var(--text-tertiary); }

.offspring-detail-flags {
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-16);
  border-top: var(--stroke-weight-1) solid var(--border-subtle);
}

.offspring-detail-flag {
  font-size: var(--font-size-12);
  line-height: 1rem;
  padding-inline: var(--spacing-12);
  padding-block: var(--spacing-4);
  border-radius: var(--corner-radius-sm);
  display: inline-block;
  margin-right: var(--spacing-8);
  margin-bottom: var(--spacing-4);

  &.offspring-detail-flag--critical,
  &.offspring-detail-flag--warning,
  &.offspring-detail-flag--carrier,
  &.offspring-detail-flag--default {
    background-color: var(--background-base);
    border: var(--stroke-weight-1) solid var(--border-default);
    color: var(--text-primary);
  }
  &.offspring-detail-flag--critical,
  &.offspring-detail-flag--warning {
    border-color: var(--border-default);
    color: var(--text-risk-factor);
  }
  &.offspring-detail-flag--carrier {
    border-color: var(--border-default);
    color: var(--text-primary);
  }
}

.offspring-detail-punnett-col {
  margin-top: var(--spacing-16);

  @media (min-width: 64rem) {
    grid-column: span 1 / span 1;
    margin-top: var(--spacing-0);
  }
}