/* Basket Affinity output (out-basket.js): page layout and the scatter's dots. */
.bas-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); }
/* Two figures: the band is as wide as they need, not the page. */
.bas-tiles { grid-template-columns: repeat(2, minmax(0, 18rem)); width: fit-content; max-width: 100%; }
.bas-minline { display: flex; gap: 0.375rem; align-items: center; }
.bas-minline > .def-marker { margin-inline-start: 0; }
.bas-chart-note { color: var(--muted-foreground); font-size: var(--text-label); margin-top: 0.5rem; }

.bas-dot { stroke: var(--background); stroke-width: 1; opacity: 0.45; }
.bas-dot[data-side="above"] { fill: var(--chart-current); }
.bas-dot[data-side="below"] { fill: var(--chart-comparison); }
.bas-dot[data-named] { opacity: 0.9; }
.bas-dot:is(:hover, :focus-visible) { stroke-width: 2; opacity: 1; }
.bas-dot:hover { stroke: var(--foreground); }
.bas-dot:focus-visible { stroke: var(--ring); }