:root {
  --ink: #102a43;
  --muted: #627d98;
  --line: #d9e2ec;
  --paper: #f7fafc;
  --card: #ffffff;
  --navy: #123957;
  --teal: #0f766e;
  --teal-soft: #d8f3ef;
  --green: #157f5b;
  --green-soft: #e2f5ec;
  --blue: #1b6ca8;
  --blue-soft: #e6f2fb;
  --amber: #a55b00;
  --shadow: 0 10px 26px rgba(16, 42, 67, .08);
  font-family: "Segoe UI", Aptos, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, select, input { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 10; padding: .6rem .9rem; background: white; color: var(--navy); border-radius: .3rem; box-shadow: var(--shadow); }
.skip-link:focus { top: 1rem; }

.site-header { color: white; background: linear-gradient(120deg, #0e344e 0%, #15576b 56%, #0f766e 100%); border-bottom: 4px solid #5eead4; }
.header-inner, .page-shell, .site-footer { width: min(1440px, calc(100% - 2.5rem)); margin: 0 auto; }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; min-height: 112px; }
.brand-lockup { display: flex; gap: 1rem; align-items: center; }
.brand-mark { width: 45px; height: 45px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 3px; padding: 7px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.brand-mark span { background: #99f6e4; border-radius: 6px 6px 2px 2px; }
.brand-mark span:nth-child(1) { height: 42%; }.brand-mark span:nth-child(2) { height: 78%; }.brand-mark span:nth-child(3) { height: 58%; }
.eyebrow, .card-kicker, .control-label { margin: 0; font-size: .72rem; letter-spacing: .095em; text-transform: uppercase; font-weight: 700; }
.site-header .eyebrow { color: #bfeee8; }.site-header h1 { margin: .12rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.85rem); letter-spacing: -.02em; }
.reference-lockup { text-align: right; display: grid; gap: .18rem; font-size: .95rem; }.reference-label { color: #ccebe8; font-size: .8rem; }

.page-shell { padding: 1.5rem 0 3rem; }.notice { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; background: #eff7fb; border-left: 4px solid var(--blue); color: #28485f; border-radius: .35rem; font-size: .9rem; }.notice p { margin: 0; line-height: 1.5; }.notice-icon { flex: 0 0 auto; display: grid; place-items: center; width: 19px; height: 19px; color: white; background: var(--blue); border-radius: 50%; font-weight: 700; font-size: .78rem; }
.section-intro { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: 2rem 0 1rem; }.section-intro h2, .panel h2 { margin: .2rem 0 .45rem; letter-spacing: -.025em; }.section-intro h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }.lede, .panel-description { margin: 0; color: var(--muted); line-height: 1.5; max-width: 64ch; }.system-status { flex: 0 0 auto; text-align: right; padding: .75rem 1rem; background: var(--green-soft); color: #115c43; border-radius: .45rem; font-weight: 700; }.system-status .status-dot { display: inline-block; width: 9px; height: 9px; margin-right: .45rem; border-radius: 50%; background: var(--green); }

.indicator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }.metric-card, .panel { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow); }.metric-card { padding: 1.15rem 1.2rem; min-height: 136px; }.emphasis-card { border-top: 4px solid var(--teal); }.card-kicker, .control-label { color: var(--muted); }.large-value { margin: .65rem 0 .28rem; font-size: clamp(1.3rem, 2.1vw, 1.85rem); line-height: 1.1; font-weight: 750; color: var(--navy); }.card-caption, .panel-footnote { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.content-grid { display: grid; gap: 1rem; margin-top: 1rem; }.primary-grid { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }.forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.panel { padding: 1.35rem; min-width: 0; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }.panel h2 { font-size: 1.25rem; }.unit-pill { flex: 0 0 auto; border: 1px solid #b9d8e7; background: #f2f9fc; color: var(--blue); padding: .3rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }.panel-description { font-size: .92rem; }.chart { min-height: 255px; margin-top: 1rem; position: relative; }.chart-small { min-height: 184px; }.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }.chart .axis-label { fill: #627d98; font-size: 11px; }.chart .grid-line { stroke: #e4edf3; stroke-width: 1; }.chart .t0-line { stroke: #a55b00; stroke-width: 1.2; stroke-dasharray: 4 4; }.chart .t0-label { fill: #965600; font-size: 10px; font-weight: 700; }.chart .series-line { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-width: 2.5; }.chart .series-fill { opacity: .1; }.chart .chart-empty { color: var(--muted); padding: 2rem; text-align: center; }.event-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .5rem; border-top: 1px solid var(--line); }.event-value { padding: .75rem .4rem .2rem; border-right: 1px solid var(--line); text-align: center; }.event-value:last-child { border-right: 0; }.event-value strong { display: block; color: var(--navy); font-size: 1.05rem; }.event-value span { display: block; color: var(--muted); font-size: .74rem; margin-top: .2rem; }
.chart-toolbar { display: flex; gap: .5rem; margin-top: .85rem; }.ghost-button, .view-button { border: 1px solid #bed0dd; color: #35556c; background: #fff; padding: .4rem .65rem; border-radius: .35rem; font-size: .82rem; font-weight: 600; }.ghost-button:hover, .view-button:hover { background: #f0f7fa; }.ghost-button.active, .view-button.active { color: #fff; border-color: var(--teal); background: var(--teal); }.stat-line { display: flex; flex-wrap: wrap; gap: .9rem; margin: .8rem 0 -.25rem; color: #38566c; font-size: .86rem; }.stat-line strong { color: var(--navy); }.legend-inline { color: var(--muted); font-size: .75rem; white-space: nowrap; }.legend-swatch { display: inline-block; width: 12px; height: 3px; border-radius: 4px; vertical-align: middle; margin: 0 .24rem .1rem .45rem; }.legend-swatch.tide { background: #1597a5; }.legend-swatch.dfm { background: #d46727; }

.map-panel { margin-top: 1rem; }.map-heading { align-items: center; }.map-status { padding: .55rem .7rem; color: #155b52; background: var(--teal-soft); border-radius: .35rem; font-size: .82rem; font-weight: 700; }.map-controls { display: flex; flex-wrap: wrap; gap: 1rem; padding: 1rem 0; }.control-group { display: grid; gap: .35rem; }.segmented { display: flex; gap: .35rem; }.variable-control select { min-width: 218px; padding: .42rem .55rem; color: var(--ink); border: 1px solid #bed0dd; border-radius: .35rem; background: white; }.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 1rem; }.map-stage { min-height: 510px; position: relative; overflow: hidden; border: 1px solid #cadbe5; border-radius: .6rem; background: #eaf3f5; touch-action: none; }.map-stage canvas { display: block; width: 100%; height: 100%; min-height: 510px; cursor: grab; }.map-stage canvas.dragging { cursor: grabbing; }.map-hint { position: absolute; bottom: .7rem; left: .7rem; padding: .35rem .5rem; color: #35556c; background: rgba(255,255,255,.88); border-radius: .25rem; font-size: .72rem; pointer-events: none; }.map-tooltip { position: absolute; max-width: 260px; padding: .55rem .65rem; color: #fff; background: rgba(16,42,67,.94); border-radius: .35rem; font-size: .77rem; line-height: 1.45; pointer-events: none; }.map-empty-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; text-align: center; color: #35556c; background: rgba(247,250,252,.82); font-weight: 600; }.map-side-panel { display: grid; align-content: start; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .6rem; background: #fbfdfe; }.time-readout strong { display: block; margin-top: .25rem; color: var(--navy); }.slider-wrap { display: grid; gap: .5rem; color: var(--muted); font-size: .78rem; }.slider-wrap input { width: 100%; accent-color: var(--teal); }.colour-legend { border-top: 1px solid var(--line); padding-top: 1rem; }.legend-gradient { height: 13px; border-radius: 2px; background: linear-gradient(90deg, #312e81, #0ea5a6 43%, #fde047 72%, #b91c1c); }.legend-range { display: flex; justify-content: space-between; gap: .4rem; margin-top: .3rem; color: #35556c; font-size: .75rem; }.colour-legend p { margin: .6rem 0 0; color: var(--muted); font-size: .77rem; line-height: 1.4; }.face-inspector { padding-top: 1rem; border-top: 1px solid var(--line); }.face-inspector p { margin: .4rem 0 0; color: #486581; font-size: .8rem; line-height: 1.5; }.face-inspector dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .55rem; margin: .55rem 0 0; font-size: .78rem; }.face-inspector dt { color: var(--muted); }.face-inspector dd { margin: 0; color: var(--ink); font-weight: 600; }.map-explanation { margin: .85rem 0 0; color: var(--muted); font-size: .82rem; }

.technical-details { margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: .7rem; background: #fff; }.technical-details summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; color: var(--navy); font-weight: 750; cursor: pointer; }.technical-details summary span { color: var(--teal); font-size: .78rem; }.technical-content { padding: 0 1.2rem 1.25rem; color: #486581; font-size: .86rem; line-height: 1.5; }.provenance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.provenance-block { padding: .85rem; border: 1px solid #e1ebf1; border-radius: .45rem; background: #fbfdfe; }.provenance-block h3 { margin: 0 0 .4rem; color: var(--navy); font-size: .95rem; }.provenance-block p { margin: .25rem 0; overflow-wrap: anywhere; }.provenance-block code { font-family: Consolas, monospace; font-size: .73rem; color: #35556c; }.site-footer { padding: 0 0 2rem; color: var(--muted); font-size: .78rem; }.site-footer p { border-top: 1px solid var(--line); margin: 0; padding-top: 1rem; }

.map-empty-overlay[hidden] { display: none; }

@media (max-width: 980px) { .indicator-grid { grid-template-columns: repeat(2, 1fr); }.primary-grid, .forecast-grid { grid-template-columns: 1fr; }.map-layout { grid-template-columns: 1fr; }.map-side-panel { grid-template-columns: repeat(2, 1fr); }.map-stage, .map-stage canvas { min-height: 440px; } }
@media (max-width: 680px) { .header-inner, .section-intro { align-items: flex-start; flex-direction: column; gap: 1rem; }.header-inner { padding: 1.1rem 0; }.reference-lockup, .system-status { text-align: left; }.header-inner, .page-shell, .site-footer { width: min(100% - 1.2rem, 1440px); }.indicator-grid { grid-template-columns: 1fr; }.panel { padding: 1rem; }.panel-heading { align-items: flex-start; }.chart-toolbar, .map-controls { align-items: stretch; flex-direction: column; }.map-controls .segmented { flex-wrap: wrap; }.variable-control select { width: 100%; }.map-side-panel { grid-template-columns: 1fr; }.map-stage, .map-stage canvas { min-height: 370px; }.provenance-grid { grid-template-columns: 1fr; }.event-strip { grid-template-columns: repeat(2, 1fr); }.event-value:nth-child(2) { border-right: 0; }.event-value:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }


/* Mapa cartográfico live */
.leaflet-map { width:100%; height:100%; min-height:510px; background:#eaf3f5; z-index:1; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size:.68rem; }
.leaflet-control-scale-line { font-size:.68rem; }
.opacity-control input { width:220px; accent-color:var(--teal); }
.face-series-chart { min-height:0; margin-top:.8rem; overflow:visible; }
.face-series-chart svg { width:100%; height:auto; display:block; overflow:visible; }
.face-series-chart .axis-label { fill:#627d98; font-size:10px; }
.face-series-chart .grid-line { stroke:#e4edf3; stroke-width:1; }
.face-series-chart .t0-line { stroke:#a55b00; stroke-width:1.2; stroke-dasharray:4 4; }
.face-series-chart .t0-label { fill:#965600; font-size:10px; font-weight:700; }
.face-series-chart .series-line { fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-width:2.5; }
.face-query-status { margin:.45rem 0 0; color:var(--muted); font-size:.75rem; line-height:1.4; }
.face-value-live { margin:.35rem 0 .2rem; color:var(--navy); font-size:1.35rem; font-weight:800; }
@media (max-width:980px) { .leaflet-map { min-height:440px; } .opacity-control input { width:100%; } }
@media (max-width:680px) { .leaflet-map { min-height:370px; } }

/* H40B / pySTEPS live */
.h40b-panel { margin-top: 1rem; }
.h40b-product-control select { min-width: 280px; padding: .42rem .55rem; color: var(--ink); border: 1px solid #bed0dd; border-radius: .35rem; background: #fff; }
.h40b-stage, .h40b-stage .leaflet-map { min-height: 500px; }
.h40b-product-meta { padding-top: 1rem; border-top: 1px solid var(--line); }
.h40b-product-meta strong { display: block; margin-top: .28rem; color: var(--navy); font-size: .96rem; }
.h40b-product-meta p { margin: .35rem 0 0; color: var(--muted); font-size: .77rem; line-height: 1.45; }
.h40b-forcing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.h40b-subpanel { min-width: 0; padding: 1rem; border: 1px solid #dbe7ee; border-radius: .6rem; background: #fbfdfe; }
.h40b-subpanel h3 { margin: .18rem 0 0; color: var(--navy); font-size: 1.03rem; }
.compact-heading { align-items: flex-start; }
.mini-select-label { display: grid; gap: .25rem; color: var(--muted); font-size: .72rem; font-weight: 700; }
.mini-select-label select { min-width: 110px; padding: .34rem .45rem; color: var(--ink); border: 1px solid #bed0dd; border-radius: .35rem; background: #fff; }
.risk-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .65rem; }
.risk-summary > div { padding: .7rem .75rem; border: 1px solid #dbe7ee; border-radius: .45rem; background: #fff; }
.risk-summary span { display: block; color: var(--muted); font-size: .72rem; }
.risk-summary strong { display: block; margin-top: .2rem; color: var(--navy); font-size: 1.1rem; }
.uncertainty-band { pointer-events: none; }
@media (max-width: 980px) {
  .h40b-forcing-grid { grid-template-columns: 1fr; }
  .h40b-stage, .h40b-stage .leaflet-map { min-height: 440px; }
}
@media (max-width: 680px) {
  .h40b-product-control select { min-width: 0; width: 100%; }
  .h40b-stage, .h40b-stage .leaflet-map { min-height: 370px; }
  .risk-summary { grid-template-columns: 1fr; }
}

/* ==========================================================
   F18 MET VALIDATION UI
   ========================================================== */

.met-validation-panel {
  margin-top: 1rem;
}

.validation-pill {
  flex: 0 0 auto;
  padding: .48rem .72rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.status-ok {
  background: var(--green-soft);
  color: #115c43;
  border-color: #bfe5d5;
}

.status-warning {
  background: #fff7df;
  color: #805600;
  border-color: #efd898;
}

.status-alert {
  background: #fff0f0;
  color: #a12626;
  border-color: #efbaba;
}

.validation-run {
  margin-top: .65rem;
}

.validation-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.validation-summary-item {
  padding: .85rem 1rem;
  background: #fbfdfe;
  border: 1px solid #e1ebf1;
  border-radius: .55rem;
}

.validation-summary-item span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.validation-summary-item strong {
  display: block;
  margin-top: .35rem;
  color: var(--navy);
  font-size: 1.12rem;
}

.validation-section-title {
  margin: 1.25rem 0 .65rem;
  color: var(--navy);
  font-size: 1rem;
}

.validation-source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.validation-source-card {
  padding: .9rem;
  border: 1px solid #dfe9ef;
  border-radius: .55rem;
  background: #fbfdfe;
}

.validation-source-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .6rem;
}

.validation-source-head strong {
  color: var(--navy);
  font-size: .9rem;
}

.validation-mini-status {
  flex: 0 0 auto;
  padding: .2rem .42rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.validation-coverage {
  margin: .7rem 0 .15rem;
  color: var(--navy);
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 800;
}

.validation-source-meta,
.validation-list-item p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.4;
}

.validation-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.validation-list {
  display: grid;
  gap: .5rem;
}

.validation-list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .8rem;
  padding: .72rem .8rem;
  border: 1px solid #e1ebf1;
  border-radius: .5rem;
  background: #fbfdfe;
}

.validation-list-item strong {
  color: var(--navy);
}

.validation-details {
  margin-top: 1.2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: #fbfdfe;
}

.validation-details summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  cursor: pointer;
  color: var(--navy);
  font-weight: 750;
}

.validation-details summary span:last-child {
  color: var(--teal);
  font-size: .75rem;
  font-weight: 700;
}

.validation-provenance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: 0 1rem 1rem;
}

.validation-provenance-block {
  min-width: 0;
  padding: .8rem;
  background: #fff;
  border: 1px solid #e1ebf1;
  border-radius: .45rem;
}

.validation-provenance-block h4 {
  margin: 0 0 .45rem;
  color: var(--navy);
}

.validation-provenance-block p {
  margin: .25rem 0;
  color: #486581;
  font-size: .78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.validation-provenance-block code {
  font-family: Consolas, monospace;
  color: #35556c;
  font-size: .72rem;
}

.validation-science-note {
  margin: .85rem 0 0;
  padding: .7rem .8rem;
  color: #5f6570;
  background: #f7f9fa;
  border-left: 3px solid #a9bac5;
  font-size: .78rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .validation-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .validation-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .validation-summary-grid,
  .validation-source-grid,
  .validation-provenance-grid {
    grid-template-columns: 1fr;
  }

  .validation-details summary {
    flex-direction: column;
    gap: .25rem;
  }
}
/* ==========================================================
   F18 MET SCHEMA V2 FRESHNESS
   ========================================================== */

.validation-status-stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .45rem;
}

.validation-cycle-pill {
  white-space: nowrap;
}

@media (max-width: 680px) {
  .validation-status-stack {
    justify-content: flex-start;
  }
}

/* ==========================================================
   F18 MET SPATIAL — local, deterministic sub-basin product
   ========================================================== */

.met-spatial-panel {
  overflow: hidden;
}

.met-spatial-heading {
  align-items: flex-start;
}

.met-spatial-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .8rem 1.15rem;
  margin: 1.15rem 0 .75rem;
  padding: .9rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: #f7fafb;
}

.met-spatial-select {
  min-width: 12rem;
}

.met-spatial-select select {
  width: 100%;
  min-height: 2.35rem;
  padding: .42rem .65rem;
  border: 1px solid #bdd0dc;
  border-radius: .4rem;
  color: var(--navy);
  background: #fff;
  font: inherit;
}

.met-spatial-period {
  margin: .65rem 0 1rem;
  color: #486581;
  font-size: .84rem;
  font-weight: 650;
}

.met-spatial-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .85fr);
  gap: 1rem;
  align-items: stretch;
}

.met-spatial-map-card,
.met-spatial-detail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: #fbfdfe;
}

.met-spatial-map-card {
  padding: .75rem;
}

.met-spatial-map {
  display: block;
  width: 100%;
  min-height: 25rem;
  border-radius: .5rem;
  background: linear-gradient(160deg, #f4fafb 0%, #e7f2f4 100%);
}

.met-spatial-basin {
  stroke: #fff;
  stroke-width: 2.1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity .15s ease, stroke .15s ease, stroke-width .15s ease;
}

.met-spatial-basin:hover,
.met-spatial-basin:focus {
  opacity: .84;
  stroke: #123a4a;
  stroke-width: 3;
  outline: none;
}

.met-spatial-basin.selected {
  stroke: #071f2a;
  stroke-width: 4;
}

.met-spatial-basin-label {
  pointer-events: none;
  fill: #102a3a;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 4px;
  stroke-linejoin: round;
  font-size: 15px;
  font-weight: 800;
  text-anchor: middle;
}

.met-spatial-map-hint {
  margin: .55rem .15rem .75rem;
  color: #607d8b;
  font-size: .75rem;
}

.met-spatial-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem .65rem;
}

.met-spatial-legend-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  color: #486581;
  font-size: .72rem;
}

.met-spatial-legend-swatch {
  flex: 0 0 1.2rem;
  height: .75rem;
  border: 1px solid rgba(13, 54, 70, .16);
  border-radius: .18rem;
}

.met-spatial-detail {
  padding: 1rem;
}

.met-spatial-detail h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1.15rem;
}

.met-spatial-current {
  margin: .7rem 0 1rem;
  padding: .8rem;
  border-left: 4px solid var(--teal);
  background: #eef7f7;
}

.met-spatial-current strong {
  display: block;
  margin-top: .18rem;
  color: var(--navy);
  font-size: 1.55rem;
}

.met-spatial-meta {
  margin: .25rem 0;
  color: #607d8b;
  font-size: .76rem;
  line-height: 1.45;
}

.met-spatial-comparison-title {
  margin: 1rem 0 .45rem;
  color: var(--navy);
  font-size: .83rem;
}

.met-spatial-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .75rem;
}

.met-spatial-table th,
.met-spatial-table td {
  padding: .4rem .25rem;
  border-bottom: 1px solid #e1ebf1;
  text-align: left;
  vertical-align: top;
}

.met-spatial-table th:last-child,
.met-spatial-table td:last-child {
  text-align: right;
}

.met-spatial-table th {
  color: #607d8b;
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .met-spatial-layout {
    grid-template-columns: 1fr;
  }

  .met-spatial-detail {
    min-height: auto;
  }
}

@media (max-width: 680px) {
  .met-spatial-controls {
    align-items: stretch;
  }

  .met-spatial-select,
  .met-spatial-controls .control-group {
    width: 100%;
  }

  .met-spatial-map {
    min-height: 20rem;
  }

  .met-spatial-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A06F-A5 NWP COMMON MATRIX CANDIDATE */
.nwp-common-matrix-block {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid #d6e0e6;
}

.nwp-common-matrix-heading {
  margin-bottom: .65rem;
}

.nwp-common-matrix-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.nwp-common-matrix-table {
  width: 100%;
  min-width: 860px;
}

.nwp-common-matrix-table th,
.nwp-common-matrix-table td {
  white-space: nowrap;
  vertical-align: middle;
}

.nwp-common-matrix-table th:first-child {
  min-width: 92px;
}

.nwp-common-matrix-table th:nth-child(2),
.nwp-common-matrix-table td:nth-child(2) {
  min-width: 220px;
}

@media (max-width: 720px) {
  .nwp-common-matrix-block {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}
/* END A06F-A5 NWP COMMON MATRIX CANDIDATE */
/* A06F-A6-R3-R3 UNIFIED SPATIAL NWP */
.met-spatial-role-note {
  display: block;
  margin-top: .18rem;
  font-size: .68rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .025em;
  color: #60788a;
}

#met-spatial-source optgroup {
  font-weight: 700;
}

#met-spatial-source option {
  font-weight: 400;
}
/* END A06F-A6-R3-R3 UNIFIED SPATIAL NWP */
/* A06F-A8-R1 GEFS STATISTIC HIDDEN FIX */
#met-spatial-statistic-wrap[hidden] {
  display: none;
}
/* END A06F-A8-R1 GEFS STATISTIC HIDDEN FIX */