:root {
    --aurum-metal-chart-height: 380px;
}

/* Chart.js sizes the canvas from its container, which is otherwise height-less.
   Matching on the inline variable keeps this to charts that opted in. */
.fi-wi-chart-canvas-ctn:has(canvas[style*='--aurum-metal-chart-height']) {
    height: var(--aurum-metal-chart-height);
}

.aurum-metal-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    :root {
        --aurum-metal-chart-height: 320px;
    }

    .aurum-metal-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.aurum-metal-charts-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.aurum-metal-chart-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* The stat cards carry three description lines, so they need room to breathe. */
.aurum-stat-lines {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Currency totals are far wider than the old price/oz, so let them scale down. */
.fi-wi-stats-overview-stat-value {
    font-size: clamp(1rem, 2.2cqw + 0.55rem, 1.5rem);
    overflow-wrap: anywhere;
}

.aurum-stat-count {
    opacity: 0.7;
}

.aurum-stat-negative {
    color: var(--danger-600);
}

.dark .aurum-stat-negative {
    color: var(--danger-400);
}