/* ============================================================================
   evidence-scatter.css -- widget #15 (2D plot -> detail)

   the scaffold's .cw-grid is repurposed as the plot canvas: it becomes a fixed
   height relative box with axis lines (border-left + border-bottom), and each
   .cw-item (a point) is absolutely positioned via per-point css rules injected
   by the js (keyed on data-cw-id, so positions survive re-render).
   theme-token based; optional status colors encode meaning.
   ============================================================================ */

.cw-sc {
    position: relative;
    padding: 6px 14px 8px 46px;
}

/* --- plot canvas (the scaffold's grid) --- */

.cw-sc .cw-grid {
    position: relative;
    display: block;
    height: var(--cw-sc-h, 300px);
    margin: 0;
    border-left: 1.5px solid var(--cw-border);
    border-bottom: 1.5px solid var(--cw-border);
    background:
        repeating-linear-gradient(to top, transparent, transparent 24%, color-mix(in srgb, var(--cw-border) 60%, transparent) 24%, color-mix(in srgb, var(--cw-border) 60%, transparent) calc(24% + 1px));
}

/* points: strip the card look, become small dots centered on their coordinate */
.cw-sc .cw-item {
    position: absolute;
    padding: 0;
    gap: 0;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, 50%);
}
.cw-sc.cw-anim-on .cw-item:hover { transform: translate(-50%, 50%); }
.cw-sc .cw-item--selected { background: none; border: 0; }
.cw-sc .cw-item:focus-visible { outline: none; }
.cw-sc .cw-item:focus-visible .cw-sc-dot {
    box-shadow: 0 0 0 3px var(--cw-accent), 0 0 0 5px var(--cw-bg);
}

.cw-sc-dot {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--cw-accent);
    border: 2px solid var(--cw-accent);
    opacity: 0.72;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.cw-sc.cw-anim-on .cw-item:hover .cw-sc-dot { transform: scale(1.18); opacity: 0.95; }
.cw-sc-dot--on {
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cw-accent) 22%, transparent);
}

/* --- axis chrome (siblings of the canvas, persist across re-render) --- */

.cw-sc-chrome {
    position: absolute;
    inset: 0;
    pointer-events: none;
    font-size: 0.66rem;
    color: var(--cw-muted);
}

.cw-sc-ytitle {
    position: absolute;
    left: 1px;
    top: 6px;
    height: var(--cw-sc-h, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: 600;
    color: var(--cw-text);
}

/* x-axis labels are positioned from the TOP relative to the plot height, so the
   legend / detail (which flow below the plot) never push them out of place */
.cw-sc-tick { position: absolute; }
.cw-sc-ymax { left: 0; width: 40px; text-align: right; top: 2px; }
.cw-sc-ymin { left: 0; width: 40px; text-align: right; top: calc(6px + var(--cw-sc-h, 300px) - 9px); }
.cw-sc-xmin { left: 46px; top: calc(6px + var(--cw-sc-h, 300px) + 6px); }
.cw-sc-xmax { right: 14px; top: calc(6px + var(--cw-sc-h, 300px) + 6px); }
.cw-sc-xtitle {
    position: absolute;
    left: 46px;
    right: 14px;
    top: calc(6px + var(--cw-sc-h, 300px) + 22px);
    text-align: center;
    font-weight: 600;
    color: var(--cw-text);
}

/* --- detail panel sits below the plot inside the inner mount; the extra top
   margin leaves a band under the axis for the x-axis labels --- */

.cw-sc-inner .cw-detail { margin-top: 46px; }

.cw-sc-coords {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--cw-muted);
}
.cw-sc-coords strong { color: var(--cw-text); }

.cw-sc-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    vertical-align: middle;
    color: var(--cw-sc-bc, var(--cw-accent));
    background: color-mix(in srgb, var(--cw-sc-bc, var(--cw-accent)) 16%, transparent);
}

/* --- legend --- */

.cw-sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    font-size: 0.76rem;
    color: var(--cw-muted);
}
.cw-sc-legend-item { display: flex; align-items: center; gap: 6px; }
.cw-sc-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }