/* gvcf-blocks: the VCF-against-gVCF strip of module 3, page 4 (content/academy/genetics-for-data-scientists/module-3-4.md). */
.gvcf-blocks__radio { display: inline-flex; align-items: baseline; gap: var(--spacing-4); }
.gvcf-blocks__overview,
.gvcf-blocks__detail { display: block; width: 100%; height: auto; margin-bottom: var(--spacing-8); font-family: var(--font-family-body); font-size: var(--font-size-12); }
.gvcf-blocks__detail { cursor: crosshair; }
.gvcf-blocks__summary,
.gvcf-blocks__window-title { margin-bottom: var(--spacing-12); color: var(--text-secondary); font-size: var(--font-size-14); }
.gvcf-blocks__window-title { color: var(--text-primary); }
.gvcf-blocks__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); }
.gvcf-blocks__legend-item { display: inline-flex; align-items: center; gap: var(--spacing-4); }
.gvcf-blocks__legend-swatch { width: 12px; height: 12px; border: var(--stroke-weight-1) solid var(--border-default); }
.gvcf-blocks__answer { color: var(--text-primary); font-size: var(--font-size-14); }
/* The states. A block's tier is its depth; the VCF view has only "variant" and "absent". */
.gvcf-blocks__state--tier15 { fill: var(--text-secondary); background-color: var(--text-secondary); }
.gvcf-blocks__state--tier5 { fill: var(--border-strong); background-color: var(--border-strong); }
.gvcf-blocks__state--tier1 { fill: var(--border-default); background-color: var(--border-default); }
.gvcf-blocks__state--nocall { fill: var(--text-primary); background-color: var(--text-primary); }
.gvcf-blocks__state--variant { fill: var(--text-danger); background-color: var(--text-danger); }
.gvcf-blocks__state--none { fill: var(--background-surface-2); background-color: var(--background-surface-2); }
.gvcf-blocks__state--n { fill: var(--background-base); background-color: var(--background-base); }
.gvcf-blocks__state--absent { fill: var(--background-surface-2); background-color: var(--background-surface-2); }
.gvcf-blocks__frame { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.gvcf-blocks__window-mark { fill: none; stroke: var(--text-danger); stroke-width: 1.5; }
.gvcf-blocks__window-mark.is-selected { stroke-width: 3; }
.gvcf-blocks__cursor { stroke: var(--text-primary); stroke-width: 1; }