/* SNP detail page — /snps/:rsid */

.snp-show-back-row       { margin-bottom: var(--spacing-24); }
.snp-show-upload-cta     { text-align: center; margin-bottom: var(--spacing-32); }
.snp-show-section-panel  { margin-bottom: var(--spacing-32); }
.snp-show-citation-link  { font-weight: var(--font-weight-500); }

/* Size/weight/color come from the h1 element rule in objects/_reset.css. */
.snp-show-title { margin-bottom: var(--spacing-4); }

.snp-show-title-gene {
  font-size: var(--font-size-20);
  line-height: 1.75rem;
  font-weight: var(--font-weight-400);
  color: var(--text-tertiary);
}

.snp-show-description {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-8);
}

.snp-show-header-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-32);
}

.snp-show-header-share { margin-left: auto; }

.snp-show-layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);

  @media (min-width: 64rem) { flex-direction: row; }
}

.snp-show-sidebar {
  flex-shrink: 0;

  @media (min-width: 64rem) { width: 18rem; } /* Note: bespoke value */
}

.snp-show-sidebar-inner {
  & > * + * { margin-top: var(--spacing-24); }

  @media (min-width: 64rem) {
    position: sticky;
    top: var(--spacing-32);
  }
}

.snp-show-side-heading {
  font-size: var(--font-size-12);
  line-height: 1rem;
  font-weight: var(--font-weight-500);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-12);
}

.snp-show-details-list {
  font-size: var(--font-size-14);
  line-height: 1.25rem;

  & > * + * { margin-top: var(--spacing-8); }
}

.snp-show-details-row,
.snp-show-details-row--align-center {
  display: flex;
  justify-content: space-between;
}
.snp-show-details-row--align-center { align-items: center; }

.snp-show-details-term { color: var(--text-tertiary); }

.snp-show-details-value,
.snp-show-details-value--mono,
.snp-show-details-value--risk {
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}

.snp-show-details-value--mono,
.snp-show-details-value--risk {
  font-family: var(--font-family-mono);
}

.snp-show-details-value--risk {
  font-weight: var(--font-weight-700);
  color: var(--text-risk-factor);
}

.snp-show-chip-coverage {
  display: flex;
  gap: var(--spacing-4);
}

.snp-show-chip-coverage-item {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-12);
  line-height: 1rem;
  padding-inline: var(--spacing-4);
  padding-block: var(--spacing-2);
  border-radius: var(--corner-radius-sm);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}

.snp-show-freq-list > * + * { margin-top: var(--spacing-8); }

.snp-show-freq-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

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

.snp-show-freq-ancestry {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  width: 6rem; /* Note: bespoke value */
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.snp-show-freq-bar-track,
.snp-show-freq-bar-fill,
.snp-show-freq-bar-fill--ancestry {
  height: var(--spacing-8);
  border-radius: var(--corner-radius-full);
}

.snp-show-freq-bar-track {
  flex: 1 1 0%;
  background-color: var(--background-surface-2);
}

.snp-show-freq-bar-fill              { background-color: var(--symbol-strong); }
.snp-show-freq-bar-fill--ancestry    { background-color: var(--symbol-default); }

.snp-show-freq-pct {
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
  width: 2.5rem; /* Note: bespoke value */
  text-align: right;
}

.snp-show-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.snp-show-tag {
  font-size: var(--font-size-12);
  line-height: 1rem;
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-4);
  border-radius: var(--corner-radius-full);
  background-color: var(--background-surface-2);
  color: var(--text-primary);

  &:hover { background-color: var(--background-surface-2); }
}

.snp-show-related-list > * + * { margin-top: var(--spacing-8); }

.snp-show-related-link {
  display: block;
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  border-radius: var(--corner-radius-sm);
  padding: var(--spacing-4);
  margin-inline: calc(var(--spacing-4) * -1);

  &:hover { background-color: var(--background-hover); }
}

