/* Faktora.Charts — tooltip + drag-band styling. Link once in the host app:
   <link rel="stylesheet" href="_content/Inxton.Operon/faktora-charts.css" /> */

.fk-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 20;
    min-width: 120px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-background-modal);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.35;
}

.fk-tt-head {
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-text-light);
}

.fk-tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fk-tt-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.fk-tt-name {
    flex: 1 1 auto;
}

.fk-tt-val {
    font-weight: 700;
    margin-left: 12px;
}

.fk-band {
    position: absolute;
    top: 0;
    z-index: 15;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
}

.fk-svg text {
    user-select: none;
}

.fk-shape {
    transition: opacity .12s ease;
}

/* Smooth fade when hovering a legend item to highlight one series. */
.fk-svg [data-hl] {
    transition: opacity .12s ease;
}

/* A chip is a key, not a control: hovering it highlights its series, nothing more. */
.fk-legend-item {
    cursor: default;
    user-select: none;
}

.fk-shape.fk-hover {
    opacity: 0.82;
    cursor: pointer;
}

/* Control strip placement. It overlays the plot while there is room beside the centred title, and
   drops into flow above the plot on a narrow chart, where a six-button strip would sit on top of
   the title. Keyed to the chart's own width via a container query rather than the viewport: the
   app sidebar takes 256px, so a chart is only ~450px wide at a 768px viewport and a viewport
   breakpoint switches off exactly where the overlap still happens. */
.fk-chart {
    container-type: inline-size;
}

@container (width < 36rem) {
    .fk-chart-toolbar {
        position: static;
        justify-content: flex-end;
        margin-bottom: 0.25rem;
    }
}