/* Science. Reuses visit.css (hero, jump bar, sources) and wildlife.css (photo + text blocks);
   adds the two NOAA charts, their table twins, and the stat tile. */

.chart-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.1rem .9rem; margin: 1.25rem 0; }
@media (min-width: 768px) { .chart-card { padding: 1.5rem 1.5rem 1.1rem; } }
.chart-card h3 { margin: 0 0 .25rem; font-size: 1.125rem; font-weight: 800; color: var(--marsh-950); }
.chart-card .chart-sub { margin: 0 0 .75rem; font-size: .9375rem; color: var(--ink-mid); }
.chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .grid.zero { stroke: #b9ae94; }
.chart .axis { font: 600 11px var(--font-label); fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chart .dot-label { font: 700 12px var(--font-body); fill: var(--ink); }

/* King tides: teal is reserved for king tides site-wide */
.chart .threshold { stroke: var(--king); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .stem { stroke: var(--king); stroke-opacity: .35; stroke-width: 2; }
.chart .dot { fill: var(--king); stroke: #fff; stroke-width: 2; }
.chart .hit { fill: transparent; cursor: pointer; outline: none; }
.chart .hit:focus-visible { stroke: var(--accent); stroke-width: 2; }

/* Sea level */
.chart .sl-line { fill: none; stroke: var(--marsh-500); stroke-width: 2; stroke-linejoin: round; }
.chart .sl-trend { fill: none; stroke: var(--marsh-950); stroke-width: 2; }
.chart .sl-end { fill: var(--marsh-500); stroke: #fff; stroke-width: 2; }
.chart .crosshair { stroke: var(--ink-soft); stroke-width: 1; }
.chart .hover-zone { fill: transparent; }

.chart-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .5rem 0 0; font-size: .875rem; color: var(--ink-mid); }
.chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.chart-legend .lg-line { border-color: var(--marsh-500); }
.chart-legend .lg-trend { border-color: var(--marsh-950); }
.chart-legend .lg-threshold { border-top: 2px dashed var(--king); }
.chart-legend .lg-dot { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--king); }

.chart-tip { position: absolute; z-index: 60; pointer-events: none; background: var(--marsh-950); color: #fff; font-size: .875rem; line-height: 1.4; padding: .45rem .6rem; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.2); max-width: 15rem; }

/* Table twins */
.table-view { margin-top: .75rem; }
.table-view summary { cursor: pointer; font-family: var(--font-label); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--marsh-700); }
.data-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.data-table th { text-align: left; font-family: var(--font-label); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: .45rem .5rem .45rem 0; border-bottom: 2px solid var(--rule); }
.data-table td { padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--rule); }
.data-table .is-next td { background: var(--king-bg); }

/* Stat tile for the sea level trend (proportional figures on the big number) */
.stat-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 1rem; }
.stat-tile b { font-size: clamp(2.5rem, 10vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--marsh-950); line-height: 1; }
.stat-tile span { color: var(--ink-mid); font-size: 1rem; max-width: 26rem; }

.king-summary { margin: 0 0 .25rem; font-size: 1.0625rem; color: var(--ink); }
.king-summary strong { color: var(--king); }

.help-grid { display: grid; gap: 1rem; }
@media (min-width: 768px) { .help-grid { grid-template-columns: 1fr 1fr; } }
.help { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.help h3 { margin: 0 0 .4rem; font-size: 1.125rem; font-weight: 800; color: var(--marsh-950); display: flex; align-items: center; gap: .5rem; }
.help h3 .material-symbols-outlined { color: var(--marsh-500); }
.help p { margin: 0 0 .5rem; color: var(--ink-mid); font-size: .9375rem; line-height: 1.5; }
.help p:last-child { margin-bottom: 0; }