.d3-page {
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #102033;
  background: #d9e7f5;
}

.d3-page .d3-page-shell {
  --skewt-card-height: calc(100vh - 20px);
  --skewt-card-width: min(100%, 125vh);
  --skewt-card-aspect-ratio: 1.25;
  --side-panel-width: 360px;
  --main-grid-width: 100%;
  --main-grid-gap: 10px;
  width: 100vw;
  min-height: 100vh;
  max-width: none;
  padding: 12px;
  overflow-x: hidden;
  overflow-y: visible;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(238, 244, 248, 0.84);
  backdrop-filter: blur(2px);
}

.loading-overlay.hidden {
  display: none;
}

.loading-overlay-panel {
  min-width: 220px;
  padding: 20px 24px;
  border: 1px solid rgba(18, 58, 95, 0.16);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(18, 58, 95, 0.16);
  text-align: center;
}

.loading-overlay-panel p {
  margin: 12px 0 0;
  color: #123a5f;
  font-weight: 700;
}

.loading-spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 4px solid rgba(18, 58, 95, 0.14);
  border-top-color: #2a7fbc;
  border-radius: 50%;
  animation: loading-spin 0.85s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.d3-page .hero {
  align-items: center;
  margin-bottom: 10px;
}

.d3-page .hero h1 {
  font-size: clamp(1.6rem, 2.2vw, 2.5rem);
  line-height: 1.05;
}

.d3-page .hero-copy {
  max-width: 900px;
  margin-top: 6px;
  font-size: 0.95rem;
}

.d3-page .hero-note {
  color: #0b4a7a;
  background: #e8f3ff;
  border-color: #93b7d6;
  box-shadow: none;
}

.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: var(--main-grid-width);
  max-width: calc(100vw - 24px);
  margin: 0 auto 10px;
}

.mode-button-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  overflow: hidden;
  border: 1px solid #8fb2d0;
  border-radius: 8px;
  background: #ffffff;
}

.mode-tab,
.archive-controls button,
.sounding-comparison-panel button,
.selection-action-button {
  border: 1px solid #8fb2d0;
  border-radius: 6px;
  color: #0b5d96;
  background: #ffffff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.mode-tab {
  border: 0;
  border-radius: 0;
  border-right: 1px solid #8fb2d0;
  min-height: 34px;
  padding: 6px 12px;
}

.mode-tab:last-child {
  border-right: 0;
}

.mode-tab.active {
  color: #ffffff;
  border-color: #0b5d96;
  background: #0b5d96;
}

.archive-controls,
.selection-action-button {
  display: none;
}

.d3-page.mode-archive .archive-controls {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #b7cee3;
}

.d3-page.mode-archive #current-run-control {
  display: none;
}

.d3-page.mode-comparison .selection-action-button {
  display: block;
}

.archive-controls button,
.sounding-comparison-panel button,
.selection-action-button {
  min-height: 32px;
  padding: 4px 10px;
}

.sounding-comparison-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.sounding-comparison-panel h3 {
  margin: 0;
  color: #0b5d96;
  font-size: 0.95rem;
}

.d3-page.mode-standard #sounding-comparison-panel,
.d3-page.mode-archive #sounding-comparison-panel {
  display: none;
}

.d3-page.mode-standard .model-comparison-panel,
.d3-page.mode-archive .model-comparison-panel,
.d3-page.mode-comparison #time-height-section,
.d3-page.mode-comparison #meteogram-section {
  display: none;
}

.d3-page .eyebrow,
.d3-page .utility-link,
.d3-page .stat-group h3 {
  color: #0b5d96;
}

.d3-page .control-strip {
  margin: 0;
  gap: 8px;
}

.d3-page .main-grid {
  grid-template-columns: minmax(0, var(--skewt-card-width)) minmax(0, var(--side-panel-width));
  gap: var(--main-grid-gap);
  align-items: stretch;
  width: var(--main-grid-width);
  max-width: calc(100vw - 24px);
  height: var(--skewt-card-height);
  min-height: 620px;
  margin: 0 auto 10px;
  overflow: visible;
  scroll-margin-top: 10px;
}

.jump-to-sounding {
  border: 1px solid #6d90ad;
  border-radius: 999px;
  background: #f8fbff;
  color: #102033;
  font-weight: 800;
  padding: 7px 12px;
  box-shadow: 0 1px 4px rgba(16, 32, 51, 0.16);
  cursor: pointer;
}

.jump-to-sounding:hover,
.jump-to-sounding:focus-visible {
  background: #eaf3fb;
  outline: 2px solid #6d90ad;
  outline-offset: 2px;
}


.d3-page .d3-hero,
.d3-page #warning-banner,
.d3-page .d3-future-grid {
  width: var(--main-grid-width);
  max-width: calc(100vw - 24px);
  margin-left: auto;
  margin-right: auto;
}

.d3-page .plot-panel,
.d3-page .side-panel,
.d3-page .card {
  min-width: 0;
}

.d3-page .plot-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 0;
  height: 100%;
  max-height: none;
  padding: 10px 12px;
}

.d3-page .side-panel {
  align-self: stretch;
  justify-self: stretch;
  max-height: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  gap: 0;
  margin: 0;
}

.d3-page .card {
  border-color: #9ab8d3;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: none;
}

.d3-page .side-panel-controls {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
}

.d3-page .side-panel-controls label {
  display: grid;
  gap: 3px;
}

.d3-page .side-panel-controls span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.d3-page .side-panel-controls select,
.d3-page .side-panel-controls input[type="date"] {
  width: 100%;
  min-height: 34px;
  border: 1px solid #9ab8d3;
  border-radius: 6px;
  padding: 4px 10px;
  color: #102033;
  background: #f8fbff;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
}

#load-archive-run.archive-load-needed {
  border-color: #c47a24;
  box-shadow: 0 0 0 3px rgba(196, 122, 36, 0.24);
}

.side-panel-content,
.side-panel-tables {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.side-panel-content {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-bottom: 0;
}

.side-panel-content details > summary {
  color: #102033;
}

.side-panel-content details[open] > summary {
  margin-bottom: 8px;
}

.d3-page .d3-future-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 0;
}

.d3-page .d3-future-grid .card {
  width: 100%;
}

.d3-page .meteogram-surface {
  min-height: 320px;
}

