/* Next-FVG marker beside the live BTC candle (fvg-arrow.js).
 *
 * A horizontal tag carrying a chevron, sitting on the live price line. It is
 * deliberately wider than tall and rounded: next to vertical candle bodies a
 * solid arrow with a stem read as one more candle, a capsule never does. */
.fvg-next-arrow {
    --fvg-up: #26a69a;
    --fvg-down: #ef5350;
    --fvg-up-tint: rgba(38, 166, 154, 0.22);
    --fvg-down-tint: rgba(239, 83, 80, 0.22);
    --fvg-up-ring: rgba(38, 166, 154, 0.70);
    --fvg-down-ring: rgba(239, 83, 80, 0.70);
    --fvg-dir: var(--fvg-up);
    --fvg-tint: var(--fvg-up-tint);
    --fvg-ring: var(--fvg-up-ring);
    position: absolute;
    display: none;
    box-sizing: border-box;
    width: 19px;
    height: 13px;
    border-radius: 999px;
    /* Above gap chips (50) and boundary labels (52), below tooltips. */
    z-index: 53;
    pointer-events: none;
    color: var(--fvg-dir);
    /* Opaque: the tint is laid over the chart colour, so candles and lines
       never show through and muddy the chevron. */
    background: linear-gradient(var(--fvg-tint), var(--fvg-tint)), var(--fvg-arrow-halo, #101820);
    /* Inner ring in the direction colour; outer ring in the chart colour
       cuts a clean gap between the tag and anything behind it. */
    box-shadow: inset 0 0 0 1px var(--fvg-ring), 0 0 0 1.5px var(--fvg-arrow-halo, #101820);
    transition: opacity 0.18s ease-out;
}

.fvg-next-arrow svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 5px;
    overflow: visible;
    transform: translate(-50%, -50%);
}

.fvg-next-arrow path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fvg-next-arrow.is-down {
    --fvg-dir: var(--fvg-down);
    --fvg-tint: var(--fvg-down-tint);
    --fvg-ring: var(--fvg-down-ring);
}

.fvg-next-arrow.is-down svg {
    transform: translate(-50%, -50%) rotate(180deg);
}

/* Both sides nearly equidistant: still shown, but visibly less certain. */
.fvg-next-arrow.is-close {
    opacity: 0.55;
}

/* The light theme needs the darker candle colours for contrast. */
html[data-theme="arctic"] .fvg-next-arrow {
    --fvg-up: #087f5b;
    --fvg-down: #c92a3d;
    --fvg-up-tint: rgba(8, 127, 91, 0.14);
    --fvg-down-tint: rgba(201, 42, 61, 0.12);
    --fvg-up-ring: rgba(8, 127, 91, 0.65);
    --fvg-down-ring: rgba(201, 42, 61, 0.65);
}

/* A gap chip or purple callout under the marker steps back while the overlap
   lasts, and returns as soon as price moves off it. */
.gap-strength-label.fvg-arrow-yield,
.gap-purple-label.fvg-arrow-yield {
    opacity: 0.22;
    transition: opacity 0.15s ease-out;
}

@media (max-width: 640px) {
    .fvg-next-arrow {
        width: 17px;
        height: 12px;
    }

    .fvg-next-arrow svg {
        width: 8px;
        height: 4.5px;
    }
}

.fvg-next-arrow-card {
    --fvg-card-up: #26a69a;
    --fvg-card-down: #ef5350;
    position: absolute;
    display: none;
    z-index: 57;
    min-width: 168px;
    max-width: 230px;
    padding: 7px 9px 6px;
    border-radius: 5px;
    background: var(--theme-surface, #1a2229);
    border: 1px solid var(--theme-border-subtle, #2a2e39);
    box-shadow: 0 6px 18px var(--theme-shadow, rgba(0, 0, 0, 0.38));
    color: var(--theme-text, #d4d8e1);
    font-family: var(--font-body);
    font-size: 11px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}

html[data-theme="arctic"] .fvg-next-arrow-card {
    --fvg-card-up: #087f5b;
    --fvg-card-down: #c92a3d;
}

.fnac-title {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.fnac-title.is-up {
    color: var(--fvg-card-up);
}

.fnac-title.is-down {
    color: var(--fvg-card-down);
}

.fnac-range {
    margin-top: 1px;
    font-family: var(--font-mono);
}

.fnac-row {
    color: var(--theme-text-secondary, #84878e);
}

.fnac-note {
    margin-top: 2px;
    white-space: normal;
}

.fnac-foot {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--theme-border-subtle, #2a2e39);
    color: var(--theme-text-muted, #61656e);
    font-size: 11px;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .fvg-next-arrow-card {
        font-size: 11.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fvg-next-arrow,
    .gap-strength-label.fvg-arrow-yield,
    .gap-purple-label.fvg-arrow-yield {
        transition: none;
    }
}