/* Corterra Sismos — application layer over the v2 design system.
   Cascade: tokens.css → components.css (both verbatim copies of docs/design-system, bundled into
   app.css) → this file. Only var(--…) values: what the brand book does not draw itself (the map
   and Leaflet, inputs, disclosures inside panels) plus two app tokens
   for the map height from docs/design-system/02-screens.md. */

:root {
  --map-height: 320px;
  --map-height-md: 380px;
}

/* ---------- Hidden: component display rules must not override the attribute ---------- */
.app [hidden] {
  display: none !important;
}

/* ---------- Seismograph ---------- */
.wave-station .station {
  font-size: var(--font-size-body);
  line-height: var(--line-height-ui);
}
.wave-latency-info {
  margin-bottom: var(--space-4);
}
.wave-plot .wave-canvas {
  border-radius: var(--radius-md);
}
.analysis .value strong.is-strong {
  color: var(--red);
}
.wave-settings-content {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}
.wave-channel {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.disclosure code {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  color: var(--ink);
}
.disclosure > div > * + * {
  margin-top: var(--space-2);
}
.disclosure ul {
  margin: 0;
  padding-left: var(--space-5);
}

/* ---------- Summary ---------- */
.big-event .meta .text-link {
  justify-self: start;
}
.panel > .info-block {
  margin-top: var(--space-5);
}
.summary-stats .stat-inline:empty {
  display: none;
}
/* Day trend beside the 24 h count: red up for more, green down for fewer. The chevron's shape and
   label carry the meaning too, so forced colours and colour-blind readers lose nothing. */
.stat-figure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.day-trend {
  display: inline-flex;
  flex: none;
}
.day-trend svg {
  stroke-width: 2.6;
}
.day-trend.is-up {
  color: var(--red);
}
.day-trend.is-down {
  color: var(--success);
}

/* ---------- Event list ---------- */
.list-caption [data-sources-down]:not(:empty) {
  color: var(--warning);
  font-weight: var(--weight-semibold);
}
.event-list .station-row .row-mag {
  font-size: var(--font-size-title);
  letter-spacing: 0;
}
.source-links a {
  color: var(--accent);
}
.event-expansion .source-links .text-link {
  min-height: var(--target-min);
}

/* ---------- Map ---------- */
.monitor-jumps,
.map-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.catalog-day {
  padding: var(--space-4) 0 var(--space-2);
  color: var(--muted);
}
.catalog-day h3 {
  font-size: var(--font-size-label);
  font-weight: var(--weight-semibold);
}
.catalog-count {
  color: var(--muted);
  font-size: var(--font-size-label);
  margin: var(--space-3) 0;
}
.map-station,
.map-reference {
  font-family: var(--font-sans);
  font-size: var(--font-size-label);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  white-space: nowrap;
}
.map-reference {
  font-size: var(--font-size-title);
  font-weight: var(--weight-bold);
  color: var(--accent);
}
.maplibregl-ctrl-group button {
  width: var(--target-min);
  height: var(--target-min);
}
.maplibregl-ctrl,
.maplibregl-ctrl-attrib {
  font-family: var(--font-sans);
  font-size: var(--font-size-caption);
}
.maplibregl-ctrl-group {
  background: var(--surface);
}
.maplibregl-ctrl-group button {
  color: var(--ink);
}
.maplibregl-ctrl-group button span {
  filter: none;
}
:root[data-theme='dark'] .maplibregl-ctrl-icon {
  filter: invert(1);
}
.map-state {
  font-size: var(--font-size-label);
}
#map-section {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--font-size-label);
  color: var(--muted);
}
#map {
  height: var(--map-height);
  border-radius: var(--radius-lg);
  background: var(--soft);
  overflow: hidden;
}
@container app (min-width: 48em) {
  #map {
    height: var(--map-height-md);
  }
}
.leaflet-container {
  font-family: var(--font-sans) !important;
  background: var(--soft) !important;
}
.leaflet-tile-pane {
  filter: grayscale(0.8) contrast(0.92);
}
:root[data-theme='dark'] .leaflet-tile-pane {
  filter: grayscale(1) invert(1) contrast(0.82) brightness(0.88);
}
.leaflet-control-attribution {
  font-size: var(--font-size-caption) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}
.leaflet-control-attribution a {
  color: var(--accent) !important;
}
.leaflet-bar a {
  width: var(--control-height-md) !important;
  height: var(--control-height-md) !important;
  line-height: var(--control-height-md) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-tooltip {
  font-size: var(--font-size-label) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-1) !important;
}
.leaflet-tooltip::before {
  border-top-color: var(--line) !important;
}

/* ---------- Forms ---------- */
.input {
  width: 100%;
  min-height: var(--control-height-lg);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line-strong);
  color: var(--ink);
  font: inherit;
  line-height: var(--line-height-ui);
}
.input:hover {
  box-shadow: inset 0 0 0 var(--border-hairline) var(--ink);
}
.input:disabled {
  background: var(--soft);
  color: var(--muted);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line);
  cursor: not-allowed;
}
.button-danger {
  color: var(--red);
}
.button-ghost.button-danger:hover {
  background: var(--accent-soft);
}
.card-body > h3 {
  font-size: var(--font-size-body);
  line-height: var(--line-height-ui);
  font-weight: var(--weight-semibold);
}
.place-row svg:last-child {
  color: var(--muted);
}
.place-row[aria-current='true'] svg:last-child {
  color: var(--accent);
}
.sheet-body > .help,
.sheet-body > p {
  font-size: var(--font-size-label);
  line-height: var(--line-height-ui);
  color: var(--muted);
}
.place-options {
  display: grid;
}
.place-options .place-row + .place-row {
  border-top: var(--border-hairline) solid var(--line);
}

/* The switch's input covers its target; the drawn track must not take its clicks. */
.switch .track {
  pointer-events: none;
}

/* ---------- Messages ---------- */
.error-note {
  font-size: var(--font-size-label);
  line-height: var(--line-height-ui);
  color: var(--red);
}
.site-footer a:not(.emergency) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* ---------- Keyboard over a field: the bottom navigation steps aside (< 768) ---------- */
@container app (max-width: 47.99em) {
  html[data-keyboard] .site-nav {
    display: none;
  }
}

/* ---------- Accessibility media for the app-only parts ---------- */
@media (forced-colors: active) {
  .input {
    border: 1px solid CanvasText;
  }
}

.source-checks {
  margin-block: var(--space-3);
}

.map-reference,
.map-station {
  pointer-events: none;
}

/* Official editorial reports remain separate from measured/catalog events. */
.official-bulletins {
  margin-block: var(--space-6, 24px);
}
.official-bulletins summary {
  overflow-wrap: anywhere;
}
.bulletin-count {
  margin-inline-start: 0.5em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bulletin-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.bulletin-list li {
  padding-block: 18px;
  border-top: 1px solid var(--line);
}
.bulletin-list time {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.bulletin-list a {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bulletin-list p {
  margin-top: 8px;
  overflow-wrap: anywhere;
}