.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}

/* Chrome/Android touch feedback: suppress the browser's blue tap overlay while
   preserving a visible focus ring for keyboard and accessibility navigation. */
html{-webkit-tap-highlight-color:transparent}
button,a,summary,label,[role="button"],[role="tab"],[tabindex],input,select,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(49,96,196,.42);outline-offset:2px}

/* Stable hamburger icon for Chrome/Android. Do not rely on the Unicode ☰ glyph,
   whose middle stroke can occasionally clip during font/layout rendering. */
#ns2SettingsButton,#platformAdminMenuButton{position:relative}
#ns2SettingsButton{font-size:0!important}
#platformAdminMenuButton>span{display:none!important}
#ns2SettingsButton::before,#platformAdminMenuButton::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:18px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 3px no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 3px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/100% 3px no-repeat;
}

@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}
}