.ingredient-filter-gap{margin-top:10px}.dialog-close-wide{width:100%;margin-top:12px}

/* Absolute first-paint gate. The app shell is revealed only after routing is resolved. */
html:not(.route-paint-ready) body{background:#f5f7f6}
html:not(.route-paint-ready) .app-shell,
html:not(.route-paint-ready) #toast{visibility:hidden!important;pointer-events:none!important}

/* First-paint route gate: keep raw auth/workspace markup hidden without showing a separate boot artwork. */
body:not(.auth-route-ready):not(.app-route-ready){overflow:hidden;background:#f5f7f6}
body:not(.auth-route-ready):not(.app-route-ready) .app-shell,
body:not(.auth-route-ready):not(.app-route-ready) #toast{visibility:hidden!important;pointer-events:none!important}
body:not(.auth-route-ready):not(.app-route-ready)::before,
body:not(.auth-route-ready):not(.app-route-ready)::after{content:none!important;display:none!important}

/* Prevent the sign-in screen from flashing before session routing finishes. */
body:not(.auth-route-ready) #authView{visibility:hidden!important;pointer-events:none!important}

/* Keep Users & access content inside its card on every screen size. */
#accessCard .accordion-body{min-width:0;overflow:hidden}
#accessCard .subsection-title{min-width:0;flex-wrap:wrap;align-items:flex-start}
#accessCard .subsection-title h3{min-width:0}
#generateJoinCodeButton{max-width:100%;white-space:normal;text-align:center}
#pendingRequestsList .list-row,#usersList .list-row{min-width:0}
#pendingRequestsList .list-main,#usersList .list-main{min-width:0;max-width:100%}
#pendingRequestsList .row-actions,#usersList .row-actions{min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
#pendingRequestsList .row-actions button,#usersList .row-actions button,#usersList .row-actions select{max-width:100%;white-space:normal}

@media(max-width:620px){
  #accessCard .accordion-body{padding:15px 14px 17px}
  #accessCard .subsection-title{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  #generateJoinCodeButton{width:100%}
  #pendingRequestsList .list-row,#usersList .list-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:10px;padding:12px}
  #pendingRequestsList .list-title,#usersList .list-title{white-space:normal;overflow-wrap:anywhere}
  #pendingRequestsList .row-actions,#usersList .row-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:7px}
  #pendingRequestsList .row-actions button,#usersList .row-actions button,#usersList .row-actions select{width:100%;min-width:0}
  #usersList .owner-label{justify-self:start;max-width:100%;overflow-wrap:anywhere}
}