.time-height-controls {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
  color: #304c68;
  font-size: 0.9rem;
}

.time-height-control-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.time-height-control-label {
  min-width: 76px;
  color: #0b5d96;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.time-height-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.time-height-zoom-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 8px 0 0;
  color: #304c68;
  font-size: 0.82rem;
}

.time-height-zoom-controls button {
  height: 28px;
  border: 1px solid #8fb2d0;
  border-radius: 5px;
  padding: 2px 10px;
  color: #0b5d96;
  background: #ffffff;
  cursor: pointer;
  font: 700 0.8rem/1 Arial, Helvetica, sans-serif;
}

.plot-download-actions,
.meteogram-actions,
.meteogram-footer-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.utility-button,
.meteogram-actions button,
.meteogram-footer-controls button,
.time-height-zoom-controls button {
  border: 1px solid #8fb2d0;
  border-radius: 5px;
  color: #0b5d96;
  background: #ffffff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

.utility-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.utility-button:hover {
  text-decoration: none;
}

.plot-download-actions,
.meteogram-actions {
  justify-content: flex-end;
}

.meteogram-actions {
  margin-top: 8px;
}

.meteogram-actions button,
.meteogram-footer-controls button {
  height: 28px;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

.meteogram-footer-controls {
  justify-content: space-between;
  margin-top: 8px;
}

.meteogram-footer-controls .external-axis-controls {
  flex: 1 1 auto;
  margin: 0;
}

.time-height-surface {
  min-height: 460px;
}

.d3-time-height-svg {
  display: block;
  width: 100%;
  height: 460px;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  background: #ffffff;
}

.time-height-title,
.time-height-legend-label {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
}

.time-height-title {
  font-size: 16px;
  font-weight: 700;
}

.time-height-legend-label {
  font-size: 11px;
}

.time-height-contour {
  fill: none;
  stroke: #000000;
  stroke-width: 1.85;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.time-height-contour-dashed {
  stroke-dasharray: 6 4;
}

.time-height-contour-label {
  fill: #000000;
  stroke: #ffffff;
  stroke-width: 3px;
  paint-order: stroke;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.time-height-axis-brush .overlay {
  cursor: crosshair;
  fill: transparent;
}

.time-height-brush-track {
  stroke: #b5cbe0;
  stroke-linecap: round;
  stroke-width: 6;
}

.time-height-axis-brush .selection {
  fill: #0b5d96;
  fill-opacity: 0.88;
  stroke: none;
}

.time-height-axis-brush .handle {
  fill: #ffffff;
  stroke: #0b5d96;
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 1px rgba(8, 25, 43, 0.18));
}

.time-height-x-brush .handle {
  cursor: ew-resize;
}

.time-height-y-brush .handle {
  cursor: ns-resize;
}

.time-height-range-controls {
  display: flex;
  align-items: end;
  gap: 5px;
  width: 100%;
  height: 100%;
  color: #304c68;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}

.time-height-range-label {
  align-self: center;
  font-weight: 700;
  white-space: nowrap;
}

.time-height-range-controls label {
  display: grid;
  gap: 2px;
  min-width: 42px;
}

.time-height-range-input {
  width: 46px;
  height: 20px;
  border: 1px solid #9ab8d3;
  border-radius: 4px;
  padding: 1px 4px;
  color: #102033;
  background: #ffffff;
  font: 11px/1 Arial, Helvetica, sans-serif;
}

.time-height-range-input.invalid {
  border-color: #b42318;
  background: #fff1f0;
}

.time-height-range-reset {
  height: 20px;
  border: 1px solid #9ab8d3;
  border-radius: 4px;
  padding: 1px 6px;
  color: #0b5d96;
  background: #ffffff;
  cursor: pointer;
  font: 700 10px/1 Arial, Helvetica, sans-serif;
}

.time-height-cell {
  stroke: none;
  shape-rendering: crispEdges;
  cursor: crosshair;
}

.plot-hover-line {
  stroke: rgba(76, 108, 136, 0.75);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  pointer-events: none;
}

.hover-capture {
  fill: transparent;
  cursor: crosshair;
}

.external-axis-controls {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(120px, 1fr)) auto;
  gap: 8px 12px;
  align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #b5cbe0;
  border-radius: 7px;
  color: #304c68;
  background: #f8fbff;
  font: 12px/1.2 Arial, Helvetica, sans-serif;
}

.external-axis-title {
  font-weight: 700;
  white-space: nowrap;
}

.external-axis-range {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.external-axis-range span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-axis-range input {
  width: 100%;
  accent-color: #0b5d96;
}

.external-axis-dual-range {
  --range-lower: 0%;
  --range-upper: 100%;
  --range-lower-label: 0%;
  --range-upper-label: 100%;
  display: grid;
  grid-column: span 2;
  gap: 5px;
  min-width: 180px;
  margin: 0;
  padding: 0;
  border: 0;
}

.external-axis-dual-range legend {
  overflow: hidden;
  max-width: 100%;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-axis-dual-track {
  position: relative;
  height: 28px;
}

.external-axis-dual-track::before,
.external-axis-dual-track::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
}

.external-axis-dual-track::before {
  background: #d8e6f3;
}

.external-axis-dual-track::after {
  left: var(--range-lower);
  right: calc(100% - var(--range-upper));
  background: #0b5d96;
}

.external-axis-dual-track input {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
}

.external-axis-dual-track input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

.external-axis-dual-track input::-moz-range-track {
  height: 4px;
  background: transparent;
}

.external-axis-dual-track input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -5px;
  border: 2px solid #0b5d96;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 25, 43, 0.25);
  cursor: ew-resize;
  pointer-events: auto;
  appearance: none;
}

.external-axis-dual-track input::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid #0b5d96;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(8, 25, 43, 0.25);
  cursor: ew-resize;
  pointer-events: auto;
}

.external-axis-dual-range-inverted .external-axis-dual-track input {
  transform: scaleX(-1);
}

.external-axis-tooltip {
  position: absolute;
  z-index: 3;
  top: -25px;
  min-width: 44px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #ffffff;
  background: #102033;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.external-axis-tooltip-lower {
  left: var(--range-lower-label);
}

.external-axis-tooltip-upper {
  left: var(--range-upper-label);
}

.external-axis-dual-range.is-dragging .external-axis-tooltip,
.external-axis-dual-track:focus-within .external-axis-tooltip {
  opacity: 1;
}

.external-axis-controls button {
  height: 28px;
  border: 1px solid #8fb2d0;
  border-radius: 5px;
  padding: 2px 10px;
  color: #0b5d96;
  background: #ffffff;
  cursor: pointer;
  font-weight: 700;
}

#skewt-axis-controls.external-axis-controls {
  gap: 3px 10px;
  margin-top: 5px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.1;
}

#skewt-axis-controls .external-axis-dual-range {
  gap: 1px;
}