.snp-show-related-rsid {
  font-family: var(--font-family-mono);
  color: var(--text-primary);
}

.snp-show-related-gene { color: var(--text-tertiary); }

.snp-show-external-list > * + * { margin-top: var(--spacing-8); }

.snp-show-external-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);

  &:hover { color: var(--text-hover); }
}

.snp-show-external-icon,
.snp-show-reference-icon,
.snp-show-genotype-banner-link-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.snp-show-main {
  flex: 1 1 0%;
  min-width: 0;
}

.snp-show-genotype-banner {
  margin-bottom: var(--spacing-32);
  background-color: var(--background-surface-2);
  border: var(--stroke-weight-1) solid var(--border-default);
  border-radius: var(--corner-radius-md);
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-12);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);

  & .snp-show-genotype-banner-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacing-12);
    row-gap: var(--spacing-4);
  }

  & .snp-show-genotype-banner-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
  }

  & .snp-show-genotype-banner-alleles {
    font-size: var(--font-size-20);
    line-height: 1.75rem;
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-primary);
  }

  & .snp-show-genotype-banner-nickname { font-style: italic; }

  & .snp-show-genotype-banner-headline {
    display: none;
    color: var(--text-primary);

    @media (min-width: 40rem) { display: inline; }
  }

  & .snp-show-genotype-banner-link {
    margin-left: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);

    &:hover { color: var(--text-hover); }
  }
}

.snp-show-upload-cta-title {
  font-size: var(--font-size-18);
  line-height: 1.75rem;
  font-weight: var(--font-weight-600);
  color: var(--text-primary);
  margin-bottom: var(--spacing-8);
}

.snp-show-upload-cta-text {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-16);
}

.snp-show-upload-cta-button {
  display: inline-block;
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-weight: var(--font-weight-600);
  padding-block: var(--spacing-8);
  padding-inline: var(--spacing-24);
  border-radius: var(--corner-radius-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  font-size: var(--font-size-14);
  line-height: 1.25rem;

  &:hover { background-color: var(--background-surface-2); }
}

.snp-show-upload-cta-fine {
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
  margin-top: var(--spacing-12);
}

.snp-show-section-subtitle {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-24);
}

/* prose styling lives in objects/_prose.css; ERB carries `snp-show-body-prose prose`. */
.snp-show-body-prose { max-width: none; }

.snp-show-interaction-list > * + * {
  border-top: var(--stroke-weight-1) solid var(--border-subtle);
}

.snp-show-interaction-row {
  padding-block: var(--spacing-12);

  &:first-child { padding-top: var(--spacing-0); }
  &:last-child  { padding-bottom: var(--spacing-0); }
}

.snp-show-interaction-row-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.snp-show-interaction-name {
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
}

.snp-show-interaction-desc {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-4);
}

.snp-show-nutrient-form,
.snp-show-nutrient-consequence {
  font-size: var(--font-size-12);
  line-height: 1rem;
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-2);
  border-radius: var(--corner-radius-sm);
  font-weight: var(--font-weight-500);
}

.snp-show-nutrient-form {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}

.snp-show-nutrient-consequence {
  background-color: var(--background-surface-2);
  color: var(--text-primary);
}

.snp-show-genotype-list > * + * { margin-top: var(--spacing-16); }

.snp-show-genotype-card {
  border-width: var(--stroke-weight-1);
  border-style: solid;
  border-radius: var(--corner-radius-sm);
  padding: var(--spacing-16);

  &.snp-show-genotype-card--highlighted {
    border-width: var(--stroke-weight-2);
    border-color: var(--border-default);
  }

  &.snp-show-genotype-card--critical,
  &.snp-show-genotype-card--warning {
    border-width: var(--stroke-weight-2);
    border-color: var(--border-default);
  }

  &.snp-show-genotype-card--caution {
    border-width: var(--stroke-weight-2);
    border-color: var(--border-default);
  }

  &.snp-show-genotype-card--default { border-color: var(--border-default); }
}

