/* Header controls have their own space; the wind legend stays on the map. */
.app-bar {
  --header-actions-width: 124px;
  --header-actions-inset: max(12px, env(safe-area-inset-right, 0px));
}

.app-bar .wind-hud {
  padding-right: calc(var(--header-actions-width) + 12px);
}

.app-bar__actions {
  position: absolute;
  top: 50%;
  right: var(--header-actions-inset);
  display: flex;
  align-items: center;
  gap: 8px;
  width: var(--header-actions-width);
  transform: translateY(-50%);
}

.app-bar__actions .theme-toggle {
  position: static;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 0;
  transform: none;
}

.app-bar__actions .theme-toggle:hover { transform: scale(1.05); }

.app-bar__actions .account-button {
  position: static;
  flex: 0 0 76px;
  width: 76px;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 10px;
  color: var(--sun);
  background: rgba(47, 107, 63, .42);
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
}

.app-bar__actions .account-button:hover { background: var(--sea); }
.app-bar__actions button:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

/* Keep the two actions at the upper right on phones and tablets. Only the
   location row reserves their width; wind and forecast hours use the row below. */
@media (max-width: 960px) {
  .app-bar {
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  .app-bar__actions {
    top: calc(8px + env(safe-area-inset-top, 0px));
    transform: none;
  }
  .app-bar .wind-hud {
    padding-right: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .app-bar .wind-hud__topline {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-right: calc(var(--header-actions-width) + 12px);
  }
  .app-bar .wind-hud__readout,
  .app-bar .wind-hud__loading {
    grid-column: 1;
    grid-row: 2;
  }
  .app-bar .wind-hud__timeline {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Wide, short phone screens keep the existing single-row weather strip. */
@media screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (min-width: 700px) {
  .app-bar__actions { top: 50%; transform: translateY(-50%); }
  .app-bar .wind-hud {
    padding-right: calc(var(--header-actions-width) + 12px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 10px;
  }
  .app-bar .wind-hud__topline { grid-column: 1; grid-row: 1; padding-right: 0; }
  .app-bar .wind-hud__readout,
  .app-bar .wind-hud__loading { grid-column: 2; grid-row: 1; }
  .app-bar .wind-hud__timeline { grid-column: 3; grid-row: 1; }
}