#skewt-axis-controls .external-axis-dual-track {
  height: 22px;
}

#skewt-axis-controls .external-axis-dual-track::before,
#skewt-axis-controls .external-axis-dual-track::after {
  top: 9px;
  height: 3px;
}

#skewt-axis-controls .external-axis-dual-track input {
  height: 22px;
}

#skewt-axis-controls .external-axis-dual-track input::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -5px;
}

#skewt-axis-controls .external-axis-dual-track input::-moz-range-thumb {
  width: 11px;
  height: 11px;
}

#skewt-axis-controls.external-axis-controls button {
  height: 23px;
  padding: 1px 8px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .external-axis-controls {
    grid-template-columns: 1fr 1fr;
  }

  .external-axis-dual-range {
    grid-column: 1 / -1;
  }
}

.time-height-wind-barb {
  opacity: 0.82;
}

.meteogram-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 10px;
  color: #304c68;
  font-size: 0.9rem;
}

.meteogram-controls label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.meteogram-legend-controls label::before,
.meteogram-svg-legend-controls label::before {
  content: "";
  width: 17px;
  height: 0;
  border-top: 3px solid #304c68;
}

.meteogram-legend-controls label.temperature::before,
.meteogram-svg-legend-controls label.temperature::before {
  border-color: #c2362b;
}

.meteogram-legend-controls label.dewpoint::before,
.meteogram-svg-legend-controls label.dewpoint::before {
  border-color: #1b7f59;
}

.meteogram-legend-controls label.temperature850::before,
.meteogram-svg-legend-controls label.temperature850::before {
  border-color: #df7b18;
  border-top-style: dotted;
}

.meteogram-legend-controls label.wind::before,
.meteogram-svg-legend-controls label.wind::before {
  border-color: #243746;
  border-top-width: 2px;
}

.meteogram-svg-legend-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  width: 100%;
  color: #304c68;
  font: 11px Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

.meteogram-svg-legend-controls label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.meteogram-svg-legend-controls input {
  margin: 0;
}

.model-comparison-panel {
  margin-top: 0;
}

.model-comparison-panel h3 {
  margin: 0 0 10px;
  color: #0b5d96;
  font-size: 1rem;
}

.model-comparison-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 8px 0 10px;
  color: #304c68;
  font-size: 0.86rem;
}

.comparison-control-group {
  display: grid;
  gap: 4px;
}

.comparison-control-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

.comparison-group-label {
  color: #304c68;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.comparison-add-line-group {
  border-left: 1px solid #b7cee3;
  min-width: max-content;
  padding-left: 12px;
}

.comparison-presets-group {
  border-left: 1px solid #b7cee3;
  min-width: max-content;
  padding-left: 12px;
}

.d3-page.mode-ensemble .comparison-add-line-group,
.d3-page.mode-ensemble .comparison-presets-group {
  display: none;
}

.ensemble-meteogram-overlays {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid #b7cee3;
}

.ensemble-meteogram-overlays.hidden {
  display: none;
}

