/* Customer Overlap output: page layout, the overlap diagram and the selected region. */
/* Two figures: the band is as wide as they need, not the page. */
.ov-tiles { grid-template-columns: repeat(2, minmax(0, 18rem)); width: fit-content; max-width: 100%; margin-bottom: var(--space-section); }
.ov > .card + .card { margin-top: var(--space-section); }
.ov-also { max-width: 40rem; }
.ov .table tr[data-selected] > :is(td, th) { background: var(--accent); }

.ov-diagram-wrap { position: relative; }
.ov-diagram { margin-inline: auto; }
.ov-fill { fill-opacity: 0.1; }
.ov-circle { fill: none; stroke-width: 2; pointer-events: none; }
.ov-hit { fill: transparent; }
.ov-region { cursor: pointer; }
.ov-highlight { fill: var(--foreground); opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.ov-region:hover .ov-highlight { opacity: 0.08; }
.ov-region:focus-visible .ov-highlight { opacity: 0.16; }
/* Half of the stroke is inside the region; the circles' own 2 px outlines cover 1 px of it. */
.ov-focus-ring { display: none; fill: none; stroke: var(--ring); stroke-width: 8; pointer-events: none; }
.ov-region:focus-visible .ov-focus-ring { display: inline; }
.ov-region[aria-pressed="true"] .ov-highlight { opacity: 0.22; }
@media (prefers-reduced-motion: reduce) { .ov-highlight { transition: none; } }
.ov-text { pointer-events: none; }
.ov-diagram .ov-group-name { font-size: var(--text-body); font-weight: 700; }
.ov-diagram .ov-region-label { font-size: var(--text-label); font-weight: 500; }
.ov-diagram .ov-number { font-size: var(--text-body); font-weight: 700; }
.ov-diagram .ov-number-sub { font-size: var(--text-micro); fill: var(--muted-foreground); }
.ov-callout { stroke: var(--muted-foreground); stroke-dasharray: 2 3; }
/* The selected region's numbers in the chart tooltip's look, pinned in a free corner of the diagram (placed by
   out-overlap.js), or under it when no corner is free. */
.ov-pin { position: absolute; top: 0; left: 0; translate: none; transition: none; max-width: 18rem; }
.ov-pin[data-below] { position: static; width: max-content; margin: 0.5rem auto 0; }
.ov-tiny-circle { fill: none; stroke-width: 1.5; }
.ov-tiny-all { fill: var(--chart-current); opacity: 0.45; }