/* strand-flip: the merge of two chip exports of module 5 (content/academy/genetics-for-data-scientists/module-5.md). */
.strand-flip__radio { display: inline-flex; align-items: baseline; gap: var(--spacing-4); }
.strand-flip__counts { margin-bottom: var(--spacing-12); color: var(--text-primary); font-size: var(--font-size-14); }
.strand-flip__counts p { margin-bottom: var(--spacing-4); }
.strand-flip__strip-wrap { overflow-x: auto; margin-bottom: var(--spacing-8); }
.strand-flip__strip { display: block; width: 100%; min-width: 40rem; height: auto; font-family: var(--font-family-body); font-size: var(--font-size-12); }
.strand-flip__frame { fill: var(--background-surface-2); stroke: var(--border-strong); stroke-width: 1; }
.strand-flip__tick { stroke-width: 1; }
.strand-flip__axis { fill: var(--text-tertiary); }
.strand-flip__legend { display: flex; flex-wrap: wrap; gap: var(--spacing-8) var(--spacing-16); margin-bottom: var(--spacing-16); color: var(--text-secondary); font-size: var(--font-size-12); }
.strand-flip__legend-item { display: inline-flex; align-items: center; gap: var(--spacing-4); }
.strand-flip__swatch { width: var(--spacing-12); height: var(--spacing-12); }
.strand-flip__buttons { display: inline-flex; flex-wrap: wrap; gap: var(--spacing-4); }
.strand-flip__table-wrap { overflow-x: auto; max-height: 24rem; overflow-y: auto; }
.strand-flip__table { width: 100%; border-collapse: collapse; font-size: var(--font-size-12); }
.strand-flip__table th { position: sticky; top: 0; padding: var(--spacing-2) var(--spacing-8); border-bottom: var(--stroke-weight-1) solid var(--border-default); background-color: var(--background-surface-1); color: var(--text-tertiary); font-weight: var(--font-weight-600); text-align: left; }
.strand-flip__table td { padding: var(--spacing-2) var(--spacing-8); color: var(--text-primary); font-family: var(--font-family-mono); white-space: nowrap; }
.strand-flip__row--silent td { color: var(--text-danger); font-weight: var(--font-weight-600); }
.strand-flip__row--caught td { color: var(--text-secondary); }
.strand-flip__note { margin-top: var(--spacing-8); color: var(--text-tertiary); font-size: var(--font-size-12); }
/* The three results, as strip ticks and legend swatches. */
.strand-flip__result--agree { stroke: var(--border-strong); background-color: var(--border-strong); }
.strand-flip__result--caught { stroke: var(--text-primary); background-color: var(--text-primary); }
.strand-flip__result--silent { stroke: var(--text-danger); stroke-width: 2; background-color: var(--text-danger); }