.replay-weather {
  position: absolute;
  z-index: 45;
  top: 0;
  left: 52px;
  width: min(300px, calc(100vw - 24px));
  min-width: 0;
  max-width: calc(100vw - 24px);
  max-height: none;
  box-sizing: border-box;
  overflow: visible;
  container-type: inline-size;
  color: var(--ui-color-text, #172b33);
  background: var(--ui-color-surface, #fff);
  border: 1px solid var(--ui-color-border, #d2ddde);
  border-radius: 6px;
  box-shadow: var(--ui-shadow-overlay, 0 2px 8px #0003);
  pointer-events: auto;
  font: 400 14px/1.35 var(--ui-font-family, Barlow, sans-serif);
}
.replay-weather:is(.flightmap-v2-map-menu, .analyzer-map-menu) { display: block; width: min(300px, calc(100vw - 24px)); min-width: 0; max-height: none; padding: 0; overflow: visible; }
.replay-weather[hidden], .replay-weather__wind-readout[hidden] { display: none !important; }
.replay-weather__tools { position: absolute; z-index: 45; top: 12px; left: 12px; }
.replay-weather__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--ui-color-border, #d2ddde);
  border-radius: 50%;
  color: var(--ui-color-text, #172b33);
  background: var(--ui-color-surface, #fff);
  box-shadow: 0 1px 4px #0003;
  cursor: pointer;
  pointer-events: auto;
  font: 16px/1 var(--ui-font-family, Barlow, sans-serif);
}
.replay-weather__toggle:hover { color: var(--ui-color-primary-strong, #10536a); background: var(--ui-color-surface-hover, #eaf1f2); }
body.layout-default .analyzer-map-controls .replay-weather__toggle { border-radius: 50%; }
.replay-weather__toggle:is([aria-expanded="true"], [data-active="true"]) { color: var(--ui-color-primary-strong, #10536a); background: var(--ui-color-surface-hover, #eaf1f2); border-color: var(--ui-color-primary, #176b86); }
.replay-weather__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2px 8px; padding: 4px; }
.replay-weather__body > * { min-width: 0; }
.replay-weather__body > :not(.replay-weather__wind, .replay-weather__level) { grid-column: 1 / -1; order: 2; }
.replay-weather__body > .replay-weather__models { order: 1; }
.replay-weather__body > [hidden], .replay-weather__height { display: none; }
.replay-weather label { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; }
.replay-weather input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-color-primary, #176b86); }
.replay-weather__level > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.replay-weather select { width: 100%; min-width: 0; min-height: 44px; max-width: 100%; box-sizing: border-box; margin: 0; padding: 4px 8px; color: inherit; background: var(--ui-color-surface, #fff); border: 1px solid var(--ui-color-border, #d2ddde); border-radius: 6px; font: inherit; font-size: 16px; }
.replay-weather label:has([data-weather-model]) { flex-direction: column; align-items: stretch; gap: 4px; margin: 8px 0; }
.replay-weather [data-weather-model] { order: 1; width: 100%; max-width: 100%; }
.replay-weather__models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.replay-weather__model { min-width: 44px; min-height: 44px; box-sizing: border-box; padding: 4px; border: 1px solid var(--ui-color-border, #d2ddde); border-radius: 6px; color: inherit; background: var(--ui-color-surface, #fff); font: inherit; font-size: 14px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.replay-weather__model:is(:hover, [aria-pressed="true"]) { color: var(--ui-color-primary-strong, #10536a); background: var(--ui-color-surface-hover, #eaf1f2); }
.replay-weather__model[aria-pressed="true"] { border-color: var(--ui-color-primary, #176b86); font-weight: 600; }
.replay-weather :is(input, select, .replay-weather__model):focus-visible, .replay-weather__toggle:focus-visible { outline: 2px solid var(--ui-color-primary, #176b86); outline-offset: 3px; }
.replay-weather__status, .replay-weather__attribution { margin: 0; font-size: 12px; line-height: 1.25; color: var(--ui-color-text-muted, #536a73); overflow-wrap: anywhere; }
@container (max-width: 199px) {
  .replay-weather__body { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 199px) {
  .replay-weather__models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.replay-weather__canvas { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.replay-weather__canvas--thermals { z-index: 7; }
.flightmap-3d-viewer > .replay-weather__canvas { z-index: 2; }
.flightmap-3d-viewer > .replay-weather__canvas--thermals { z-index: 1; }
.flightmap-3d-root > :is(.flightmap-3d-chart-wrap, .flightmap-3d-controls) { z-index: 2; }
.flightmap-3d-root > .replay-weather__tools { top: 8px; left: auto; right: calc(var(--replay-readout-width, 180px) + 16px); }
.task-replay-layers > .replay-weather { top: 62px; left: 60px; width: var(--replay-layer-panel-width, 280px); max-height: none; }
.replay-weather__wind-readout {
  position: absolute;
  z-index: 12;
  top: 12px;
  right: 56px;
  max-width: calc(100% - 112px);
  padding: 6px 8px;
  border: 1px solid var(--ui-color-border, #d2ddde);
  border-radius: 6px;
  color: var(--ui-color-text, #172b33);
  background: var(--ui-color-surface, #fff);
  pointer-events: none;
  overflow-wrap: anywhere;
  font: 600 14px/1.35 var(--ui-font-family, Barlow, sans-serif);
}
.replay-weather__wind-readout--inline { position: static; max-width: 100%; padding: 0; margin-top: 4px; border: 0; border-radius: 0; color: inherit; background: transparent; font-size: 12px; }
.flightmap-3d-root .flightmap-3d-info-stack > .flightmap-3d-readout:has(> .replay-weather__wind-readout:not([hidden])) { height: auto; }
.task-replay__map > .replay-weather__wind-readout { top: 12px; right: 56px; max-width: calc(100% - 188px); }
:is(:root[data-theme="dark"], body.dark-mode) :is(.replay-weather, .replay-weather__toggle, .replay-weather__wind-readout:not(.replay-weather__wind-readout--inline)) { color: var(--ui-color-text, #e8f0f0); background: var(--ui-color-surface, #17262d); border-color: var(--ui-color-border, #38515a); }
:is(:root[data-theme="dark"], body.dark-mode) .replay-weather__toggle:is(:hover, [aria-expanded="true"], [data-active="true"]) { color: var(--ui-color-primary-strong, #a7dbe5); background: var(--ui-color-surface-hover, #294049); border-color: var(--ui-color-primary, #83c9da); }
:is(:root[data-theme="dark"], body.dark-mode) .replay-weather :is(select, .replay-weather__model) { background: var(--ui-color-surface, #17262d); border-color: var(--ui-color-border, #38515a); }
:is(:root[data-theme="dark"], body.dark-mode) .replay-weather__model:is(:hover, [aria-pressed="true"]) { color: var(--ui-color-primary-strong, #a7dbe5); background: var(--ui-color-surface-hover, #294049); }
:is(:root[data-theme="dark"], body.dark-mode) .replay-weather__model[aria-pressed="true"] { border-color: var(--ui-color-primary, #83c9da); }
:is(:root[data-theme="dark"], body.dark-mode) :is(.replay-weather__status, .replay-weather__attribution) { color: var(--ui-color-text-muted, #a4b9bf); }