.ensemble-overlay-label {
  margin-right: 3px;
  color: #304c68;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ensemble-overlay-button.comparison-chip {
  min-height: 28px;
  padding: 3px 11px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

.model-comparison-controls select,
.model-comparison-controls button,
.comparison-chip button {
  border: 1px solid #8fb2d0;
  border-radius: 5px;
  color: #0b5d96;
  background: #ffffff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.model-comparison-controls select {
  min-width: 150px;
  height: 32px;
  padding: 2px 32px 2px 10px;
  background:
    linear-gradient(45deg, transparent 50%, #0b5d96 50%) calc(100% - 16px) 50% / 6px 6px no-repeat,
    linear-gradient(135deg, #0b5d96 50%, transparent 50%) calc(100% - 11px) 50% / 6px 6px no-repeat,
    #ffffff;
  appearance: none;
}

.model-comparison-controls button {
  height: 32px;
  min-width: max-content;
  padding: 2px 12px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .model-comparison-controls,
  .comparison-control-group,
  .comparison-control-row {
    min-width: 0;
    max-width: 100%;
  }

  .comparison-add-line-group,
  .comparison-presets-group {
    width: 100%;
    min-width: 0;
    border-left: 0;
    border-top: 1px solid #b7cee3;
    padding-top: 10px;
    padding-left: 0;
  }

  .comparison-control-row {
    flex-wrap: wrap;
    width: 100%;
  }

  .model-comparison-controls select {
    flex: 1 1 150px;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .model-comparison-controls button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
}

.comparison-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 26px;
  margin: 0 0 8px;
}

.comparison-lines:empty {
  display: none;
}

.comparison-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid #b7cee3;
  border-radius: 999px;
  padding: 3px 5px 3px 8px;
  color: #304c68;
  background: #ffffff;
  font-size: 0.78rem;
}

.comparison-chip.active {
  border-color: #0b5d96;
  color: #0b5d96;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px #0b5d96;
}

.ensemble-statistic-button.comparison-chip {
  min-height: 30px;
  padding: 4px 12px;
}

.comparison-chip.unavailable {
  border-color: #c5ced6;
  color: #7f8a94;
  background: #f2f4f6;
}

.comparison-chip.unavailable .comparison-swatch {
  filter: grayscale(1);
  opacity: 0.45;
}

.comparison-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
}

.comparison-chip button {
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 1;
}

.d3-meteogram-svg {
  display: block;
  width: 100%;
  height: 340px;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  background: #ffffff;
}

.d3-meteogram-svg.regular-meteogram-svg {
  height: 900px;
}

.meteogram-panel-legend text {
  fill: #304c68;
  font: 12px Arial, Helvetica, sans-serif;
}

.meteogram-wind-barb {
  color: #243746;
}

.meteogram-wind-barb .wind-barb {
  stroke-width: 1.55;
}

.meteogram-wind-barb .wind-barb-flag {
  stroke-width: 1.35;
}

.meteogram-wind-barb .wind-calm-circle {
  stroke-width: 1.6;
}

.meteogram-wind-barb-hit {
  fill: transparent;
  cursor: crosshair;
}

.precip-hourly-bar {
  fill: #2e9b57;
  opacity: 0.82;
  pointer-events: none;
}

.precip-total-line {
  fill: none;
  stroke: #0c5b2b;
  stroke-width: 2.5;
  pointer-events: none;
}

.precip-type-dot {
  stroke: #ffffff;
  stroke-width: 1;
}

.precip-hover-target {
  fill: transparent;
  cursor: crosshair;
}

.cloud-cover-bar {
  opacity: 0.88;
  pointer-events: none;
}

.cloud-hover-target {
  fill: transparent;
  cursor: crosshair;
}

.cloud-mslp-line {
  fill: none;
  stroke: #303942;
  stroke-width: 2.5;
  pointer-events: none;
}

.cloud-legend-item text {
  fill: #304c68;
  font: 12px Arial, Helvetica, sans-serif;
}

.cloud-legend-item.unavailable text {
  fill: #9aa2a9;
}

.meteogram-title {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.meteogram-line {
  fill: none;
  stroke-width: 2.5;
  pointer-events: none;
}

.meteogram-line-temperature {
  stroke: #c2362b;
}

.meteogram-line-dewpoint {
  stroke: #1b7f59;
}

.meteogram-line-wind {
  stroke: #2369c9;
  stroke-dasharray: 5 4;
}

.meteogram-line-temperature850 {
  stroke: #df7b18;
  stroke-dasharray: 3 5;
  stroke-width: 2.7;
}

.meteogram-hit {
  fill: transparent;
  stroke: transparent;
  cursor: crosshair;
}

.model-comparison-line {
  fill: none;
  stroke-width: 2.5;
  pointer-events: none;
}

.model-comparison-line.selected {
  stroke-width: 4.5;
}

.comparison-temperature-line,
.comparison-dewpoint-line {
  fill: none;
  pointer-events: none;
  stroke-width: 2;
}

.comparison-temperature-line {
  stroke: #c2362b;
}

.comparison-dewpoint-line {
  stroke: #1b7f59;
}

.comparison-sounding-series.is-hovered .comparison-temperature-line,
.comparison-sounding-series.is-hovered .comparison-dewpoint-line {
  stroke-opacity: 0.95;
  stroke-width: 3.2;
}

.comparison-sounding-hit {
  fill: none;
  opacity: 0;
  pointer-events: stroke;
  stroke: transparent;
  stroke-width: 14;
  cursor: help;
}

.archive-plot-message {
  display: grid;
  place-items: center;
  min-height: 420px;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  padding: 24px;
  color: #304c68;
  background: #ffffff;
  text-align: center;
  font-weight: 700;
}

.comparison-warning-dialog {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 16px 16px;
  pointer-events: none;
}

.comparison-warning-dialog.hidden {
  display: none;
}

.comparison-warning-panel {
  position: relative;
  width: min(440px, 100%);
  border: 1px solid #d39b38;
  border-radius: 8px;
  padding: 16px 44px 16px 16px;
  color: #3e2b07;
  background: #fff8e8;
  box-shadow: 0 14px 36px rgba(18, 58, 95, 0.22);
  pointer-events: auto;
}

.comparison-warning-panel h2 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.comparison-warning-panel p {
  margin: 0;
  font-size: 0.9rem;
}

.model-comparison-hit {
  fill: transparent;
  stroke: transparent;
  cursor: crosshair;
}

.model-comparison-legend-title,
.model-comparison-legend-label,
.model-comparison-legend-remove,
.model-comparison-legend-toggle {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
}

.model-comparison-legend-title {
  font-size: 11px;
  font-weight: 700;
}

.model-comparison-legend-label {
  font-size: 9.5px;
}

.model-comparison-legend-item {
  cursor: pointer;
  outline: none;
}

.model-comparison-legend-chip {
  fill: #ffffff;
  stroke: #b7cee3;
  stroke-width: 1;
}

.model-comparison-legend-item:hover .model-comparison-legend-chip,
.model-comparison-legend-item:focus .model-comparison-legend-chip {
  fill: #f4f9fd;
  stroke: #6d9fc5;
}

.model-comparison-legend-item.selected .model-comparison-legend-label {
  fill: #102f4d;
  font-weight: 700;
}

.model-comparison-legend-item.selected .model-comparison-legend-chip {
  stroke: #0b5d96;
  stroke-width: 2;
}

.model-comparison-legend-item.model-average .model-comparison-legend-label {
  fill: #111827;
}

.model-comparison-legend-item.model-average .model-comparison-legend-chip {
  stroke: #111827;
}

.model-comparison-legend-item.model-average.disabled {
  opacity: 0.48;
}

.model-comparison-legend-toggle {
  cursor: pointer;
}

.model-comparison-legend-checkbox {
  fill: #ffffff;
  stroke: #334155;
  stroke-width: 1.2;
}

.model-comparison-legend-checkmark {
  fill: none;
  stroke: #111827;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.model-comparison-legend-item.selected .model-comparison-legend-line {
  stroke-width: 4.5;
}

.model-comparison-legend-line {
  stroke-width: 2.5;
  stroke-linecap: round;
}

.model-comparison-legend-remove {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.model-comparison-legend-remove:hover {
  fill: #c2362b;
}

.ptype-comparison-row-background {
  fill: #ffffff;
  stroke: #b7c5d0;
  stroke-width: 1;
}

.ptype-comparison-row-label {
  fill: #263f56;
  font: 700 10.5px Arial, Helvetica, sans-serif;
}

.comparison-row-chip-background {
  fill: #ffffff;
  stroke: #8ea7bb;
  stroke-width: 1;
}

.comparison-row-chip-label {
  fill: #263f56;
  font: 700 9.5px Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.comparison-row-chip-remove {
  fill: #536b7d;
  cursor: pointer;
  font: 700 13px Arial, Helvetica, sans-serif;
}

.comparison-row-chip-remove:hover,
.comparison-row-chip-remove:focus {
  fill: #c2362b;
}

.ptype-comparison-piece {
  shape-rendering: crispEdges;
}

.ptype-comparison-hit {
  fill: transparent;
  cursor: crosshair;
}

.ptype-comparison-unavailable-label {
  fill: #667684;
  font: 9.5px Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.ptype-comparison-legend text {
  fill: #304c68;
  font: 9.5px Arial, Helvetica, sans-serif;
}

.cloud-comparison-legend text {
  fill: #304c68;
  font: 9.5px Arial, Helvetica, sans-serif;
}

.cloud-comparison-segment {
  shape-rendering: crispEdges;
}

.comparison-ptype-valid-time-cursor {
  stroke: #d62828;
  stroke-width: 2.5;
  stroke-dasharray: 5 3;
  pointer-events: none;
}


.d3-page select,
.d3-page input[type="search"] {
  border-color: #9ab8d3;
  border-radius: 6px;
  background: #f8fbff;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
}

.d3-page #station-select {
  cursor: pointer;
}

.d3-page.modal-open {
  overflow: hidden;
}

.d3-page .plot-header {
  margin-bottom: 2px;
}

.d3-page .d3-plot-header-hidden {
  display: none;
}

.d3-page .plot-header h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  line-height: 1.25;
}

.plot-title-location {
  display: block;
}

.d3-page #plot-subtitle {
  display: none;
}

.slider-wrap-top {
  container-type: inline-size;
  margin: 0 0 5px;
}

.slider-wrap-top label {
  display: none;
}

.d3-page .slider-scale {
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  font-size: clamp(0.56rem, 0.9cqw, 0.74rem);
  line-height: 1.05;
  white-space: nowrap;
}

.d3-page .slider-scale span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d3-plot-surface {
  position: relative;
  min-height: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.figure-footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 5px;
  font-size: 0.84rem;
  overflow-x: auto;
  overflow-y: hidden;
}

.parcel-toggles {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
  color: #304c68;
  font-size: 0.84rem;
}

.parcel-toggles label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.parcel-toggles .parcel-selector {
  white-space: nowrap;
}

.parcel-toggles .parcel-selector select {
  appearance: none;
  width: auto;
  min-width: 126px;
  padding: 4px 28px 4px 8px;
  border-radius: 7px;
  background-color: #f8fbff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b5d96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  box-shadow: none;
  cursor: pointer;
  font-size: 0.82rem;
}

.figure-footer .plot-download-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-left: auto;
  white-space: nowrap;
}

.d3-skewt-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.skewt-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: min(260px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  pointer-events: none;
  border: 1px solid rgba(11, 93, 150, 0.34);
  border-radius: 8px;
  padding: 10px 12px;
  color: #102033;
  background: rgba(248, 251, 255, 0.97);
  box-shadow: 0 10px 26px rgba(21, 52, 84, 0.18);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  line-height: 1.35;
}

.skewt-tooltip strong {
  display: block;
  margin-bottom: 4px;
}

.skewt-tooltip .tooltip-value {
  font-weight: 700;
}

.skewt-tooltip .tooltip-note {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-style: italic;
  color: #50677d;
}

.d3-axis text,
.d3-axis-label,
.omega-axis-tick-label,
.skewt-label,
.figure-title {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
}

.figure-title {
  font-size: 16px;
  font-weight: 700;
}

.station-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.station-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 25, 43, 0.55);
}