.snp-show-genotype-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-8);

  @media (min-width: 40rem) { gap: var(--spacing-12); }
}

.snp-show-genotype-card-alleles {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-18);
  line-height: 1.75rem;
  color: var(--text-primary);
}

.snp-show-genotype-card-nickname {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  font-style: italic;
  color: var(--text-tertiary);
}

.snp-show-genotype-card-yours {
  font-size: var(--font-size-12);
  line-height: 1rem;
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  padding-inline: var(--spacing-8);
  padding-block: var(--spacing-2);
  border-radius: var(--corner-radius-sm);
  font-weight: var(--font-weight-500);
}

.snp-show-genotype-card-status {
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
}

.snp-show-genotype-card-headline {
  font-weight: var(--font-weight-500);
  color: var(--text-primary);
  margin-bottom: var(--spacing-8);
}

/* prose styling lives in objects/_prose.css; ERB carries `snp-show-genotype-card-explanation prose prose-sm`. */
.snp-show-genotype-card-explanation {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-secondary);
  max-width: none;
}

.snp-show-genotype-card-note {
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-12);
  border-top: var(--stroke-weight-1) solid var(--border-subtle);
}

.snp-show-genotype-card-note-text {
  font-size: var(--font-size-12);
  line-height: 1rem;
  color: var(--text-tertiary);
}

.snp-show-genotype-card-note-mono {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-600);
}

.snp-show-references-list > * + * { margin-top: var(--spacing-12); }

.snp-show-reference {
  font-size: var(--font-size-14);
  line-height: 1.25rem;
}

.snp-show-reference-icon { display: inline; }

.snp-show-reference-summary {
  color: var(--text-secondary);
  margin-top: var(--spacing-2);
}

.snp-show-result-card {
  margin-bottom: var(--spacing-32);
  background-color: var(--background-surface-2);
  border: var(--stroke-weight-1) solid var(--border-default);
  border-radius: var(--corner-radius-md);
  padding: var(--spacing-16);
  margin-top: var(--spacing-32);
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);

  @media (min-width: 40rem) { padding: var(--spacing-24); }

  & .snp-show-result-head {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-12);

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

  & .snp-show-result-title {
    font-size: var(--font-size-18);
    line-height: 1.75rem;
    font-weight: var(--font-weight-600);
  }

  & .snp-show-result-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    background-color: var(--background-surface-2);
    border-radius: var(--corner-radius-sm);
    padding-inline: var(--spacing-16);
    padding-block: var(--spacing-8);
  }

  & .snp-show-result-chip-label { color: var(--text-primary); }

  & .snp-show-result-chip-alleles {
    font-size: var(--font-size-20);
    line-height: 1.75rem;
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
  }

  & .snp-show-result-chip-nickname {
    font-style: italic;
    color: var(--text-primary);
  }

  & .snp-show-result-headline {
    font-weight: var(--font-weight-500);
    margin-bottom: var(--spacing-8);
  }

  & .snp-show-actions-section {
    margin-top: var(--spacing-16);
    padding-top: var(--spacing-16);
    border-top: var(--stroke-weight-1) solid var(--border-default);
  }

  & .snp-show-actions-heading {
    font-weight: var(--font-weight-600);
    margin-bottom: var(--spacing-8);
  }

  & .snp-show-preview-title { font-weight: var(--font-weight-600); }

  & .snp-show-preview-summary { margin-top: var(--spacing-2); }

  & .snp-show-preview-clipped {
    position: relative;
    margin-top: var(--spacing-8);
    max-height: 5rem; /* Note: bespoke value */
    overflow: hidden;
  }

  /* prose styling lives in objects/_prose.css; ERB carries `snp-show-preview-prose prose prose-sm`. */
  & .snp-show-preview-prose { max-width: none; }

  & .snp-show-preview-fade {
    position: absolute;
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    right: var(--spacing-0);
    height: var(--spacing-48); /* approx 3rem */
  }
}