/* Independent trend charts · SuperSystem Weather */
.trends{margin:5px 0 23px;scroll-margin-top:25px}
.trends-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 17px}
.trends-heading h2{font-size:clamp(24px,3vw,31px);font-weight:850;letter-spacing:-.055em;line-height:1.14;margin:7px 0 7px}
.trends-heading p{color:#849489;font-size:12px;margin:0}
.trend-period{color:#7da96d}
.trends-switch{display:flex;gap:5px;padding:5px;background:#e7eee4;border:1px solid #dce7d7;border-radius:13px}
.trends-switch button{min-width:91px;background:transparent;border:0;border-radius:9px;color:#768b7b;font-size:12px;font-weight:800;padding:9px 16px}
.trends-switch button.active{background:#21402e;color:#f0f7e8;box-shadow:0 4px 12px #294b3126}
.trends-switch button:not(.active):hover{background:#f8faf5}
.trends-interval{display:flex;gap:9px;align-items:center;min-height:32px;font-size:11px;color:#7e9082;font-weight:720;margin-bottom:9px;flex-wrap:wrap}
.trends-marker{display:grid;place-items:center;width:21px;height:21px;color:#538360;background:#e9f4e4;border-radius:7px;font-weight:900}
#trends-retry{border:1px solid #bbd7be;background:#eff6ea;color:#36583d;border-radius:8px;padding:5px 9px;font-size:11px;font-weight:750}
.trends-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.trend-card{min-width:0;background:#fffefa;border:1px solid #e2e9e1;border-radius:22px;box-shadow:0 10px 34px #263a270a;padding:23px 25px 18px;overflow:hidden}
.trend-card-wide{grid-column:1/-1;padding:25px 29px 19px}
.trend-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.trend-card-title{display:flex;gap:12px;align-items:center}
.trend-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:22px;flex:none}
.trend-orange{background:#fff0df;color:#e3a46b}.trend-amber{background:#fff4d6;color:#dba33f}.trend-blue{background:#e6f2fc;color:#649aca}
.trend-card h3{margin:0;font-size:16px;letter-spacing:-.037em;font-weight:850}.trend-card-head p{color:#8b9a8e;font-size:11px;margin:2px 0 0}
.trend-delta{padding:7px 11px;border-radius:10px;background:#edf4e9;border:1px solid #e0ebdb;min-height:36px;display:flex;align-items:center;gap:4px;font-size:13px;font-weight:850;color:#385f40;font-variant-numeric:tabular-nums}
.trend-delta[data-direction="up"]{background:#fdf1e3;border-color:#f5e4d1;color:#b57943}
.trend-delta[data-direction="down"]{background:#e9f4ef;border-color:#d7e9e0;color:#47836b}
.trend-delta[data-direction="flat"]{background:#f2f4ee;border-color:#e3e8de;color:#859487}
.trend-key{display:flex;align-items:center;gap:15px;justify-content:flex-end;margin:-2px 0 4px;color:#8b998e;font-weight:750;font-size:10px}
.trend-key span{display:flex;align-items:center;gap:6px}
.trend-swatch{display:block;width:17px;height:3px;border-radius:4px}.trend-max{background:#df9864}.trend-min{background:#659eb2}
.trend-chart{position:relative;width:100%;min-height:173px;touch-action:pan-y;overflow:hidden}
.trend-card-wide .trend-chart{min-height:215px}
.trend-chart svg{width:100%;height:auto;display:block;overflow:visible;cursor:crosshair;touch-action:pan-y}
.trend-chart svg:focus{outline:none}.trend-chart svg:focus-visible{outline:3px solid #9ecaa4;outline-offset:-3px;border-radius:8px}
.trend-message{height:170px;display:flex;align-items:center;justify-content:center;color:#8b9a8d;font-size:12px;text-align:center;padding:15px}
.trend-card-wide .trend-message{height:210px}
.trend-detail{border-top:1px solid #edf0e9;padding-top:12px;margin-top:3px;min-height:31px;font-size:11px;font-weight:700;line-height:1.55;color:#6b806f}
.trend-detail b{font-weight:850;color:#2e513a}.trend-detail .phase{display:inline-flex;margin-left:6px;font-size:10px;letter-spacing:.025em;color:#799083}
.trends-explainer{font-size:11px;line-height:1.6;color:#92a094;margin:12px 3px 0}
.trend-chart .axis-label{font-size:11px;fill:#91a195;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.trend-chart .axis-day{font-size:12px;fill:#889a8c;font-weight:720;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.trend-chart .axis-today{font-size:10px;fill:#6e8c73;font-weight:850}
@media(max-width:850px){.trends-grid{grid-template-columns:1fr}.trend-card-wide{grid-column:auto}.trend-card,.trend-card-wide{padding:20px 16px 16px}.trend-chart{min-height:155px}.trend-card-wide .trend-chart{min-height:170px}}
@media(max-width:580px){.trends-top{align-items:stretch}.trends-switch{width:100%}.trends-switch button{flex:1}.trend-card-head{flex-wrap:nowrap}.trend-card-title{gap:8px}.trend-icon{width:36px;height:36px;font-size:19px}.trend-card h3{font-size:15px}.trend-card-head p{font-size:10px}.trend-delta{font-size:12px;min-height:30px;padding:6px 7px}.trend-chart .axis-label{font-size:12px}}