/* Mobile web uses the whole viewport while keeping comfortable content spacing. */
@media (max-width: 600px) {
  html, body, #root { width:100%; height:100%; min-width:0; min-height:0; margin:0; overflow:hidden; }
  .cl-app { width:100%; height:100vh; height:100dvh; min-height:0; padding:0; display:block; }
  .cl-phone { width:100%; max-width:none; height:100%; min-height:0; border:0; border-radius:0; box-shadow:none; }
  .cl-status, .cl-note { display:none; }
  .cl-content { overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
  .cl-phone .cl-content > section { padding:calc(46px + env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) calc(128px + env(safe-area-inset-bottom,0px)) max(22px,env(safe-area-inset-left,0px)); }
  .cl-phone .cl-tabs { left:max(14px,env(safe-area-inset-left,0px)); right:max(14px,env(safe-area-inset-right,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); height:72px; }
  body:not(:has(.cl-today)) > .sr-entry { display:none; }
  .cl-tabs button { min-height:44px; }
  .sleepy-mode-badge { top:calc(12px + env(safe-area-inset-top,0px)); right:max(22px,env(safe-area-inset-right,0px)); font-size:10px; }
  .cl-me > header h1 { font-size:clamp(28px,8vw,36px); line-height:1.16; }
  .cl-me > header p { line-height:1.65; }
  .os-layer { max-width:100%; max-height:100dvh; }
}