/* Мобильный экран «Махеевъ» — отдельный файл, чтобы телефон не держал старый кэш */

html.phone-ui .dept-screen,
html.touch-ui .dept-screen {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(14px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px))
    max(14px, env(safe-area-inset-left, 0px)) !important;
}

html.phone-ui .dept-stage,
html.touch-ui .dept-stage {
  width: 100% !important;
  min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 28px) !important;
  gap: 16px !important;
}

html.phone-ui .dept-hero,
html.touch-ui .dept-hero {
  padding: 6px 2px 0 !important;
  gap: 10px !important;
}

html.phone-ui .dept-wordmark,
html.touch-ui .dept-wordmark {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: clamp(2.4rem, 11.5vw, 4.2rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-align: center !important;
}

html.phone-ui .dept-lead,
html.touch-ui .dept-lead {
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
}

html.phone-ui .dept-grid,
html.touch-ui .dept-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html.phone-ui .dept-card,
html.touch-ui .dept-card {
  min-height: 74px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 4px 12px !important;
  transform: none !important;
}

html.phone-ui .dept-card:hover,
html.touch-ui .dept-card:hover {
  transform: none !important;
}

html.phone-ui .dept-card:active,
html.touch-ui .dept-card:active {
  transform: scale(0.985) !important;
}

html.phone-ui .dept-card-index,
html.touch-ui .dept-card-index {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

html.phone-ui .dept-card-title,
html.touch-ui .dept-card-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 1.05rem !important;
}

html.phone-ui .dept-card-hint,
html.touch-ui .dept-card-hint {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 0.75rem !important;
}

html.phone-ui .dept-card-go,
html.touch-ui .dept-card-go {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  font-size: 1.35rem !important;
}

html.phone-ui .dept-card-active,
html.touch-ui .dept-card-active {
  min-height: 80px !important;
}