/* MOLO Mobile Foundation V1 - shared responsive safety layer.
   Loaded after each page's own design. It protects readability and interaction
   without replacing the unique visual world of each planner. */
:root{--molo-touch:44px;--molo-mobile-gap:14px}
html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,picture,iframe{max-width:100%;height:auto}
pre,code{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.molo-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:inherit}
.molo-overflow-scroll{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
.molo-mobile-foundation button,.molo-mobile-foundation [role="button"],.molo-mobile-foundation input,.molo-mobile-foundation select,.molo-mobile-foundation textarea,.molo-mobile-foundation a.button,.molo-mobile-foundation a.btn{touch-action:manipulation}
@media(max-width:900px){
  body{min-width:0!important}
  main,.main,.content,.app-main,.planner-main,.page-content,.main-content,.shell,.workspace,.planner-content{min-width:0!important;max-width:100%!important}
  .container,.wrapper,.shell,.page-shell,.content-shell,.app-content,.planner-content{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important}
  .grid,.dashboard-grid,.main-grid,.content-grid,.cards-grid,.stats-grid,.summary-grid,.report-grid,.settings-grid,.form-grid,.two-column,.two-col,.three-col,.four-col{min-width:0!important}
  table{font-size:max(13px,1em)}
  th,td{min-width:110px;padding:11px 10px!important;vertical-align:top}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea{max-width:100%!important;min-height:44px;font-size:16px!important}
  button,.button,.btn,[role="button"],a.button,a.btn{min-height:44px}
  small,.small,.meta,.helper,.hint,.eyebrow,.kicker,.caption,.micro,.tiny{font-size:max(12px,.78rem)!important;line-height:1.45!important}
  p,li,label,td,th{overflow-wrap:anywhere}
  h1,h2,h3,h4{overflow-wrap:anywhere}
  .toolbar,.actions,.button-row,.action-row,.top-actions,.page-actions,.card-actions,.modal-actions,.form-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center}
  .toolbar>*,.actions>*,.button-row>*,.action-row>*,.page-actions>*{max-width:100%}
  dialog,.modal,.app-modal,.modal-card,.dialog,.drawer,.sheet,.popup,.popover,[role="dialog"]{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
  .modal-card,.app-modal-card,.dialog-card,.popup-card,[role="dialog"]>div{overflow:auto;-webkit-overflow-scrolling:touch}
  .topbar,.top-bar,.app-topbar,.planner-topbar,.page-header,.site-header,.header-inner{max-width:100%!important;flex-wrap:wrap!important}
  .sidebar,.app-sidebar,.planner-sidebar,.paint-sidebar,.phd-sidebar,.wedding-sidebar,.travel-sidebar,.budget-sidebar,.creator-sidebar,.nurse-sidebar,.christmas-sidebar,.nav-sidebar{
    position:relative!important;inset:auto!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;transform:none!important;
  }
  .sidebar nav,.app-sidebar nav,.planner-sidebar nav,.paint-sidebar nav,.phd-sidebar nav,.wedding-sidebar nav,.travel-sidebar nav,.budget-sidebar nav,.creator-sidebar nav,.nurse-sidebar nav,.christmas-sidebar nav,.nav-sidebar nav,
  .sidebar-nav,.planner-nav,.side-nav{display:flex!important;flex-flow:row nowrap!important;gap:8px!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .sidebar nav a,.app-sidebar nav a,.planner-sidebar nav a,.paint-sidebar nav a,.phd-sidebar nav a,.wedding-sidebar nav a,.travel-sidebar nav a,.budget-sidebar nav a,.creator-sidebar nav a,.nurse-sidebar nav a,.christmas-sidebar nav a,.nav-sidebar nav a,
  .sidebar-nav a,.planner-nav a,.side-nav a{flex:0 0 auto!important;white-space:nowrap!important;min-height:44px!important}
  .app-shell,.planner-shell,.layout,.app-layout,.page-layout,.dashboard-shell,.paint-shell,.phd-shell,.wedding-shell,.travel-shell,.budget-shell,.creator-shell,.nurse-shell,.christmas-shell{grid-template-columns:minmax(0,1fr)!important;display:grid!important;max-width:100%!important}
  .fixed,.sticky{max-width:100%}
}
@media(max-width:620px){
  .grid,.dashboard-grid,.main-grid,.content-grid,.cards-grid,.stats-grid,.summary-grid,.report-grid,.settings-grid,.form-grid,.two-column,.two-col,.three-col,.four-col{grid-template-columns:minmax(0,1fr)!important}
  .card,.panel,.tile,.widget,.section-card,.planner-card,.dashboard-card{min-width:0!important;max-width:100%!important}
  .toolbar,.actions,.button-row,.action-row,.page-actions,.form-actions{align-items:stretch!important}
  .toolbar>button,.toolbar>.button,.actions>button,.actions>.button,.button-row>button,.action-row>button,.page-actions>button,.form-actions>button{flex:1 1 150px}
  .hide-mobile{display:none!important}
}
@media(hover:none) and (pointer:coarse){
  button,.button,.btn,[role="button"],input,select,textarea{scroll-margin:90px}
}