/* File path: frontend/css/milestones/ver25a-weather.css
   Version: VER25a (updated)
   What changed in this update:
   - Keep previous Weather fixes (single border, pills, coloured lines).
   - Add classic chart wrappers & typography.
*/

/* ---- previous rules from VER25a (kept) ---- */
#weather.section{
  border:1px solid var(--rule);
  border-radius:var(--radius-12);
  background:var(--card);
  padding:var(--gap-16);
}
#weather.section > section.section{ border:none !important; background:transparent !important; padding:0 !important }
#weather.section .card{ border:none !important; background:transparent !important; box-shadow:none !important; padding:0 }

/*
#weather.section .pillbar{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
#weather.section .pill{
  appearance:none;
  border:1px solid var(--rule);
  background:#fff;
  color:#111827;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  line-height:1.2;
}
  */
/*#weather.section .pill:hover{ background:#F9FAFB }*/
#weather.section .chart{ position:relative; border:1px solid var(--rule); border-radius:8px; background:#fff; overflow:visible }
#weather.section .chart-hdr{ display:flex; justify-content:space-between; align-items:center; padding:6px 10px 0 10px }
#weather.section .chart-title{ font-size:14px; color:#374151 }
#weather.section .chart svg path.line-temp{ stroke:#5BA4CF; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke }
#weather.section .chart svg path.line-sun { stroke:#A78BFA; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke }
#weather.section .chart svg path.line-dew { stroke:#60A5FA; stroke-width:1.5; fill:none; vector-effect:non-scaling-stroke }
#weather.section .chart svg .grid line,
#weather.section .chart svg .grid path{ stroke:#E5E7EB; stroke-opacity:.35 }
#weather.section .chart svg .axis text{ fill:#6B7280; font-size:11px }
#weather.section .chart-tip{
  position:absolute; top:-36px; right:0;
  background:#fff; color:#111827; font-size:12px;
  padding:4px 8px; border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 2px 4px rgba(0,0,0,.06); white-space:nowrap;
}
#weather.section .chart-tip::after{
  content:""; position:absolute; bottom:-5px; right:12px;
  width:8px; height:8px; background:#fff;
  border-left:1px solid var(--rule); border-top:1px solid var(--rule);
  transform:rotate(45deg);
}

/* ---- Classic chart wrapper ---- */
#weather.section .classic-wrap{ margin-top:14px }
#weather.section .classic-title{
  font-size:16px;
  font-weight:500;
  color:#111827;
  margin:6px 0 8px 2px;
}
#weather.section .classic-card{
  border:1px solid var(--rule);
  border-radius:8px;
  background:#fff;
  padding:4px;
}
#weather.section .classic-caption{ margin-top:6px }