/* ============================================================
   ew-mini-chart.css — styles for the reusable EWMiniChart module.
   Load this on any page that uses ew-mini-chart.js. Uses ew-theme.css tokens.
   ============================================================ */

.ewmc-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.ewmc-mount {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ewmc-ov {
    position: absolute;
    top: 8px;
    z-index: 3;
    pointer-events: none;
}

.ewmc-ov-left {
    left: 10px;
    right: 62px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

/* legend row (top of the left overlay) — items laid out horizontally */
.ewmc-legend {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.ewmc-legend-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.ewmc-swatch {
    width: 14px;
    height: 8px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.ewmc-sw-eps {
    background: var(--chart-marker, #9389c5);
    opacity: .6;
}

.ewmc-sw-avwap {
    background: var(--chart-line, #4e2d9e);
    height: 3px;
    border-radius: 2px;
}

.ewmc-sw-pbv {
    background: linear-gradient(90deg, rgba(15,138,59,0.55) 0 50%, rgba(198,40,40,0.55) 50% 100%);
}

/* logo + ticker (below the legend) */
.ewmc-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ewmc-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff center/contain no-repeat;
    border: 1px solid var(--border);
    flex: 0 0 auto;
}

.ewmc-ticker {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
    text-shadow: 0 1px 2px var(--surface, rgba(255, 255, 255, 0.6));
}

.ewmc-loading,
.ewmc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: .85rem;
}