/* P88 — czytelny nagłówek mobilny i dostęp do ustawień warstwy wiatru. */

@media (max-width: 820px) {
  .mobile-more-menu {
    bottom:
      calc(
        var(--mobile-bottom-space, 118px) +
        8px
      ) !important;
    max-height:
      calc(
        100dvh -
        var(--ow-p36-header-height, 58px) -
        var(--mobile-bottom-space, 118px) -
        18px
      );
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-ui-active.ow-p36-mobile-header > header {
    grid-template-columns:
      minmax(112px, 1fr)
      104px
      44px !important;
    grid-template-areas:
      "brand wind account" !important;
    gap: 6px !important;
    padding-inline:
      max(7px, env(safe-area-inset-left))
      max(7px, env(safe-area-inset-right)) !important;
  }

  /* Status procedury, flagi i komunikaty są dostępne w menu WIĘCEJ. */
  body.mobile-ui-active.ow-p36-mobile-header
  > header
  #simulator-header-status-slot,
  body.mobile-ui-active.ow-p36-mobile-header
  > header
  #ow-static-mode-status-v1,
  body.mobile-ui-active.ow-p36-mobile-header
  > header
  #ow-p36-command-bell {
    display: none !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  header
  .brand-logo {
    max-width: min(152px, 100%) !important;
    height: 38px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  header
  .mobile-wind-summary,
  body.mobile-ui-active.ow-p36-mobile-header
  header
  .opti-mobile-header-wind {
    position: relative !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 3px 16px 3px 5px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  header
  .mobile-wind-summary::after {
    position: absolute;
    top: 50%;
    right: 6px;
    color: #537087;
    content: "›";
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    transform: translateY(-50%) rotate(90deg);
  }

  body.mobile-ui-active.ow-p36-mobile-header
  header
  .mobile-wind-summary[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  body.mobile-ui-active
  .wind-control.mobile-wind-panel {
    top: calc(var(--ow-p36-header-height, 58px) + 6px) !important;
    right: 6px !important;
    width: min(340px, calc(100vw - 12px)) !important;
    max-width: calc(100vw - 12px) !important;
    max-height:
      calc(
        100dvh -
        var(--ow-p36-header-height, 58px) -
        var(--mobile-nav-height, 58px) -
        22px
      ) !important;
  }

  .mobile-more-button.mobile-wind-settings-button {
    background: #e5f3f7;
    color: #08677c;
  }

  .mobile-more-button.mobile-wind-settings-button::before {
    margin-right: 8px;
    content: "↘";
    font-size: 17px;
  }

  .mobile-more-button.mobile-notifications-button::before {
    margin-right: 8px;
    content: "●";
    color: #0066b3;
    font-size: 10px;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active.ow-p36-mobile-header > header {
    grid-template-columns:
      minmax(102px, 1fr)
      96px
      42px !important;
    gap: 5px !important;
    padding-inline: 6px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  header
  .mobile-wind-summary,
  body.mobile-ui-active.ow-p36-mobile-header
  header
  .opti-mobile-header-wind {
    width: 96px !important;
    min-width: 96px !important;
    padding-right: 14px !important;
    padding-left: 4px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  .mobile-wind-summary
  .wind-instrument-compass {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  .mobile-wind-summary
  .wind-instrument-direction {
    font-size: 13px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  .mobile-wind-summary
  .wind-instrument-speed {
    font-size: 9px !important;
  }
}