/* Wild Days warnings: the beach card and the /warnings/ page. Warning red and amber are used only for warnings. */
:root { --wdw-red: #b3261e; --wdw-amber: #c77700; }

/* the card */
.wdw .wdw-alert { display: flex; gap: 10px; align-items: flex-start; background: #fbeceb; color: #5e1410; border-radius: var(--r-s, 10px); padding: 12px; margin-bottom: 12px; }
.wdw .wdw-alert .i { color: var(--wdw-red); flex: none; margin-top: 2px; }
.wdw .wdw-ok { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; }
.wdw .wdw-ok .i { color: var(--teal-ink, #16776b); flex: none; margin-top: 3px; }
.wdw .wdw-note { color: var(--ink-2, #36506a); margin: 0 0 10px; }
.wdw .wdw-row { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.wdw .wdw-history .i { color: var(--muted, #677a8a); flex: none; margin-top: 3px; }
.wdw .wdw-h { font-size: .95rem; font-weight: 750; margin: 14px 0 8px; }
.wdw-grade { flex: none; display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: #8aa1b1; }
.wdw-grade.wdw-excellent { background: #16776b; }
.wdw-grade.wdw-good { background: #2eb5a4; color: #0f2e47; }
.wdw-grade.wdw-sufficient { background: #8aa1b1; }
.wdw-grade.wdw-poor { background: var(--wdw-amber); }
.wdw-caveat { margin: 12px 0 10px; }

/* lists (card and page) */
.wdw-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.wdw-list li { padding-left: 16px; position: relative; line-height: 1.4; }
.wdw-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2, #ccd); }
.wdw-list li.wdw-now::before { background: var(--wdw-red); }
.wdw-list li.wdw-recent::before { background: var(--wdw-amber); }
.wdw-list li.small::before { display: none; }
.wdw-red { color: var(--wdw-red); font-weight: 700; }

/* freshness: a dot that pulses while the data is live, amber when delayed, red when out of date */
.wdw-fresh { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 0 14px; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--card, #fff); box-shadow: var(--shadow-s); font-size: .95rem; }
.wdw-fresh .wdw-state { font-weight: 800; color: var(--teal-ink, #16776b); }
.wdw-fresh .wdw-ago { font-weight: 650; }
.wdw-fresh .wdw-meta { color: var(--muted, #677a8a); font-size: .85rem; }
.wdw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--teal, #2eb5a4); box-shadow: 0 0 0 0 rgba(46, 181, 164, .6); animation: wdw-pulse 2s infinite; flex: none; }
.wdw-fresh-note { display: inline-flex; align-items: center; gap: 5px; }
.wdw-fresh-note .wdw-dot { width: 8px; height: 8px; }
.wdw-fresh-note .wdw-state { color: var(--teal-ink, #16776b); font-weight: 800; }
[data-state="delayed"] .wdw-dot { background: var(--wdw-amber); animation: none; }
[data-state="delayed"] .wdw-state { color: var(--wdw-amber); }
[data-state="old"] .wdw-dot { background: var(--wdw-red); animation: none; }
[data-state="old"] .wdw-state { color: var(--wdw-red); }
@keyframes wdw-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 181, 164, .6); } 70% { box-shadow: 0 0 0 8px rgba(46, 181, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 181, 164, 0); } }
@media (prefers-reduced-motion: reduce) { .wdw-dot { animation: none; } }

/* the page */
.wdw-page .band .wrap { padding-top: 22px; padding-bottom: 22px; }
.wdw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 8px; }
.wdw-stat { background: var(--card, #fff); border-radius: var(--r, 14px); box-shadow: var(--shadow-s); padding: 12px 14px; }
.wdw-stat strong { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.wdw-stat span { font-size: .82rem; color: var(--muted, #677a8a); }
.wdw-s-warn strong, .wdw-s-now strong { color: var(--wdw-red); }
.wdw-s-recent strong { color: var(--wdw-amber); }
.wdw-s-off strong { font-size: 1.15rem; padding: 4px 0 3px; color: var(--ink-2, #36506a); }
@media (min-width: 760px) { .wdw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wdw-layers { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.wdw-layers .chip { display: inline-flex; align-items: center; gap: 6px; }
.wdw-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.wdw-k-warn { border: 2px solid var(--wdw-red); width: 12px; height: 12px; box-sizing: border-box; }
.wdw-k-now { background: var(--wdw-red); }
.wdw-k-recent { background: var(--wdw-amber); }
.wdw-k-grade { background: #2eb5a4; }
.wdw-k-zone { width: 16px; border-radius: 6px; background: linear-gradient(90deg, rgba(199,119,0,.35), rgba(179,38,30,.75)); }
.wdw .wdw-down { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--r-s, 10px); background: #fdf3e6; }
.wdw .wdw-down .i { flex: none; margin-top: 3px; color: var(--wdw-amber); }
.wdw .wdw-down-now { background: #fbeceb; }
.wdw .wdw-down-now .i { color: var(--wdw-red); }
.wdw-map { height: min(68vh, 620px); min-height: 360px; border-radius: var(--r-l, 20px); overflow: hidden; box-shadow: var(--shadow-s); }
.wdw-section { margin: 28px 0; }
.wdw-section.prose { max-width: 760px; }
.wdw-section.prose h2 { margin-top: 1.4em; }