/* VM branding adapter for the shared ensemble components. Kept self-hosted. */
[data-vm-trend] {
    --rhmz-card-bg: var(--vm-card-bg, #fff);
    --rhmz-detail-bg: var(--vm-bg-secondary, #f1f5f9);
    --rhmz-card-border: var(--vm-border-color, #cbd5e1);
    --rhmz-text-primary: var(--vm-text-primary, #0f172a);
    --rhmz-text-secondary: var(--vm-text-secondary, #475569);
}
[data-vm-trend] .vp-ensemble-heatmap,
[data-vm-trend] .vp-eh { --vp-eh-accent: #347cbb; }
/* Blocksy's header rule [data-row] { display: flex } also matches the matrix
   coordinate attributes. Keep semantic cells in table layout at every width. */
[data-vm-trend] .vp-eh__table td[data-row] { display: table-cell; }
/* Chart.js measures its parent. Keep titles/controls outside this fixed-height
   canvas-only frame so the bitmap and displayed aspect ratios remain equal. */
[data-vm-trend] .vm-trend-chart-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 400px;
}
[data-vm-trend] .vm-trend-chart-wrap > canvas {
    display: block;
    /* Override legacy .vm-trend-chart-card canvas pixel heights, including UCSS. */
    width: 100% !important;
    height: 100% !important;
}
@media (max-width: 768px) {
    [data-vm-trend] .vm-trend-chart-wrap { height: 300px; }
}
@media (max-width: 480px) {
    [data-vm-trend] .vm-trend-chart-wrap { height: 260px; }
}
[data-vm-trend] .vm-trend-is-today,
[data-vm-trend] [aria-current="date"] {
    outline: 2px solid var(--vm-accent, #347cbb);
    outline-offset: -2px;
}
.vm-trend-matrix-intro { color: var(--vm-text-secondary); font-size: .85rem; line-height: 1.6; }
.vm-trend-model-health { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.vm-trend-model-health__item {
    display: grid; gap: .25rem; flex: 1 1 180px;
    border: 1px solid var(--vm-border-color); border-radius: 10px;
    padding: .65rem .8rem; background: var(--vm-card-bg);
    color: var(--vm-text-secondary); font-size: .75rem;
}
.vm-trend-model-health__item strong { color: var(--vm-text-primary); font-size: .8rem; }
.vm-trend-partial-note { padding: .75rem 1rem; border: 1px solid var(--vm-border-color); border-radius: 10px; color: var(--vm-text-secondary); background: var(--vm-bg-secondary); font-size: .85rem; }
.vm-trend-ec-badge--partial, .vm-trend-day-card__conf--partial { color: var(--vm-text-muted); background: var(--vm-bg-secondary); }
.vm-trend-ec-row--missing { color: var(--vm-text-muted); }
[data-vm-trend] [hidden] { display: none !important; }
@media (max-width: 375px) {
    [data-vm-trend] .vm-trend-chart-card { padding: .8rem; min-width: 0; }
}
@media (forced-colors: active) {
    [data-vm-trend] .vm-trend-is-today,
    [data-vm-trend] [aria-current="date"] { outline-color: Highlight; }
    .vm-trend-model-health__item { border-color: CanvasText; }
}