/* ── Trends layout ── */
.trends { max-width:1100px; margin:0 auto; padding:20px 24px 48px; }
.trends-intro { font-size:12px; color:var(--text-2); margin-bottom:16px; line-height:1.5; }

/* ── Chart panels ── */
.trends-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.trends-full { grid-template-columns:1fr; }
.tr-pnl {
  background:var(--bg-1); border-radius:12px; padding:16px 20px;
  box-shadow:var(--card-shadow);
}
.tr-pnl-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.tr-pnl-title { font-size:11px; text-transform:uppercase; letter-spacing:.6px;
                 color:var(--text-3); font-weight:700; flex:1; }
.tr-chart { position:relative; height:200px; width:100%; }
.tr-chart-tall { height:260px; }
.tr-chart-auto { height:auto; min-height:100px; }

/* ── Range buttons ── */
.tr-range { display:flex; gap:2px; }
.tr-range-btn { font-size:11px; padding:2px 10px; border:none; border-radius:6px;
                background:transparent; color:var(--text-3); cursor:pointer;
                font-family:inherit; transition:background .12s, color .12s; }
.tr-range-btn:hover { background:var(--bg-hover); color:var(--text-1); }
.tr-range-btn.active { background:var(--bg-2); color:var(--text-0); }

/* ── CTI color bands ── */
.tr-cti-legend { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.tr-cti-leg { font-size:9px; display:flex; align-items:center; gap:4px; color:var(--text-3); }
.tr-cti-dot { width:8px; height:8px; border-radius:2px; }
.tr-cti-dot-green { background:var(--green); }
.tr-cti-dot-yellow { background:var(--yellow); }
.tr-cti-dot-orange { background:var(--orange); }
.tr-cti-dot-red { background:var(--red); }

/* ── Signal volume legend ── */
.tr-vol-legend { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.tr-vol-leg { font-size:9px; display:flex; align-items:center; gap:4px; color:var(--text-3); }
.tr-vol-dot { width:6px; height:6px; border-radius:50%; }

/* ── Campaign timeline ── */
.tr-camp-list { display:flex; flex-direction:column; gap:6px; }
.tr-camp-row { display:flex; align-items:center; gap:8px; font-size:11px; }
.tr-camp-name { width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                color:var(--text-1); font-weight:500; }
.tr-camp-bar-wrap { flex:1; height:12px; background:var(--bg-2); border-radius:4px;
                    position:relative; overflow:hidden; }
.tr-camp-bar { position:absolute; top:0; bottom:0; border-radius:4px; min-width:4px; }
.tr-camp-sev-HIGH { background:var(--red); opacity:.8; }
.tr-camp-sev-MODERATE { background:var(--orange); opacity:.8; }
.tr-camp-sev-LOW { background:var(--yellow); opacity:.8; }
.tr-camp-sev-default { background:var(--accent); opacity:.6; }
.tr-camp-meta { font-size:10px; color:var(--text-3); width:80px; text-align:right;
                white-space:nowrap; }
.tr-camp-empty { font-size:11px; color:var(--text-3); padding:12px 0; }

/* ── Milbase heatmap ── */
.tr-heatmap-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tr-heatmap { border-collapse:collapse; font-size:9px; width:100%; }
.tr-heatmap th { font-weight:600; color:var(--text-3); padding:3px 4px; text-align:center;
                 position:sticky; top:0; background:var(--bg-1); white-space:nowrap; }
.tr-heatmap td { padding:2px; text-align:center; }
.tr-heatmap .tr-hm-site { text-align:right; padding-right:6px; color:var(--text-2);
                           font-weight:500; white-space:nowrap; max-width:140px;
                           overflow:hidden; text-overflow:ellipsis; position:sticky; left:0;
                           background:var(--bg-1); }
.tr-hm-cell { width:14px; height:14px; border-radius:2px; margin:auto; }
.tr-hm-0 { background:var(--bg-2); }
.tr-hm-1 { background:var(--green); opacity:.6; }
.tr-hm-2 { background:var(--yellow); opacity:.7; }
.tr-hm-3 { background:var(--orange); opacity:.8; }
.tr-hm-4 { background:var(--red); opacity:.85; }
.tr-hm-legend { display:flex; gap:8px; margin-top:6px; align-items:center; }
.tr-hm-legend-item { font-size:9px; display:flex; align-items:center; gap:3px; color:var(--text-3); }
.tr-hm-legend-box { width:10px; height:10px; border-radius:2px; }

/* ── Empty state ── */
.tr-empty { text-align:center; padding:24px; color:var(--text-3); font-size:11px; }

/* ── Responsive ── */
@media (max-width:900px) {
  .trends-grid { grid-template-columns:1fr; }
  .tr-camp-name { width:120px; }
}
@media (max-width:500px) {
  .trends { padding:8px 10px 24px; }
  .tr-chart { height:160px; }
  .tr-camp-name { width:80px; font-size:10px; }
  .tr-camp-meta { width:60px; font-size:9px; }
}