/* snps/_reader_card — two-column reader view of a single SNP */
.reader-card {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-14);
  line-height: 1.25rem;
  color: var(--text-primary);

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

  /* Left column: identity / technical / personal */
  & .reader-card-side {
    flex-shrink: 0;
    padding: var(--spacing-16);
    background-color: var(--background-surface-2);
    border-bottom: var(--stroke-weight-1) solid var(--border-subtle);

    @media (min-width: 64rem) {
      width: 18rem; /* Note: bespoke value */
      border-right: var(--stroke-weight-1) solid var(--border-subtle);
      border-bottom: 0;
    }
  }

  & .reader-card-title {
    font-weight: var(--font-weight-700);
    margin-bottom: var(--spacing-2);
  }

  & .reader-card-rsid {
    font-family: var(--font-family-mono);
    color: var(--text-primary);

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

  & .reader-card-gene {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-8);
  }

  & .reader-card-gene-spacer { margin-bottom: var(--spacing-8); }

  & .reader-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-16);
  }

  & .reader-card-side-body > * + * { margin-top: var(--spacing-16); }

  /* Definition list (chromosome, risk allele) */
  & .reader-card-dl > * + * { margin-top: var(--spacing-4); }

  & .reader-card-dl-row {
    display: flex;
    justify-content: space-between;
  }

  & .reader-card-dt { color: var(--text-tertiary); }

  & .reader-card-dd { font-weight: var(--font-weight-500); }

  & .reader-card-dd--risk {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    color: var(--text-risk-factor);
  }

  /* Genotypes list */
  & .reader-card-section-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-8);
  }

  & .reader-card-genos > * + * { margin-top: var(--spacing-4); }

  & .reader-card-geno {
    border-width: var(--stroke-weight-1);
    border-style: solid;
    border-radius: var(--corner-radius-sm);
    padding-inline: var(--spacing-8);
    padding-block: var(--spacing-8);

    &.reader-card-geno--yours {
      background-color: var(--background-surface-2);
      border-color: var(--border-default);
    }

    &.reader-card-geno--critical,
    &.reader-card-geno--warning {
      background-color: var(--background-surface-1);
      border-width: var(--stroke-weight-2);
      border-color: var(--border-default);
    }

    &.reader-card-geno--caution {
      background-color: var(--background-surface-1);
      border-width: var(--stroke-weight-2);
      border-color: var(--border-default);
    }

    &.reader-card-geno--default {
      background-color: var(--background-surface-1);
      border-color: var(--border-default);
    }
  }

  & .reader-card-geno-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
  }

  & .reader-card-geno-alleles {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-700);
    font-size: var(--font-size-12);
    line-height: 1rem;
    width: 1.5rem; /* Note: bespoke value */
  }

  & .reader-card-geno-bar {
    flex: 1 1 0%;
    background-color: var(--background-surface-2);
    border-radius: var(--corner-radius-full);
    height: 0.375rem; /* Note: bespoke value */
  }

  & .reader-card-geno-bar-fill {
    height: 0.375rem; /* Note: bespoke value */
    border-radius: var(--corner-radius-full);

    &.reader-card-geno-bar-fill--yours   { background-color: var(--background-surface-2); }
    &.reader-card-geno-bar-fill--default { background-color: var(--text-tertiary); }
  }

  & .reader-card-geno-pct {
    font-size: var(--font-size-12);
    line-height: 1rem;
    color: var(--text-tertiary);
    width: 2rem; /* Note: bespoke value */
    text-align: right;
  }

  & .reader-card-geno-you {
    font-size: var(--font-size-12);
    line-height: 1rem;
    font-weight: var(--font-weight-500);
    color: var(--text-primary);
  }

  & .reader-card-geno-desc {
    font-size: var(--font-size-12);
    color: var(--text-secondary);
    margin-top: var(--spacing-4);
    line-height: 1.25;
  }

  /* Tags */
  & .reader-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
  }

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

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

  /* Category + external links footer */
  & .reader-card-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-12);
    line-height: 1rem;
    color: var(--text-tertiary);
  }

  & .reader-card-link {
    color: var(--text-primary);

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

  & .reader-card-external-links {
    display: flex;
    gap: var(--spacing-8);
  }

  /* Right column: article + action items */
  & .reader-card-main {
    padding: var(--spacing-16);

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

  /* prose styling lives in objects/_prose.css; ERB carries `reader-card-article prose prose-sm`. */
  & .reader-card-article { max-width: none; }

  & .reader-card-actions-block {
    margin-top: var(--spacing-24);
    padding-top: var(--spacing-24);
    border-top: var(--stroke-weight-1) solid var(--border-default);
  }

  & .reader-card-actions-heading {
    font-weight: var(--font-weight-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-12);
  }

  /* Preview (free tier teaser) */
  & .reader-card-preview-title { font-weight: var(--font-weight-600); }

  & .reader-card-preview-summary {
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
  }

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

  /* prose styling lives in objects/_prose.css; ERB carries `reader-card-preview-prose prose prose-sm`. */
  & .reader-card-preview-prose {
    max-width: none;
    color: var(--text-secondary);
  }

  & .reader-card-preview-fade {
    position: absolute;
    bottom: var(--spacing-0);
    left: var(--spacing-0);
    right: var(--spacing-0);
    height: var(--spacing-48); /* approx 3rem */
    background-image: linear-gradient(to top, var(--background-surface-1), transparent);
  }

  /* "Your genotype has no actions" footer notice */
  & .reader-card-no-actions {
    margin-top: var(--spacing-24);
    padding-top: var(--spacing-16);
    border-top: var(--stroke-weight-1) solid var(--border-subtle);
  }

  & .reader-card-no-actions-text {
    font-size: var(--font-size-12);
    line-height: 1rem;
    color: var(--text-tertiary);
  }

  & .reader-card-no-actions-alleles {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-600);
  }
}