.station-modal-panel {
  position: absolute;
  inset: min(5vh, 42px) min(4vw, 56px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  border: 1px solid #7fa8cb;
  border-radius: 10px;
  background: #f8fbff;
  box-shadow: 0 24px 80px rgba(7, 28, 51, 0.34);
  overflow: hidden;
}

.station-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #b5cbe0;
  background: #edf6ff;
}

.station-modal-header h2 {
  margin: 0;
  font-size: 1.3rem;
}

.modal-icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid #8fb2d0;
  border-radius: 6px;
  color: #102033;
  background: #ffffff;
  cursor: pointer;
  font: 1.4rem/1 Arial, Helvetica, sans-serif;
}

.station-modal-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 12px;
}

.side-panel-card-header {
  display: grid;
  gap: 10px;
}

.side-panel-card-header h2 {
  margin: 0;
}

.side-panel-card-header {
  margin-bottom: 8px;
}

.hodograph-modal-panel {
  inset: min(2vh, 18px) min(4vw, 48px);
  width: min(1320px, calc(100vw - 96px));
  margin: 0 auto;
}

.hodograph-modal-panel .station-modal-header {
  align-items: center;
  padding: 8px 12px;
}

.hodograph-modal-panel .station-modal-header h2 {
  font-size: 1.12rem;
}

.hodograph-modal-panel .small-copy {
  margin: 2px 0 0;
}

.hodograph-modal-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  min-height: 0;
  padding: 8px;
}

.hodograph-controls {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(220px, 1fr);
  align-items: center;
  gap: 8px 12px;
  color: #304c68;
  font-size: 0.88rem;
}

.hodograph-frame-control {
  display: block;
  min-width: 0;
}

.hodograph-frame-control select {
  appearance: none;
  width: 100%;
  min-width: 0;
  border: 1px solid #9ab8d3;
  border-radius: 6px;
  padding: 5px 30px 5px 8px;
  color: #102033;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b5d96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  font: inherit;
  cursor: pointer;
}

.hodograph-controls .slider-scale {
  grid-column: 2;
}

