/* Manifest Charts */

@layer base, components, utilities;

:root {
    /* Chart guidance */
    --color-chart-grid: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
    --color-chart-label: var(--color-content-subtle, oklch(55.6% 0 0));

    /* Heatmap ramp — single-hue sequential scale derived from --color-chart-1,
       spanning a pale tint to a deep, saturated shade so values stay legible
       even when the brand color itself is light. */
    --color-chart-heat-low: oklch(from var(--color-chart-1) 0.95 calc(c * 0.3) h);
    --color-chart-heat-high: oklch(from var(--color-chart-1) 0.55 calc(c * 1.15) h);

    /* Chart data segments */
    --color-chart-1: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
    --color-chart-2: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
    --color-chart-3: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
    --color-chart-4: var(--color-amber-400, oklch(82.8% 0.189 84.429));
    --color-chart-5: var(--color-amber-500, oklch(76.9% 0.188 70.08));
    --color-chart-6: var(--color-amber-600, oklch(66.6% 0.179 58.318));
    --color-chart-7: var(--color-orange-400, oklch(75% 0.183 55.934));
    --color-chart-8: var(--color-orange-500, oklch(70.5% 0.213 47.604));
    --color-chart-9: var(--color-orange-600, oklch(64.6% 0.222 41.116));
}

@layer utilities {

    :where([x-chart], .chart):not(.unstyle) {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        width: 100%;
        position: relative;

        & svg {
            display: block;
            width: 100%;
            overflow: visible
        }

        /* Grid lines */
        & svg line {
            stroke: var(--color-chart-grid);
            stroke-width: 1;
            shape-rendering: crispEdges
        }

        /* Axis labels */
        & svg text {
            fill: var(--color-chart-label);
            font-size: 0.6875rem;
            font-family: inherit
        }

        /* Line series */
        & path.line {
            stroke: var(--color-chart-color, var(--color-chart-1));
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        /* Area series */
        & path.area {
            fill: var(--color-chart-color, var(--color-chart-1));
            opacity: 0.15
        }

        /* Points */
        & circle {
            fill: var(--color-chart-color, var(--color-chart-1));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 1.5;
            transition: r var(--transition-duration, .1s) ease;

            &:not(.map-point):hover {
                r: 5
            }
        }

        & circle.scatter {
            opacity: 0.85
        }

        /* Bars */
        & rect {
            fill: var(--color-chart-color, var(--color-chart-1));
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* Candlesticks — wick <line> + body <rect> in a positive/negative <g> */
        & g.positive,
        & g.negative {
            & line {
                stroke: var(--color-chart-candle);
                stroke-width: 1.5
            }

            & rect {
                fill: var(--color-chart-candle)
            }
        }

        & g.positive {
            --color-chart-candle: var(--color-positive-content, oklch(60% 0.13 150))
        }

        & g.negative {
            --color-chart-candle: var(--color-negative-content, oklch(60% 0.18 25))
        }

        /* Pie / donut slices */
        & path.slice {
            fill: var(--color-chart-color, var(--color-chart-1));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 2;
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.85
            }
        }

        /* Gauge — track band + value arc */
        & path.gauge-track {
            fill: var(--color-chart-color, var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)))
        }

        & path.gauge-value {
            fill: var(--color-chart-color, var(--color-chart-1))
        }

        /* Gauge centered readout */
        & text.gauge-label {
            fill: var(--color-content-stark, oklch(20.5% 0 0));
            font-size: 1.75rem;
            font-weight: 700;
            pointer-events: none
        }

        /* Timeline / Gantt */
        & rect.gantt-segment {
            fill: var(--color-chart-color, var(--color-chart-1));
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        & rect.gantt-point {
            fill: var(--color-chart-color, var(--color-content-stark, oklch(20.5% 0 0)))
        }

        & text.gantt-track {
            fill: var(--color-chart-label);
            font-size: 0.75rem
        }

        /* Reference marker */
        & line.gantt-marker {
            stroke: var(--color-chart-color, var(--color-content-subtle, oklch(55.6% 0 0)));
            stroke-width: 1.5;
            stroke-dasharray: 3 3
        }

        & text.gantt-marker-label {
            fill: var(--color-chart-color, var(--color-content-subtle, oklch(55.6% 0 0)));
            font-size: 0.625rem
        }

        /* Value labels drawn on/above segments */
        & text.value {
            fill: var(--color-content-stark, oklch(20.5% 0 0));
            font-size: 0.6875rem;
            font-weight: 600;
            pointer-events: none;

            /* On a filled segment (bar/slice center) — read against the fill */
            &.inverse {
                fill: var(--color-content-stark, oklch(20.5% 0 0));
                paint-order: stroke;
                stroke: color-mix(in oklch, var(--color-page, oklch(98.5% 0 0)) 75%, transparent);
                stroke-width: 1.5px
            }
        }

        /* World map city / point markers */
        & circle.map-point {
            fill: var(--color-chart-color, var(--color-accent-content, oklch(20.5% 0 0)));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 1;
            fill-opacity: 0.82;
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* World map regions */
        & path.map-region {
            fill: var(--color-chart-color, var(--color-surface-2, color-mix(in oklch, oklch(20.5% 0 0) 8%, transparent)));
            stroke: var(--color-page, oklch(98.5% 0 0));
            stroke-width: 0.4;
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* Heatmap cell */
        & rect.heat-cell {
            fill: color-mix(in oklch, var(--color-chart-heat-high, var(--color-chart-1)) var(--heat, 0%), var(--color-chart-heat-low, var(--color-surface-2)));
            transition: opacity var(--transition-duration, .1s) ease;

            &:hover {
                opacity: 0.82
            }
        }

        /* Legend */
        & footer {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: center;
            gap: 0.875rem;
            margin-top: 0.5rem;
            font-size: 0.75rem;
            color: var(--color-content-neutral, oklch(43.9% 0 0));

            &>span {
                display: inline-flex;
                align-items: center;
                gap: 0.375rem
            }

            & i {
                width: 0.625rem;
                height: 0.625rem;
                border-radius: 2px;
                background: var(--color-chart-color, var(--color-chart-1))
            }
        }

        /* Heatmap gradient legend */
        & footer.heat-legend {
            flex-wrap: nowrap;
            gap: 0.5rem;

            & i {
                flex: 1;
                height: 0.5rem;
                border-radius: 1rem;
                background: linear-gradient(to right, var(--color-chart-heat-low, var(--color-surface-2)), var(--color-chart-heat-high, var(--color-chart-1)))
            }
        }

        /* Cursor-following tooltip */
        & .tooltip {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 50;
            transform: translate(-50%, calc(-100% - 0.625rem));
            font-size: 0.75rem;
            line-height: 1.3;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity .1s ease;

            &.active {
                opacity: 1
            }
        }

        /* Empty / error state */
        &>small,
        label {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 6rem;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--color-content-subtle, oklch(55.6% 0 0))
        }
    }
}