/* Gene Combination Card (Figma 7b, 182:4833) — one per analysed variant on the
 * offspring results page. Header (rsid + gene + flag tags) over two columns:
 * parental alleles + Punnett grid | per-genotype offspring probabilities. All
 * radii corner-radius-xs (4px). */

.offspring-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-32);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-1);
}

/* Mobile: tighten the card padding from 32 to 24. */
@media (max-width: 47.999rem) {
  .offspring-card { padding: var(--spacing-24); }
}

/* ---- Header ---- */
.offspring-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
}
.offspring-card__rsid {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);

  &:hover { text-decoration: underline; }
}
.offspring-card__gene {
  font-size: var(--font-size-16);
  color: var(--text-secondary);
}
.offspring-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-8);
  margin-inline-start: auto;
}

/* Flag tags — Figma "Tags" (389:4220). 22px tall: 14px text on a 1.0
 * line-height with 4px block padding. Uppercase with wider (2px) tracking.
 * Informational flags (Guaranteed, Carrier) are the neutral base; concerning
 * ones (Warning, Critical) take --danger. */
.offspring-tag {
  display: inline-flex;
  align-items: center;
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-8);
  border-radius: var(--corner-radius-xs);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  line-height: 1;
  letter-spacing: var(--font-letter-spacing-wider);
  text-transform: uppercase;
  background-color: var(--background-surface-2);
  color: var(--text-tertiary);
}
.offspring-tag--danger {
  background-color: var(--background-danger);
  color: var(--text-danger);
}

/* ---- Body: alleles column + outcomes column ---- */
.offspring-card__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-32);
}
.offspring-card__alleles {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  flex: 0 1 12.5rem; /* 200px (Figma left column is ≈255px — deliberately narrower) */
}
.offspring-card__outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  flex: 1 1 20rem;
  min-width: 0;
}

/* Below 768px the two columns stop sitting side by side: alleles first, then
 * the outcomes column beneath it, each spanning the full card. flex-basis
 * governs the main axis, which is now vertical, so the widths come from
 * width:100% rather than the basis the row layout used. */
@media (max-width: 47.999rem) {
  .offspring-card__body { flex-direction: column; }
  .offspring-card__alleles,
  .offspring-card__outcomes {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* 1024–1199px: the rail is back and the card is at its narrowest, so the two
 * bases (200 + 320 + 32 gap = 552px) no longer fit and the columns would wrap
 * onto separate lines — wrapping is decided from the bases, before any
 * shrinking. They must stay side by side here, so turn wrapping off and let
 * both columns shrink instead; min-width: 0 keeps the alleles column's
 * intrinsic content width from vetoing that shrink. */
@media (min-width: 64rem) and (max-width: 74.999rem) {
  .offspring-card__body { flex-wrap: nowrap; }
  .offspring-card__alleles { min-width: 0; }
}

/* Parent genotype boxes + Punnett share a 32px gap below the label. */
.offspring-card__cross {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}
.offspring-card__parents {
  display: flex;
  gap: var(--spacing-4);
}
.offspring-parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--spacing-4);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-8);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
}
.offspring-parent__genotype {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
}
.offspring-parent__name {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Punnett grid ---- */
.offspring-punnett {
  display: grid;
  grid-template-columns: repeat(var(--punnett-cols, 3), 1fr);
  gap: var(--spacing-4);
}
.offspring-punnett__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--spacing-32);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-base);
  color: var(--text-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
  letter-spacing: var(--font-letter-spacing-wide);
}
.offspring-punnett__cell--head { background-color: var(--background-surface-2); }
.offspring-punnett__cell--corner { background-color: transparent; }
.offspring-punnett__cell.is-concern { color: var(--text-danger); }

/* ---- Outcome probabilities (box width ∝ probability via inline flex-grow) ---- */
.offspring-card__outcomes-bar {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-base);
}
.offspring-outcome {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  /* Width is the probability share of the row. flex-basis must be 0 so the
   * *whole* row is free space for flex-grow (the probability, supplied
   * inline) to divide — with a content-sized basis, grow would only split
   * the leftover and a 25% outcome would render far wider than a quarter.
   * min-width: 0 stops intrinsic content width re-inflating the small ones.
   * No wrapping: a wrapped box leaves its row and stops being to scale. */
  flex-grow: 1; /* overridden inline per probability */
  flex-shrink: 1;
  flex-basis: 0;
  min-width: 0;
  padding: var(--spacing-16);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
}

/* The outcome boxes stack as full-width rows in the two widths where the card
 * is too narrow to hold them side by side: below 768px, and again between
 * 1024px and 1199px, where the page rail returns and squeezes the card. At
 * 768–1023px (rail hidden, full-width card) and from 1200px up they sit in a
 * row again. flex-basis has to return to auto while stacked: the main axis is
 * vertical there, so a basis of 0 would start each box at zero height. The
 * inline flex-grow (the probability) is inert in this state — the bar's height
 * is auto, so there is no free space to divide. */
@media (max-width: 47.999rem), (min-width: 64rem) and (max-width: 74.999rem) {
  .offspring-card__outcomes-bar { flex-direction: column; }
  .offspring-outcome {
    flex-basis: auto;
    flex-shrink: 0;
  }
}
.offspring-outcome__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}
.offspring-outcome__genotype {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-700);
  letter-spacing: var(--font-letter-spacing-tight);
  color: var(--text-primary);
}
.offspring-outcome__genotype.is-concern { color: var(--text-danger); }
.offspring-outcome__pct {
  flex-shrink: 0;
  padding-block: var(--spacing-4);
  padding-inline: var(--spacing-8);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-base);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
}
.offspring-outcome__desc {
  font-size: var(--font-size-14);
  color: var(--text-secondary);
}