@charset "UTF-8";

/* ─── Live conditions components (shared by landing, chapters, /conditions/) ─
   Numerals and units use --font-data (Space Mono); everything else stays in
   the site faces. Colors come from tokens.css. ───────────────────────────── */

.lv-num { font-family: var(--font-data); font-size: 0.94em; letter-spacing: -0.01em; white-space: nowrap; }
.lv-muted { color: color-mix(in srgb, currentColor 62%, transparent); font-size: 0.9rem; }
.lv-source { font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.02em; color: color-mix(in srgb, currentColor 55%, transparent); margin-top: 0.6rem; }
.lv-source a { color: inherit; }
.lv-eyebrow { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); margin: 0 0 0.15rem; }
.lv-lede { font-size: 1rem; margin-bottom: 0.6rem; }
.lv-detail { font-size: 0.92rem; margin-top: 0.75rem; color: color-mix(in srgb, currentColor 80%, transparent); }
.lv-headline { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; margin: 0 0 0.75rem; }
.lv-headline--warn { color: var(--alert-severe); }

/* badges + chips */
.lv-badge { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-data); font-size: 0.7rem; padding: 0.15em 0.55em; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.lv-badge--ok { background: color-mix(in srgb, var(--ok-green) 16%, transparent); color: var(--ok-green); }
.lv-badge--severe { background: color-mix(in srgb, var(--alert-severe) 16%, transparent); color: var(--alert-severe); }
.lv-chips { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lv-chip { display: inline-block; font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.04em; padding: 0.2em 0.6em; border-radius: 3px; border: 1px solid currentColor; }
.lv-chip--extreme, .lv-chip--severe { color: var(--alert-severe); }
.lv-chip--moderate { color: var(--alert-moderate); }
.lv-chip--minor { color: var(--alert-minor); }
.lv-chip--info { color: var(--reef-teal); }

/* volcano color codes */
.lv-vol { display: inline-block; flex: 0 0 auto; width: 0.75em; height: 0.75em; border-radius: 50%; margin-right: 0.4em; vertical-align: -0.02em; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 15%, transparent); }
.lv-vol--green { background: #2E7D4F; }
.lv-vol--yellow { background: #E8C33C; }
.lv-vol--orange { background: #E07B1B; }
.lv-vol--red { background: #C13E3E; }

/* ─── Alerts ────────────────────────────────────────────────────────────── */
.lv-alerts { display: grid; gap: 0.5rem; }
.lv-alert { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid; font-size: 0.92rem; line-height: 1.45; background: var(--card); }
.lv-alert summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; cursor: pointer; list-style: none; width: 100%; }
.lv-alert summary::-webkit-details-marker { display: none; }
.lv-alert__dot { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; margin-top: 0.15rem; }
.lv-alert__event { font-weight: 700; }
.lv-alert__meta { font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.03em; opacity: 0.75; }
.lv-alert__body { padding: 0.5rem 0 0.2rem 1.3rem; font-size: 0.88rem; color: var(--fg-default); }
.lv-alert__body p + p { margin-top: 0.4rem; }
.lv-alert--ok { border-color: color-mix(in srgb, var(--ok-green) 40%, transparent); color: var(--ok-green); }
.lv-alert--ok div { color: var(--fg-default); }
.lv-alert--extreme { border-color: var(--alert-extreme); color: var(--alert-extreme); }
.lv-alert--severe { border-color: color-mix(in srgb, var(--alert-severe) 60%, transparent); color: var(--alert-severe); }
.lv-alert--moderate { border-color: color-mix(in srgb, var(--alert-moderate) 60%, transparent); color: var(--alert-moderate); }
.lv-alert--minor { border-color: color-mix(in srgb, var(--alert-minor) 60%, transparent); color: #8a7420; }
.lv-alert div, .lv-alert div a { color: var(--fg-default); }
.lv-alert div a { text-decoration: underline; text-underline-offset: 0.15em; }
.lv-marine-note { margin-top: 0.2rem; }

/* ─── Instrument bar (landing) ──────────────────────────────────────────── */
.lv-bar { background: var(--ocean-deep); color: var(--pulu-white); border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.lv-bar:empty { min-height: 84px; }
.lv-bar__inner { max-width: var(--maxw-page); margin: 0 auto; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.lv-bar__inner::-webkit-scrollbar { display: none; }
.lv-bar__cell { flex: 1 0 auto; min-width: 112px; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.85rem 1rem; text-decoration: none; color: inherit; border-right: 1px solid rgba(255,255,255,0.10); transition: background 150ms ease; }
.lv-bar__cell:hover { background: rgba(255,255,255,0.06); }
.lv-bar__label { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--pulu-white) 60%, transparent); }
.lv-bar__value { font-size: 1.15rem; line-height: 1.2; color: var(--pulu-white); white-space: nowrap; }
.lv-bar__value .lv-num { font-size: 1.05rem; }
.lv-bar__sub { font-size: 0.74rem; color: color-mix(in srgb, var(--pulu-white) 72%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.lv-bar__stamp { flex: 1 0 auto; align-self: center; padding: 0.6rem 1rem; font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.04em; color: color-mix(in srgb, var(--pulu-white) 60%, transparent); text-align: right; }
.lv-bar__stamp a { color: var(--sun-gold); text-decoration: none; }
.lv-bar .lv-badge--severe { background: var(--hibiscus-red); color: var(--pulu-white); }
.lv-bar .lv-badge--ok { background: color-mix(in srgb, var(--ok-green) 60%, transparent); color: var(--pulu-white); }

/* ─── Station card ──────────────────────────────────────────────────────── */
.lv-station { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 1rem 1.1rem 1.1rem; }
.lv-station__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.lv-station__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; margin: 0; }
.lv-station__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem 1rem; }
.lv-cell { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lv-cell__label { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, currentColor 58%, transparent); }
.lv-cell__value { font-size: 1.15rem; line-height: 1.25; }
.lv-cell__sub { font-size: 0.78rem; color: color-mix(in srgb, currentColor 70%, transparent); }
.lv-station__chart { margin-top: 0.9rem; }
.lv-station--compact { padding: 0.85rem 0.95rem; }
.lv-station--compact .lv-station__name { font-size: 1.15rem; }
.lv-station--compact .lv-cell__value { font-size: 1rem; }
.lv-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.9rem; }

/* forecast periods */
.lv-periods { list-style: none; padding: 0; margin: 0.9rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; }
.lv-periods li { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.5rem 0.6rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: 0.8rem; }
.lv-periods__name { font-family: var(--font-data); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.lv-periods__temp { font-size: 1rem; }
.lv-periods__short { color: color-mix(in srgb, currentColor 72%, transparent); }

/* ─── Tide chart ────────────────────────────────────────────────────────── */
.lv-tide { width: 100%; height: auto; display: block; font-family: var(--font-data); }
.lv-tide__night { fill: color-mix(in srgb, var(--ocean-deep) 10%, transparent); }
.lv-tide__grid { stroke: color-mix(in srgb, currentColor 12%, transparent); stroke-width: 1; }
.lv-tide__tick { stroke: color-mix(in srgb, currentColor 35%, transparent); stroke-width: 1; }
.lv-tide__ylab, .lv-tide__xlab { font-size: 10px; fill: color-mix(in srgb, currentColor 60%, transparent); }
.lv-tide__area { fill: color-mix(in srgb, var(--reef-teal) 22%, transparent); }
.lv-tide__line { fill: none; stroke: var(--reef-teal); stroke-width: 2; stroke-linejoin: round; }
.lv-tide__pt { fill: var(--pulu-white); stroke: var(--ocean-deep); stroke-width: 1.5; }
.lv-tide__lab { font-size: 10px; fill: currentColor; }
.lv-tide__now { stroke: var(--hibiscus-red); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lv-tide__nowlab { font-size: 10px; fill: var(--hibiscus-red); }
.lv-tide--compact .lv-tide__lab { font-size: 11px; }

/* ─── Tables / lists ────────────────────────────────────────────────────── */
.lv-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.lv-table th, .lv-table td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rule); }
.lv-table th { font-family: var(--font-data); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.lv-table td .lv-num { font-size: 1rem; }
.lv-dl { margin: 0; display: grid; gap: 0.6rem; }
.lv-dl dt { font-family: var(--font-data); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.lv-dl dd { margin: 0.1rem 0 0; font-size: 0.92rem; line-height: 1.5; }
.lv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: 0.92rem; }
.lv-list li { padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); }
.lv-list li:last-child { border-bottom: 0; }
.lv-npsitem { display: grid; grid-template-columns: auto auto 1fr; gap: 0.2rem 0.6rem; align-items: center; }
.lv-npsitem__park { font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ocean-deep); }
.lv-npsitem strong { grid-column: 1 / -1; }
.lv-npsitem p { grid-column: 1 / -1; font-size: 0.85rem; color: color-mix(in srgb, currentColor 75%, transparent); }
.lv-volcanoes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.lv-volcano { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; }
.lv-volcano .lv-vol { margin-top: 0.35em; }
.lv-volcano p { font-size: 0.88rem; margin-top: 0.3rem; color: color-mix(in srgb, currentColor 80%, transparent); }

/* ─── Dark-surface variants (navy sections) ─────────────────────────────── */
.lv-on-dark { color: var(--pulu-white); }
.lv-on-dark .lv-station, .lv-on-dark .lv-alert { background: var(--card-dark); border-color: var(--rule-dark); }
.lv-on-dark .lv-alert div, .lv-on-dark .lv-alert__body { color: var(--pulu-white); }
.lv-on-dark .lv-tide__night { fill: rgba(255,255,255,0.05); }
.lv-on-dark .lv-tide__area { fill: color-mix(in srgb, var(--reef-teal) 40%, transparent); }
.lv-on-dark .lv-tide__line { stroke: #4fc3c9; }
.lv-on-dark .lv-tide__pt { fill: var(--ocean-deep); stroke: #4fc3c9; }
.lv-on-dark .lv-periods li, .lv-on-dark .lv-table th, .lv-on-dark .lv-table td, .lv-on-dark .lv-list li { border-color: var(--rule-dark); }
.lv-on-dark .lv-npsitem__park { color: var(--sun-gold); }

@media (max-width: 1280px) { .lv-bar__stamp { display: none; } }
@media (max-width: 640px) {
  .lv-bar__cell { min-width: 104px; padding: 0.7rem 0.8rem; }
  .lv-station__grid { grid-template-columns: repeat(2, 1fr); }
}