.trend-controls form {
    display: grid;
    grid-template-columns: minmax(140px, 0.7fr) minmax(160px, 1fr)
        minmax(160px, 1fr) auto auto;
    gap: 12px;
    align-items: end;
}

.trend-controls form > label,
.trend-ranges {
    display: grid;
    gap: 5px;
    margin: 0;
}

.trend-ranges {
    grid-auto-flow: column;
    justify-content: start;
    border: 0;
    padding: 0;
}

.trend-ranges legend { margin-bottom: 5px; font-weight: 700; }
.trend-ranges label { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.trend-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 14px; }
.trend-summary p { margin: 0; }
.trend-charts { display: grid; gap: 16px; }
.trend-panel { min-width: 0; }
.trend-chart { width: 100%; min-height: 220px; overflow: hidden; }
.trend-chart svg { display: block; width: 100%; height: auto; min-height: 220px; }
.trend-grid { stroke: #cbd5e1; stroke-width: 1; }
.trend-line { fill: none; stroke: #c65312; stroke-width: 2.5; stroke-linejoin: round; }
.trend-point { fill: #ffffff; stroke: #0f172a; stroke-width: 2; }
.trend-point:focus { outline: none; stroke: #2563eb; stroke-width: 5; }
.trend-axis-label { fill: #475569; font-size: 11px; }
.trend-disclosure { color: var(--muted); font-size: 13px; }
.trend-data-table { margin-top: 12px; }
.trend-data-table summary { cursor: pointer; font-weight: 700; }

@media (max-width: 900px) {
    .trend-controls form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trend-ranges { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .trend-controls form { grid-template-columns: 1fr; }
    .trend-ranges { grid-column: auto; grid-auto-flow: row; }
    .trend-chart { min-height: 180px; }
    .trend-chart svg { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .trend-line, .trend-point { transition: none; animation: none; }
}