/* /trends — "Is it getting worse?", and the same four-chart block embedded on county pages.
   Light first, with a [data-theme="dark"] override, matching the main site rather than the
   dark-first /el-nino page. The SVG carries its own inline fills as a fallback; the classes here
   retint them so the charts survive the dark theme without the generator knowing about themes. */

.tr-page, .tr-block {
  --tr-ink:#12233d; --tr-muted:#53657d; --tr-faint:#7c8ca1;
  --tr-panel:#ffffff; --tr-bg:#f5f8fc; --tr-line:#dbe3ee;
  --tr-bar:#a9bcdd; --tr-bar-hi:#3b6fd4; --tr-roll:#0f2d66; --tr-axis:#64748b;
  --tr-up:#b4441f; --tr-down:#1b7a52; --tr-flat:#53657d;
}
[data-theme="dark"] .tr-page, [data-theme="dark"] .tr-block {
  --tr-ink:#e7eefa; --tr-muted:#a4b4cb; --tr-faint:#7d8fa8;
  --tr-panel:#11203a; --tr-bg:#0a1526; --tr-line:#22334f;
  --tr-bar:#425b83; --tr-bar-hi:#6fa0f0; --tr-roll:#c6dbff; --tr-axis:#93a5bd;
  --tr-up:#ff9166; --tr-down:#5fd3a1; --tr-flat:#a4b4cb;
}

.tr-page { background:var(--tr-bg); color:var(--tr-ink); }
main.tr { max-width:980px; margin:0 auto; padding-inline:clamp(16px,4vw,32px); padding-block:clamp(20px,4vw,40px); }
.tr h1, .tr h2, .tr h3 { margin:0; font-weight:800; letter-spacing:-.015em; line-height:1.12; text-wrap:balance; }
.tr h1 { font-size:clamp(2rem,5vw,3rem); }
.tr h2 { font-size:clamp(1.3rem,2.6vw,1.75rem); }
.tr h3 { font-size:1.05rem; }
.tr p { margin:0 0 .9rem; max-width:68ch; line-height:1.6; }
.tr a { color:inherit; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent); text-underline-offset:.16em; }
.tr a:hover { text-decoration-color:currentColor; }
.tr :focus-visible { outline:3px solid var(--tr-bar-hi); outline-offset:3px; border-radius:3px; }

/* ── hero ─────────────────────────────────────────────────────────── */
.tr-hero { margin-bottom:clamp(20px,3vw,32px); }
.tr-lede { font-size:1.15rem; color:var(--tr-muted); margin-top:.8rem; }
.tr-warning {
  border-left:4px solid var(--tr-bar-hi); background:var(--tr-panel);
  padding:.85rem 1rem; border-radius:0 8px 8px 0; font-size:.97rem; color:var(--tr-ink);
  max-width:68ch;
}
.tr-picker { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.2rem; font-size:.95rem; }
.tr-picker label { color:var(--tr-muted); }
.tr-picker select, .tr-picker button {
  font:inherit; padding:.45rem .7rem; border-radius:7px;
  border:1px solid var(--tr-line); background:var(--tr-panel); color:var(--tr-ink);
}
.tr-picker button { background:var(--tr-bar-hi); border-color:var(--tr-bar-hi); color:#fff; font-weight:650; cursor:pointer; }
.tr-picker-clear { color:var(--tr-muted); font-size:.9rem; }

/* ── a chart card ─────────────────────────────────────────────────── */
.tr-card {
  background:var(--tr-panel); border:1px solid var(--tr-line); border-radius:12px;
  padding:clamp(14px,2.5vw,22px); margin-bottom:clamp(16px,2.5vw,24px);
}
.tr-card-head { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline; margin-bottom:.7rem; }
.tr-coverage { color:var(--tr-faint); font-size:.85rem; margin:0; }
.tr-verdict { font-size:1.05rem; font-weight:650; margin-bottom:.8rem; }
.tr-verdict-up { color:var(--tr-up); }
.tr-verdict-down { color:var(--tr-down); }
.tr-verdict-flat, .tr-verdict-none { color:var(--tr-flat); }
.tr-working { font-size:.93rem; color:var(--tr-muted); margin-top:.8rem; }
.tr-caveat { font-size:.88rem; color:var(--tr-faint); line-height:1.55; margin-top:.6rem; }
.tr-caveat-absent { font-style:italic; }
.tr-companion { margin-top:1.2rem; padding-top:1.1rem; border-top:1px dashed var(--tr-line); }
.tr-companion h3 { margin-bottom:.5rem; }

.tr-missing ul, .tr-howto ul, .tr-sources ul { margin:.4rem 0 0; padding-left:1.1rem; }
.tr-missing li, .tr-howto li, .tr-sources li { margin-bottom:.5rem; line-height:1.55; max-width:68ch; }
.tr-howto h3 { margin-top:1.1rem; margin-bottom:.4rem; }
.tr-fine { font-size:.85rem; color:var(--tr-faint); margin-top:.8rem; }
.tr-empty { background:var(--tr-panel); border:1px solid var(--tr-line); border-radius:12px; padding:clamp(16px,3vw,26px); }
.tr-empty h2 { margin-bottom:.6rem; }

/* ── the charts ───────────────────────────────────────────────────── */
.tr-svg { width:100%; height:auto; display:block; }
.tr-svg .tr-bar { fill:var(--tr-bar); }
.tr-svg .tr-bar-hi { fill:var(--tr-bar-hi); }
.tr-svg .tr-roll { stroke:var(--tr-roll); }
.tr-svg .tr-ref { stroke:var(--tr-axis); }
.tr-svg .tr-tick { fill:var(--tr-axis); }

/* ── the block as embedded on a county page ───────────────────────── */
.tr-block { margin-top:1.5rem; }
.tr-block > h2 { font-size:1.3rem; margin-bottom:.3rem; }
.tr-block .tr-block-lede { color:var(--tr-muted); font-size:.95rem; margin-bottom:1rem; max-width:68ch; }
.tr-block .tr-card { background:transparent; border-color:var(--tr-line); }
.tr-block .tr-more { font-size:.93rem; }

@media (max-width:640px) {
  .tr-card-head { flex-direction:column; gap:.2rem; }
  .tr-picker select { flex:1 1 12rem; min-width:0; }
}