/* ─────────────────────────────────── */
/* FEATURE: Insights                   */
/* ─────────────────────────────────── */

/* ─────────────────────────────────── */
/* BLOCK: Insight chart sheet          */
/* ─────────────────────────────────── */

.insight-chart-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.insight-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ─── Options area — wrapping pill row ─── */

.insight-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ─── About text ─── */

.insight-about {
    font-size: var(--font-sm);
    color: var(--color-grey-500);
    line-height: var(--line-height-normal);
}

/* ─── D3 SVG charts ─── */

.insight-chart-wrap svg {
    display: block;
    width: 100%;
    height: auto;
}

.insight-chart-wrap .node-label {
    font-size: var(--font-xs);
    fill: var(--color-text);
}

.insight-chart-wrap .quadrant-label {
    font-size: var(--font-sm);
    fill: var(--color-grey-400);
    font-weight: var(--weight-medium);
}

.insight-chart-wrap .x-axis-label,
.insight-chart-wrap .y-axis-label {
    font-size: var(--font-sm);
    fill: var(--color-text);
}

/* ─── Weight scale (priority matrix) ─── */

.insight-weight-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.insight-weight-label {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--color-grey-100);
    color: var(--color-grey-500);
}

.insight-weight-scale {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.insight-weight-step {
    font-size: var(--font-xs);
    font-weight: var(--weight-medium);
}

/* ─── Coming soon message ─── */

.insight-coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    font-size: var(--font-sm);
    color: var(--color-grey-400);
    text-align: center;
}



/* ─── Node labels — prevent text selection ─── */

.insight-chart-wrap .node-label {
    user-select: none;
    -webkit-user-select: none;
}

.insight-chart-wrap .edge-label {
    font-size: var(--font-xs);
    fill: var(--color-grey-400);
    user-select: none;
    -webkit-user-select: none;
}

/* ─── Leaflet map overrides ─── */

.insight-chart-wrap .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    z-index: 0;
}

.marker-cluster-custom {
    background: none !important;
}

.marker-cluster-blue {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-blue-light);
    border: 2px solid var(--color-blue);
    color: var(--color-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-family);
}