/* Responsive sizing guardrails. Does not alter Kraark's visual identity. */
@media screen and (max-width: 850px) {
  html { width: 100%; max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { width: 100%; max-width: 100%; margin-inline: 0; }
  #kraark-app, .ka-shell, .shell { width: 100%; max-width: 100%; min-width: 0; }
  #kraark-app .wrap, #kraark-app .hero-grid, #kraark-app .dashboard,
  .ka-right, .ka-card, .content, .main, .topbar { max-width: 100%; min-width: 0; }
  img, video, iframe, svg { max-width: 100%; }
  input, select, textarea { font-size: max(16px, 1em); }
}

/* Reduce exposed browser canvas during mobile pull-down without locking scrolling. */
html { background-color: #f7f5fb; overscroll-behavior-y: none; }
body { background-color: #f7f5fb; overscroll-behavior-y: none; }
@media screen and (max-width:850px) {
  html, body { min-height: 100%; min-height: 100dvh; }
  #kraark-app { min-height: 100dvh; }
}