.hodograph-content {
  display: grid;
  grid-template-columns: minmax(520px, min(74vh, 760px)) minmax(340px, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 0;
}

.hodograph-plot {
  width: min(100%, 74vh, 760px);
  min-height: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  background: #ffffff;
}

.hodograph-inset-shell {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.hodograph-inset {
  width: 100%;
  height: auto;
  min-height: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hodograph-inset-shell .utility-button {
  width: 100%;
  margin-top: -8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.hodograph-inset-shell .utility-button:hover {
  color: #ffffff;
  border-color: #0b5d96;
  background: #0b5d96;
}

.hodograph-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.hodograph-background {
  fill: #ffffff;
}

.hodograph-title {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.hodograph-grid-ring,
.hodograph-axis {
  fill: none;
  stroke: rgba(30, 65, 96, 0.22);
  stroke-width: 1;
}

.hodograph-grid-label,
.hodograph-axis-label,
.hodograph-legend text {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.hodograph-grid-label {
  font-weight: 800;
}

.hodograph-segment {
  fill: none;
  stroke-width: 4.25;
  stroke-linecap: round;
}

.hodograph-point {
  stroke: #ffffff;
  stroke-width: 1.5;
  cursor: crosshair;
}

.hodograph-storm-marker circle,
.hodograph-storm-marker rect {
  stroke: #102033;
  stroke-width: 1.8;
}

.hodograph-storm-marker text {
  fill: #102033;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.hodograph-storm-marker .hodograph-storm-hit {
  fill: transparent;
  stroke: transparent;
  cursor: help;
}

.hodograph-storm-rm circle {
  fill: #f4d35e;
}

.hodograph-storm-lm circle {
  fill: #78c6d6;
}

.hodograph-storm-mw rect {
  fill: #f29e4c;
}

.hodograph-srh-area {
  pointer-events: none;
  stroke-width: 1.5;
}

.hodograph-srh-area-rightMover {
  fill: rgba(244, 211, 94, 0.24);
  stroke: rgba(133, 101, 0, 0.45);
}

.hodograph-srh-area-leftMover {
  fill: rgba(120, 198, 214, 0.24);
  stroke: rgba(24, 94, 112, 0.45);
}

.hodograph-reference-arrow {
  stroke: #102033;
  stroke-width: 2;
  stroke-dasharray: 5 3;
}

.hodograph-reference-arrowhead {
  fill: #102033;
}

.hodograph-reference-label,
.hodograph-frame-label {
  fill: #102033;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.hodograph-hover-point,
.thetae-hit {
  fill: transparent;
  stroke: transparent;
  cursor: crosshair;
}

.hodograph-active-point {
  fill: #ffffff;
  stroke: #102033;
  stroke-width: 2.5;
  pointer-events: none;
}

.thetae-inset {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  background: #ffffff;
}

.thetae-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.thetae-background {
  fill: #ffffff;
}

.thetae-title,
.thetae-axis-label {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
}

.thetae-title {
  font-size: 12px;
  font-weight: 700;
}

.thetae-axis-label {
  font-size: 9px;
  font-weight: 700;
}

.d3-page .thetae-axis text {
  font-size: 9px;
}

.thetae-axis .tick line,
.thetae-height-tick line {
  stroke-width: 0.8;
}

.d3-page .thetae-height-tick text {
  font-size: 9px;
}

.thetae-line {
  fill: none;
  stroke: #7b3dbb;
  stroke-width: 2.2;
}

.thetae-hover-marker {
  fill: #ffffff;
  stroke: #7b3dbb;
}

.ptype-section {
  overflow: visible;
}

.ptype-section[open] {
  display: grid;
  align-content: start;
}

.ptype-panel {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.ptype-energy-plot {
  width: 100%;
  min-height: 210px;
  border: 1px solid #9ab8d3;
  border-radius: 8px;
  background: #ffffff;
}

.ptype-energy-svg {
  display: block;
  width: 100%;
  height: auto;
}

.ptype-energy-background {
  fill: #ffffff;
}

.ptype-region.fzra-favored {
  fill: rgba(190, 50, 54, 0.20);
}

.ptype-region.dominant-fzra {
  fill: rgba(197, 69, 118, 0.18);
}

.ptype-region.fzra-pl-mix {
  fill: rgba(150, 80, 170, 0.17);
}

.ptype-region.dominant-pl {
  fill: rgba(91, 105, 190, 0.17);
}

.ptype-region.pl-favored {
  fill: rgba(45, 116, 184, 0.19);
}

.ptype-region-label,
.ptype-axis-label {
  fill: #304c68;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
}

.ptype-region-label {
  font-size: 7px;
  opacity: 0.78;
  pointer-events: none;
}

.ptype-boundary-line {
  fill: none;
  stroke: rgba(16, 32, 51, 0.58);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 3;
}

.ptype-boundary-line.central-lower,
.ptype-boundary-line.central-upper {
  stroke-width: 1.4;
  stroke-dasharray: none;
}

.ptype-axis-label {
  font-size: 9px;
}

.d3-page .ptype-axis text {
  font-size: 9px;
}

.ptype-trajectory-line {
  fill: none;
  stroke: rgba(16, 32, 51, 0.45);
  stroke-width: 1.4;
}

.ptype-point {
  fill: #102033;
  stroke: #ffffff;
  stroke-width: 1.2;
  cursor: crosshair;
}

.ptype-point.selected {
  fill: #f6c744;
  stroke: #102033;
  stroke-width: 1.8;
}

.ptype-current-ring {
  fill: none;
  stroke: #102033;
  stroke-width: 1.8;
  pointer-events: none;
}

.ptype-probability-bars {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #b5cbe0;
  border-radius: 8px;
  background: #f8fbfe;
}

.ptype-bar-row {
  display: grid;
  grid-template-columns: minmax(82px, 0.9fr) minmax(70px, 1fr) 38px;
  align-items: center;
  gap: 7px;
  min-height: 20px;
  color: #18364f;
  font-size: 0.78rem;
}

.ptype-bar-label,
.ptype-bar-value {
  font-weight: 700;
}

.ptype-bar-value {
  text-align: right;
}

.ptype-bar-track {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 5px;
  background: #e1ebf4;
}

.ptype-bar-fill {
  display: block;
  height: 100%;
}

.ptype-values {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #b5cbe0;
  border-radius: 8px;
  background: #ffffff;
}

.ptype-value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border-bottom: 1px solid #e2edf6;
  color: #18364f;
  font-size: 0.78rem;
}

.ptype-value-row:last-child {
  border-bottom: 0;
}

.ptype-value-row strong {
  color: #102033;
  text-align: right;
}

.ptype-tw.cold {
  color: #1f68aa;
}

.ptype-tw.warm {
  color: #b03d35;
}

.ptype-tw.neutral {
  color: #41586e;
}

.hodograph-side-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  align-content: start;
  gap: 10px;
  min-height: 0;
}

.parcel-trace-hover-target {
  fill: none;
  stroke: transparent;
  stroke-width: 14px;
  pointer-events: stroke;
}

.hodograph-readout,
.hodograph-derived-placeholder {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 0;
  border: 1px solid #b5cbe0;
  border-radius: 8px;
  padding: 10px;
  color: #304c68;
  background: #f8fbff;
  font-size: 0.9rem;
  line-height: 1.35;
}

.hodograph-readout strong {
  color: #102033;
}

.hodograph-derived-placeholder h3 {
  margin: 0;
  color: #102033;
  font-size: 0.95rem;
}

.hodograph-derived-placeholder h4 {
  margin: 6px 0 4px;
  color: #304c68;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hodo-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 14px;
}

.hodograph-derived-placeholder p {
  margin: 0;
}

.d3-page .stat-group {
  border-radius: 8px;
  padding: 10px;
}

.d3-page .stat-group h3 {
  margin-bottom: 7px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.d3-page .metric-row,
.d3-page .surface-row {
  padding: 4px 0;
  font-size: 0.82rem;
  line-height: 1.25;
}

.d3-page .metric-name,
.d3-page .surface-name {
  min-width: 0;
}

.d3-page .metric-value,
.d3-page .surface-value {
  white-space: nowrap;
}

.station-search-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
}

.station-results {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 8px 0 0;
  overflow-y: auto;
  padding-right: 4px;
}

.station-result {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid #b5cbe0;
  border-radius: 6px;
  padding: 8px 10px;
  color: #102033;
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

.station-result span {
  overflow: hidden;
  color: #50677d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.station-result.active {
  border-color: #0b5d96;
  background: #dceeff;
}

.station-map-modal-shell {
  min-height: 0;
  border-color: #9ab8d3;
  border-radius: 8px;
  background: #dbeaf7;
}

.station-leaflet-map {
  width: 100%;
  height: 100%;
  min-height: 460px;
}

.station-map-fallback {
  padding: 18px;
}

.d3-axis text {
  font-size: 14px;
}

.omega-axis-tick-label {
  font-size: 14px;
}

.d3-axis-label {
  font-size: 15px;
  font-weight: 700;
}

.d3-axis path,
.d3-axis line {
  stroke: rgba(30, 65, 96, 0.45);
}

.isobar {
  stroke: rgba(30, 65, 96, 0.14);
  stroke-width: 1;
}

.isotherm {
  stroke: rgba(76, 108, 136, 0.32);
  stroke-width: 1;
}

.isotherm.zero {
  stroke: rgba(30, 65, 96, 0.58);
  stroke-width: 1.4;
}

.dry-adiabat {
  stroke: rgba(178, 102, 42, 0.32);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  fill: none;
}

.moist-adiabat {
  stroke: rgba(40, 105, 174, 0.28);
  stroke-width: 1;
  stroke-dasharray: 8 4;
  fill: none;
}

.mixing-ratio {
  stroke: rgba(42, 132, 98, 0.24);
  stroke-width: 1;
  fill: none;
}

.horizontal-gridline {
  stroke: rgba(76, 108, 136, 0.22);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.time-gridline {
  shape-rendering: crispEdges;
  pointer-events: none;
}

.time-gridline-00z {
  stroke: rgba(0, 0, 0, 0.8);
  stroke-width: 1.35;
}

.time-gridline-12z {
  stroke: rgba(0, 0, 0, 0.75);
  stroke-width: 1.2;
  stroke-dasharray: 6 4;
}

.time-gridline-06z18z {
  stroke: rgba(76, 108, 136, 0.62);
  stroke-width: 1.1;
  stroke-dasharray: 5 5;
}

.time-gridline-minor {
  stroke: rgba(76, 108, 136, 0.28);
  stroke-width: 0.8;
}

.temperature-line {
  stroke: #c2362b;
  stroke-width: 3;
  fill: none;
}

.dgz-line {
  stroke: #f7c948;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dgz-guide-line {
  stroke: #f7c948;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  fill: none;
  pointer-events: stroke;
}

.dgz-hover-zone {
  fill: transparent;
  pointer-events: all;
}

.dgz-active-layer {
  fill: #f7c948;
  fill-opacity: 0;
  pointer-events: none;
}

.dgz-active-layer.is-active {
  fill-opacity: 0.35;
}

.dewpoint-line {
  stroke: #1b7f59;
  stroke-width: 3;
  fill: none;
}

.wetbulb-line {
  stroke: #2f7fd6;
  stroke-width: 2.2;
  fill: none;
}

.frost-point-line {
  stroke: #7dc7ff;
  stroke-width: 2.2;
  fill: none;
}

.sb-parcel-line {
  stroke: #6f35b7;
  stroke-width: 2.4;
  stroke-dasharray: 7 5;
  fill: none;
}

.ml-parcel-line {
  stroke: #d07816;
  stroke-width: 2.4;
  stroke-dasharray: 3 4;
  fill: none;
}

.mu-parcel-line {
  stroke: #b4327a;
  stroke-width: 2.6;
  stroke-dasharray: 10 4 2 4;
  fill: none;
}

.parcel-surfaceBased .marker-line { stroke: #6f35b7; }
.parcel-surfaceBased .marker-label { fill: #5b2b96; }

.parcel-mixedLayer .marker-line { stroke: #d07816; }
.parcel-mixedLayer .marker-label { fill: #9a550d; }

.parcel-mostUnstable .marker-line { stroke: #b4327a; }
.parcel-mostUnstable .marker-label { fill: #8f265f; }

.skewt-rh-layer {
  pointer-events: all;
}

.skewt-rh-bar {
  opacity: 0.4;
  pointer-events: all;
  cursor: crosshair;
}

.skewt-rh-bar:hover {
  opacity: 0.58;
}

.surface-readout {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
}

.surface-readout-temperature {
  fill: #c2362b;
}

.surface-readout-dewpoint {
  fill: #1b7f59;
}

.profile-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 14;
  cursor: crosshair;
}

.profile-hover-marker {
  pointer-events: none;
  fill: #ffffff;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.profile-hover-marker-temperature {
  fill: #ffffff;
  stroke: #c2362b;
}

.profile-hover-marker-dewpoint {
  fill: #ffffff;
  stroke: #1b7f59;
}

.profile-hover-marker-wetbulb {
  fill: #ffffff;
  stroke: #2f7fd6;
}

.profile-hover-marker-frost-point {
  fill: #ffffff;
  stroke: #7dc7ff;
}

.parcel-hover-marker {
  fill: #fff7ed;
  stroke: #b4327a;
}

.parcel-hover-marker-surfaceBased {
  stroke: #6f35b7;
}

.parcel-hover-marker-mixedLayer {
  stroke: #d07816;
}

.parcel-hover-marker-mostUnstable {
  stroke: #b4327a;
}

.wind-barb-hover-marker {
  fill: rgba(255, 255, 255, 0.72);
  stroke: #2369c9;
}

.meteogram-hover-marker-temperature {
  fill: #ffffff;
  stroke: #c2362b;
}

.meteogram-hover-marker-dewpoint {
  fill: #ffffff;
  stroke: #1b7f59;
}

.meteogram-hover-marker-wind {
  fill: #ffffff;
  stroke: #2369c9;
}

.comparison-hover-marker {
  fill: #ffffff;
}

.marker-line {
  stroke: #123a5f;
  stroke-width: 2;
}

.marker-line-outline {
  stroke: #ffffff;
  stroke-width: 6;
  stroke-linecap: round;
}

.marker-label {
  fill: #123a5f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 3px;
  stroke-linejoin: round;
  cursor: pointer;
}

.parcel-level-marker {
  cursor: pointer;
}

.height-marker line {
  stroke-width: 2;
}

.height-marker text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  dominant-baseline: middle;
}

.height-marker-red line {
  stroke: #c5292a;
}

.hodograph-segment.height-marker-red {
  stroke: #c5292a;
}

.hodograph-point.height-marker-red {
  fill: #c5292a;
}

.height-marker-red text {
  fill: #c5292a;
}

.height-marker-orange line {
  stroke: #d87a18;
}

.hodograph-segment.height-marker-orange {
  stroke: #d87a18;
}

.hodograph-point.height-marker-orange {
  fill: #d87a18;
}

.height-marker-orange text {
  fill: #d87a18;
}

.height-marker-green line {
  stroke: #1b7f59;
}

.hodograph-segment.height-marker-green {
  stroke: #1b7f59;
}

.hodograph-point.height-marker-green {
  fill: #1b7f59;
}

.height-marker-green text {
  fill: #1b7f59;
}

.height-marker-blue line {
  stroke: #2369c9;
}

.hodograph-segment.height-marker-blue {
  stroke: #2369c9;
}

.hodograph-point.height-marker-blue {
  fill: #2369c9;
}

.height-marker-blue text {
  fill: #2369c9;
}

.height-marker-purple line {
  stroke: #7b3dbb;
}

.hodograph-segment.height-marker-purple {
  stroke: #7b3dbb;
}

.hodograph-point.height-marker-purple {
  fill: #7b3dbb;
}

.height-marker-purple text {
  fill: #7b3dbb;
}

.wind-barb {
  fill: none;
  stroke: #000000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wind-barb-flag {
  fill: #000000;
  stroke: #000000;
  stroke-width: 1;
}

.wind-calm-circle {
  fill: none;
  stroke: #000000;
  stroke-width: 1.2;
}

.wind-barb-hit-target {
  fill: transparent;
  pointer-events: all;
}

.omega-axis {
  stroke: rgba(20, 40, 62, 0.42);
  stroke-width: 1;
}

.omega-bar {
  cursor: crosshair;
  opacity: 0.78;
}

.omega-bar-positive {
  fill: #2369c9;
}

.omega-bar-negative {
  fill: #c5292a;
}

.omega-bar-active {
  stroke: #000000;
  stroke-width: 2;
  opacity: 1;
}

@media (max-width: 1120px) {
  .d3-page .d3-page-shell {
    min-height: 100vh;
    overflow: visible;
  }

  .d3-page .main-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .d3-page .d3-hero,
  .d3-page #warning-banner,
  .d3-page .d3-future-grid {
    width: 100%;
    max-width: none;
  }

  .station-modal-panel {
    inset: 12px;
  }

  .station-modal-body {
    grid-template-columns: 1fr;
  }

  .hodograph-modal-panel {
    inset: 12px;
    width: auto;
  }

  .hodograph-content {
    grid-template-columns: 1fr;
  }

  .hodograph-controls {
    grid-template-columns: 1fr;
  }

  .hodograph-controls .slider-scale {
    grid-column: 1;
  }

  .hodograph-plot {
    width: 100%;
  }

  .station-leaflet-map {
    min-height: 360px;
  }
}

@media (max-width: 1120px) {
  .d3-page .main-grid,
  .d3-page .d3-page-shell.is-stacked-sounding-layout .main-grid {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }

  .d3-page .plot-panel,
  .d3-page .d3-page-shell.is-stacked-sounding-layout .plot-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto auto;
  }

  .d3-page .plot-panel .d3-plot-surface,
  .d3-page .d3-page-shell.is-stacked-sounding-layout .plot-panel .d3-plot-surface {
    height: auto;
    aspect-ratio: var(--skewt-card-aspect-ratio);
  }

  .d3-page .side-panel,
  .d3-page .d3-page-shell.is-stacked-sounding-layout .side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    max-height: none;
    height: auto;
  }

  .d3-page .side-panel-controls,
  .d3-page .d3-page-shell.is-stacked-sounding-layout .side-panel-controls {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }

  .side-panel-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 699px) {
  .d3-page .side-panel,
  .d3-page .d3-page-shell.is-stacked-sounding-layout .side-panel {
    grid-template-columns: 1fr;
  }

  .side-panel-content {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1121px) {
  .d3-page .d3-page-shell.is-stacked-sounding-layout .main-grid {
    grid-template-columns: 1fr;
    width: calc(100% + 24px);
    max-width: none;
    height: auto;
    min-height: 0;
    margin-left: -12px;
    margin-right: -12px;
  }

  .d3-page .d3-page-shell.is-stacked-sounding-layout .plot-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto auto;
  }

  .d3-page .d3-page-shell.is-stacked-sounding-layout .plot-panel .d3-plot-surface {
    height: auto;
    aspect-ratio: var(--skewt-card-aspect-ratio);
  }

  .d3-page .d3-page-shell.is-stacked-sounding-layout .side-panel {
    max-height: none;
    height: auto;
  }

  .d3-page .d3-page-shell.is-stacked-sounding-layout .side-panel-controls {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  }
}