:root {
  --safe-top: max(var(--app-safe-top, 0px), calc(env(safe-area-inset-top, 0px) * 0.5));
  --safe-right: max(var(--app-safe-right, 0px), calc(env(safe-area-inset-right, 0px) * 0.5));
  --safe-bottom: max(var(--app-safe-bottom, 0px), calc(env(safe-area-inset-bottom, 0px) * 0.5));
  --safe-left: max(var(--app-safe-left, 0px), calc(env(safe-area-inset-left, 0px) * 0.5));
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --safe-top: max(var(--app-safe-top, 0px), calc(env(safe-area-inset-top, 0px) * 0.5), 14px);
  }
}

/*
 * Native app: offset chrome below the status bar. No opaque ::before band
 * (that covered the map). Kotlin may set --app-chrome-top.
 */
html.native-app {
  --safe-top: max(var(--app-chrome-top, 0px), env(safe-area-inset-top, 0px), 36px);
  --safe-right: 0px;
  --safe-left: 0px;
  --safe-bottom: 0px;
}

/* iOS WKWebView zooms focused fields under 16px. Keep native form text at 16px. */
html.native-app input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="file"]):not([type="image"]),
html.native-app textarea,
html.native-app select {
  font-size: 16px !important;
}

html.native-app body.app-layout-top-2 {
  --safe-top: max(var(--app-chrome-top, 0px), env(safe-area-inset-top, 0px), 36px) !important;
}

html.native-app body.app-layout-bottom-4 {
  /* WebView handles keyboard inset; lift in-flow footers above the nav bar. */
  --safe-bottom: 0px !important;
}

html.native-app body.app-layout-bottom-4 .site-footer--page {
  margin-bottom: var(--app-chrome-bottom, env(safe-area-inset-bottom, 0px));
  padding-bottom: 12px;
}

html.native-app .site-footer--sidebar {
  padding-bottom: calc(8px + var(--app-chrome-bottom, env(safe-area-inset-bottom, 0px)));
}

html.native-app body.app-layout-top-2::before {
  display: none !important;
  content: none !important;
}

/* Mobile web */
html:not(.native-app) body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

body.embed-mode::before {
  display: none !important;
}

header.top,
.top {
  padding-top: var(--safe-top);
}

.topbar {
  padding-top: max(10px, var(--safe-top));
}

.header {
  padding-top: var(--safe-top);
}

.safe-chrome {
  padding-top: max(14px, var(--safe-top));
  padding-right: max(18px, var(--safe-right));
  padding-left: max(18px, var(--safe-left));
}

header.top .safe-chrome,
.top .safe-chrome {
  padding-top: 14px;
}

html.native-app .lang-switcher {
  top: calc(10px + var(--safe-top));
}

/* Keep header brand + nav on one row; shrink to the viewport. */
header.top .brand,
.top > .top-inner > .brand {
  font-size: clamp(13px, 3.4vw, 17px);
}

header.top .nav a,
.top > .top-inner .nav a {
  font-size: clamp(10px, 2.7vw, 12px);
  padding: clamp(5px, 1.3vw, 8px) clamp(6px, 1.8vw, 10px);
  gap: clamp(3px, 1vw, 7px);
  white-space: nowrap;
}

@media (max-width: 720px) {
  header.top .top-inner,
  .top > .top-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between;
    text-align: left !important;
    gap: 8px;
  }

  header.top .brand,
  .top > .top-inner > .brand {
    width: auto !important;
    text-align: left !important;
    flex: 0 0 auto;
  }

  header.top .top-right,
  .top .top-right {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0;
    gap: 6px;
  }

  header.top .nav,
  .top > .top-inner .nav {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 3px;
    padding: 3px;
    max-width: none;
  }

  header.top .lang-switcher-main,
  .top .lang-switcher-main {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }

  header.top .lang-switcher-main .lang-flag,
  .top .lang-switcher-main .lang-flag {
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  header.top .brand,
  .top > .top-inner > .brand {
    font-size: 12px;
  }

  header.top .nav a,
  .top > .top-inner .nav a {
    font-size: 9px;
    padding: 4px 5px;
    gap: 2px;
  }
}

body.safe-body-pad {
  padding-top: max(24px, calc(24px + var(--safe-top))) !important;
  padding-bottom: max(24px, calc(24px + var(--safe-bottom))) !important;
  padding-left: max(24px, var(--safe-left)) !important;
  padding-right: max(24px, var(--safe-right)) !important;
}