/* Caribe Radar: one visual system across weather, air, stations and cyclones. */
:root {
  --bg: #071214;
  --panel: #0b1d22;
  --line: #274148;
  --muted: #a4b9bd;
  --blue: #29bbbf;
  --amber: #f4b210;
}

body {
  background: radial-gradient(ellipse 80% 450px at 48% 0, #0d2b32 0, #071719 68%, #071214 100%) fixed;
  color: #f4f7f4;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header {
  background: #061417;
  border-bottom-color: #24434a;
  padding-block: 16px;
}

main { max-width: 1420px; padding-top: 23px; }
h1, h2, h3 { color: #f8faf7; font-family: Poppins, sans-serif; }
h1 { font-size: clamp(2rem, 3.35vw, 3.4rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.13; }
h2 { font-size: clamp(1.5rem, 2.15vw, 2.05rem); font-weight: 700; letter-spacing: -.035em; }
h3 { letter-spacing: -.025em; }
p { color: var(--muted); }

.eyebrow {
  color: #79c9c9;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}
.source-tag, .note { color: #a9bcc0; font-size: 12px; }
.badge { border-color: #356169; color: #bed9d9; letter-spacing: .06em; }
.demo-badge { border-color: #9a7732; color: #ffcf65; }

.site-tabs {
  gap: clamp(10px, 2.2vw, 30px);
  padding-bottom: 0;
  border-bottom: 1px solid #29454b;
  margin-bottom: 30px;
}
.site-tabs a {
  padding: 12px 2px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #b1c6c8;
  font-weight: 600;
}
.site-tabs a:hover { background: transparent; color: white; }
.site-tabs [aria-current] {
  color: #f4f7f4;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #f4b210;
  box-shadow: none;
}

.heading { margin-bottom: 24px; }
.location select, button { border-color: #345259; background: #0c2429; color: #f4f7f4; }
button:hover { border-color: #29bbbf; }
.location-hint:not(:empty) { color: #c4d6d6; font-size: 12px; line-height: 1.5; }

.brief, .cyclone-brief {
  background: linear-gradient(100deg, #103239 0, #0b242a 56%, #0a1b20 100%);
  border: 1px solid #42666a;
  border-left: 4px solid #f4b210;
  border-radius: 5px;
  padding: 19px 22px;
}
.brief strong { font-size: clamp(17px, 1.55vw, 22px); line-height: 1.35; letter-spacing: -.02em; }
.brief div>span { color: #c7d6d5; font-size: 13px; }
.brief-icon { color: #f4b210; }

.stats { gap: 12px; grid-template-columns: 1.18fr repeat(3, 1fr); }
.stat {
  background: #0b1d22;
  border-color: #29464b;
  border-radius: 5px;
  padding: 20px 21px 18px;
  box-shadow: none;
}
.stat:first-child { border-top: 3px solid #29bbbf; }
.stat:nth-child(2) { border-top: 3px solid #65b9d4; }
.stat:nth-child(3) { border-top: 3px solid #c8822a; }
.stat:nth-child(4) { border-top: 3px solid #f4b210; }
.stat-label { color: #bfd0d0; font-size: 12px; letter-spacing: .08em; font-weight: 650; }
.value { font-family: Poppins, sans-serif; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat p { color: #b5c8c8; font-size: 13px; }
.stat-bottom { border-top-color: #315056; color: #b8c8ca; font-size: 12px; }
.watch { font-family: Poppins, sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 650; line-height: 2.5; }

section { margin-top: 48px; }
.section-heading, .panel-heading, .panel-title { border-bottom: 1px solid #29464b; padding-bottom: 13px; margin-bottom: 18px; }
.section-heading h2, .panel-heading h2, .panel-title h2 { margin-bottom: 2px; }
.map-shell, .station-panel, .cyclone-panel, .s-panel, .two-columns section {
  border-color: #2b474d;
  border-radius: 5px;
  background: #0b1c20;
  box-shadow: none;
}
.map-toolbar { background: #0d2429; border-bottom-color: #315159; }
.map-toolbar button.active { background: #16464b; color: white; border-color: #338b90; }
.map-caption { background: #0a1b20; font-size: 12px; }
.station-watch { background: #0a1d21; border-color: #2c4b50; border-radius: 5px; }
.station-highlights article { background: #0c2528; border-radius: 3px; }
.station-highlights article>span { color: #b6cccb; font-size: 11px; }
.station-highlights article>small { font-size: 11px; }

.ai-panel { background: #0b1e22; border-color: #31545a; }
.ai-output { background: #0b1d21; border-left: 0; padding: 0; min-height: 0; }
.analysis-grid { gap: 0; border-top: 1px solid #355157; border-left: 1px solid #355157; }
.analysis-card {
  min-height: 0;
  background: #0d2529;
  border: 0;
  border-right: 1px solid #355157;
  border-bottom: 1px solid #355157;
  border-radius: 0;
  padding: 18px 21px;
}
.analysis-card:after { display: none; }
.analysis-card-head { margin-bottom: 7px; }
.analysis-card h3 { font-size: 16px; }
.analysis-card p { color: #d4e0df; font-size: 14px; line-height: 1.65; }
.analysis-action { background: #153039; }
.analysis-action .analysis-card-head h3 { color: #f5c455; }
.analysis-sources { border-top: 1px solid #315057; }

.hourly, .week { border-color: #2f4c52; border-radius: 4px; background: #0b1d22; }
.hour, .day { border-right-color: #2a4449; }
.hour:first-child { background: #113339; }
.hour strong, .day .temps { font-family: Poppins, sans-serif; font-variant-numeric: tabular-nums; }
.two-columns { gap: 14px; }
.two-columns section { padding: 24px; }
.s-context { border-color: #315057; background: #0c2227; }
.cyclone-overview article, .model-cards article, .hazard-grid article { border-radius: 4px; }
footer { border-top-color: #315057; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  main { padding: 19px 16px 0; }
  .site-tabs { margin-bottom: 24px; }
  .site-tabs a { padding: 10px 1px 12px; font-size: 13px; }
  .heading { gap: 18px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .eyebrow { font-size: 12px; letter-spacing: .09em; }
  .brief { padding: 16px 14px; }
  .stats { gap: 8px; }
  .stat { padding: 16px 13px; }
  .stat-label { font-size: 11px; letter-spacing: .02em; }
  .stat p { min-height: 0; font-size: 12px; }
  .stat-bottom { min-height: 0; font-size: 11px; }
  section { margin-top: 38px; }
  .section-heading { margin-bottom: 14px; }
  .analysis-grid { grid-template-columns: 1fr; }
  .analysis-card { padding: 16px; }
  .two-columns { gap: 12px; }
}