:root {
  --app-width: 100vw;
  --app-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --chrome-edge: 20px;
  --chrome-menu-size: 56px;
  --chrome-menu-radius: 18px;
  --chrome-lang-min-width: 48px;
  --chrome-lang-pad-y: 8px;
  --chrome-lang-pad-x: 12px;
  --chrome-menu-link-size: 0.8rem;
  --chrome-menu-link-pad-y: 10px;
  --chrome-menu-link-pad-x: 14px;
  --chrome-top: calc(var(--safe-top) + var(--chrome-edge));
  --footer-inline: max(16px, var(--safe-left)) max(16px, var(--safe-right));
  --footer-bottom: max(18px, var(--safe-bottom));
}

html,
body {
  min-height: 100%;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100svh;
}

.menu-shell {
  top: var(--chrome-top);
  left: calc(var(--safe-left) + var(--chrome-edge));
}

.lang-switcher {
  top: var(--chrome-top);
  right: calc(var(--safe-right) + var(--chrome-edge));
}

.menu-toggle {
  width: var(--chrome-menu-size);
  height: var(--chrome-menu-size);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--chrome-menu-radius);
}

.site-menu {
  max-width: min(280px, calc(100vw - var(--safe-left) - var(--safe-right) - var(--chrome-edge) * 2));
}

.menu-link {
  padding: var(--chrome-menu-link-pad-y) var(--chrome-menu-link-pad-x);
  font-size: var(--chrome-menu-link-size);
}

.lang-btn {
  min-width: var(--chrome-lang-min-width);
  min-height: 44px;
  padding: var(--chrome-lang-pad-y) var(--chrome-lang-pad-x);
}

.site-footer,
.bm-cta-footer {
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  padding-bottom: var(--footer-bottom);
}

html.is-tablet {
  --chrome-edge: 16px;
}

html.is-phone,
html.is-short-viewport {
  --chrome-edge: 12px;
  --chrome-menu-size: 52px;
  --chrome-menu-radius: 16px;
  --chrome-lang-min-width: 44px;
  --chrome-lang-pad-y: 7px;
  --chrome-lang-pad-x: 10px;
  --chrome-menu-link-size: 0.74rem;
  --chrome-menu-link-pad-y: 9px;
  --chrome-menu-link-pad-x: 12px;
}

html.is-phone .site-menu,
html.is-short-viewport .site-menu {
  min-width: min(196px, calc(100vw - var(--safe-left) - var(--safe-right) - var(--chrome-edge) * 2));
}

@media (hover: none) and (pointer: coarse) {
  .menu-toggle:hover,
  .menu-link:hover,
  .lang-btn:hover {
    transform: none;
  }
}